Ошибки в верстке сказываются на ранжировании вашего сайта в поисковой выдаче. Это не руководство “как вывести сайт в топ поисковой выдачи”, эта статья призвана показать как экономия на качественной верстке приводит к потере потенциальных посетителей.

Ниже приведены 10 факторов в верстке, которые могу повлиять на ранжирование вашего сайта:

1. Заголовок сайта

Заголовок сайта — это текст, который вы можете увидеть в верхней полосе вашего браузера

В верстке заголовок обозначается тегом <title>. Пример:

<title>KolosMedia - расширяем возможности в интернете</title>

Эту часть сайта поисковые машины использую для того, чтобы озаглавить ваш сайт на странице выдачи результатов поиска.

Именно текст, который прописан в теге <title> посетители читают прежде чем попасть на ваш сайт со страницы поисковой выдачи. Поэтому очень важно чтобы заголовок был коротким, хорошо читался и соответствовал содержанию вашей страницы.

Основные ошибки связанные с применением заголовка:

  • Его полное отсутствие;
  • Содержимое тега title одинаковое на всех страницах;
  • Заголовок не соответствует содержанию страницы;
  • Текст заголовка слишком длинный (более 60-70-и символов)

При оптимизации сайта уделите заголовку сайта особое внимание, ведь именно после его прочтения пользователи решают, переходить им на ваш сайт, или нет.

2. Тег <meta>

Есть два meta-тега, которые могут повлиять на поисковую выдачу. Это keywords и description.

В meta-теге keywords указывается перечень ключевых слов на странице, а в meta-теге description  — краткое описание страницы.

<meta name=”keywords” content=”Ключевые слова”>
<meta name=”description” content=”Краткое описание”>

Метатег keywords поисковые машины практически не используют. Это связано с тем, что в прошлом веб-мастера злоупотребляли этим тегом и вставляли туда огромный перечень всех возможных ключевых слова. Эти слова не соответствовали содержанию страницы сайта, поэтому неправильное использование этого тега может даже навредить вашему сайту.

Текст в meta-теге description поисковые машины выводят на странице поисковой выдаче под заголовком вашей страницы. Поэтому пишите в этом теге текст, который максимально точно описывает содержимое страницы.

3. Правильное применение заголовков

В html существуют специальные теги для указания разных уровней заголовков — <h1>-<h6>. Есть несколько простых правил, которые связаны с заголовками:

  • Заголовок первого уровня <h1> является заголовком страницы, и должен использоваться только один раз.
  • Слова, помещенные в заголовок  имеют больший вес, чем простой текст. Поэтому в заголовке первого уровня обычно помещают ключевые слова, по которым будут находить вашу страницу.
  • Необходимо придерживаться четкой вложенности заголовков, т.е. каждый новый уровень заголовка должен идти за предыдущем уровнем:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h2></h2>

<h2></h2>


правильное применение заголовков

<h1></h1>

<h3></h3>

<h2></h2>


неправильное применение заголовков

Правильное применение заголовков дает двойной эффект: для пользователей текст становится более понятным и логически разделенным, а поисковой системе легче определить, о чем ваша страница.

4. Теги логического выделения —  <strong> и <em>

Тег <strong> делает текст с жирным начертанием, а тег <em> — с курсивным. Но кроме визуального форматирования, эти теги делают логический акцент в тексте. Благодаря этим тегам поисковые машины определяют какое слово или фраза в тексте имеет больший вес по сравнению с остальными.

Помещайте главные идеи и ключевые слова  в теги логической разметки. В этом случае по запросам, которые включают в себя логически выделенные слова, страница будет ранжирована выше, по сравнению с аналогичными сайтами без выделения. Но всегда нужно знать меру, т.к. поисковые машины пытаются найти естественные тексты, которые будут интересны вашим посетителям.

5. Правильное использование тега <img>

Изображения в html задаются тегом <img> с атрибутом src который указывает путь к физическому размещению картинки:
<img src=”www.example.com/img.png”>

Многие забывают про атрибут alt, и тем самым лишают себя возможности участвовать в поиске по изображениям. Текст, помещенный в атрибут alt, не только показывается в браузере при отключенном показе картинок, но и индексируется поисковыми роботами. И в дальнейшем ваше изображение и сайт смогут найти через поиск по изображениям, который доступен в большинстве крупных поисковых системах.

6. Текст должен быть ближе к началу документа

В исходном коде страницы основной текст с заголовком должен быть как можно ближе к началу странице. Например разметку:

<div class="leftmenu">
    <ul>
        <li>Пункт меню</li>
        <li>Пункт меню</li>
        <li>Пункт меню</li>
    </ul>
</div>
<div class="content">
    <h1>Заголовок</h1>
    <p>текст</p>
</div>

можно сверстать в обратном порядке, не изменив при этом внешнего отображения на странице (придется внести только правки в CSS):

<div class="content">
    <h1>Заголовок</h1>
    <p>текст</p>
</div>
<div class="leftmenu">
    <ul>
        <li>Пункт меню</li>
        <li>Пункт меню</li>
        <li>Пункт меню</li>
    </ul>
</div>

В этом случае основное содержимое страницы намного ближе к началу документа. Это помогает поисковой машине в первую очередь загрузить и проидексироваться основной контент. Другая сторона медали заключается в том, что текст который расположен в первом экране будет прочтен с большей вероятностью, чем тот, который расположен на третьем или пятом. Учитывая этот поведенческий фактор, поисковые машины дают больший вес тексту, который расположен выше в документе.

7. Валидность страницы

Язык HTML, как и все другие языки, имеет набор своих правил. И все страницы, используя ту или иную версию html, должны соответствовать этим правилам (стандартам W3C). Страницы, в которых есть ошибки, называются “невалидными”.

Ведется множество дискуссий на тему: “Влияет ли валидность страницы на ранжирование в поисковой системе”. Сотрудники Google в своих рекомендациях веб-разработчикам сообщают, чтобы мы проследили “за правильностью HTML кода”. И множество экспериментов показало, что сайты с валидным кодом имеют при равных обстоятельствах лучшие позиции в поисковой выдаче.

Валидность кода важна для каждого ресурса, но иногда приходится делать выбор. Например крупные порталы, проводя оптимизацию скорости загрузки, жертвуют валидностью.

Проверить ваш сайт на валидность можно по этой ссылке — http://validator.w3.org/

8. Семантика на странице

Семантика в HTML — это правильное применение тегов на странице. Выше мы описывали что заголовки должны находится в тегах <h1>-<h6>. Это и есть пример семантического применения тега. Кроме этого есть большое множество правил, которые нужно применять, например:

  • Абзацы с текстом помещаются в тег <p>;
  • Блочные цитаты помещаются в <blockquote>;
  • Ненумерованный список должен строиться при помощи тегов <ul> и <li>;
  • Аббревиатуры помещайте в тег <abbr>;
  • Тег <table> использовать только для вывода табличных данных, а не для разметки страницы и т.д.

Семантическое применение тегов позволяет поисковой машине правильно интерпретировать назначение каждого элемента на вашем сайте. Благодаря этому поисковая машина легко поймет, какой контент будет  максимально полезен пользователям, и предоставит именно его на странице поисковой выдачи.

9. Скорость загрузки страницы

Google учитывает скорость загрузки страницы при ранжировании результатов поиска. Поисковые машины вводят все новые параметры для определения качественных сайтов. Ведь пользователи начинают раздражаться когда сайт грузится больше 2-3 секунд, и в большинстве случаев они не дожидаются и закрывают вашу страницу, переходя на другую.

На скорость загрузки влияют много факторов, среди которых: медленный хостинг, большой размер html файла и подключаемых скриптов и стилей, неоптимизированный графический материал.

В интернете есть множество инструментов, которые помогут вам оптимизировать скорость загрузки сайта (например Page Speed и Closure от Google).

Скорость загрузки — очень важный фактор, который будут учитывать все поисковые машины. Доступ к качественной информации должен осуществляться быстро. Позаботьтесь об этом, проведя оптимизацию скорости загрузки.

10. Корректность отображения и кроссбраузерность

При ранжировании страниц в поисковой выдаче, к скорости загрузки страниц добавился еще один фактор — это поведенческий фактор. Суть его простая: если пользователь заходит на страницу, и почти сразу ее покидает, значит эта страница или:

  • не понравилась пользователю;
  • не интересная;
  • не содержит полезной информации;
  • не соответствует тому запросу, по которому ее искал этот пользователь;

И на этот поведенческий фактор очень сильно может повлиять “кривая” верстка. Когда пользователь заходит на сайт, а вместо аккуратных блоков и красиво расположенного текста он видит неразбериху.
Всегда помните о своих пользователях, поисковые машины уже давно научились учитывать не только качество вашего контента, а и поведение ваших пользователей на сайте

Выводы

Поисковая система пытается найти максимально полезный ресурс для каждого пользователя, этим и обусловлено усложнение алгоритма поиска, который учитывает не только релевантность текста, правильную разметку страницы и ее элементов, а и скорость загрузки страницы и процент отказов посещения этой страницы. Экономия на качественной верстке приводит к потере потенциальных клиентов. Все советы данные в статье стоит использовать в меру, и всегда помнить что вашим главным читателем сайта будут люди а не поисковые роботы.