Анатомия качественной веб-страницы

Содержание:

  1. Тег title
  2. Мета description
  3. Хлебные крошки
  4. Оглавление(якоря)
  5. Подзаголовки
  6. Списки
  7. Изображения
  8. Видео
  9. Микроразметка

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

Тег title

Title (заголовок страницы) один из наиболее важных факторов для ранжирования в Google (рис. 1). Он предоставляет ценную информацию, помогает роботам и пользователям понять о чем страница.тайтл в выдачеРисунок №1 — Тайтл в выдаче

Обычно Google показывает не более 70 символов в заголовке. Старайтесь не превышать это значение.

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

Мета description

Описание не является прямым фактором ранжирования, но он может повлиять на кликабельность сниппета вашего сайта. Он отображается в поиске (рис. 2).

описание в выдачеРисунок №2 — Описание в выдаче

Если он будет скучным, то на него никто не нажмет, следовательно, пользователи не попадут на ваш сайт.

Google отображает в описании не более 140 символов. Старайтесь не превышать этот лимит, но и опишите максимум полезной информации.

Используйте ключевые слова, коммерческие запросы, призывы к действию, эмодзи(галочки, стрелочки и пр.), но не превращайте описание в спам, иначе это сыграет для сайта не в лучшую сторону. Описывайте только важную информацию для пользователей.

Хлебные крошки

Хлебные крошки возможно нужны не всем сайтам, но тем не менее, для SEO и пользователя они могут быть полезны (рис. 3).

хб в выдачеРисунок №3 — Хлебные крошки в действии

ХБ — это простые текстовые ссылки, которые помогают пользователям проследить обратный путь от страницы, на которой они в данный момент находятся. Со стороны SEO — дополнительная внутренняя перелинковка между страницами, а для поисковых роботов — возможность лучше понять иерархическую структуру сайта. Особенно это актуально на сайтах с многоуровневой структурой. На рисунке 3 изображено, как они выглядят на сайте.

хб на сайтеРисунок №3 — Хлебные крошки на сайте

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

Оглавление(якоря)

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

Можно провести параллель с поиском информации в книге. Скорее всего, что вы не станете перелистывать страницу за страницей, а обратитесь к оглавлению, чтобы найти нужную страницу и сразу перейти к ней. По такому же принципу стоит делать оглавление на сайте. Каждый пункт оглавления будет якорем вести к необходимому разделу статьи (рис. 4).

оглавление с якорямиРисунок №4 — Оглавление с якорями для инструкции на сайте

Создавать оглавления также просто, как списки, добавив в них якоря на подзаголовки в статье.

Подзаголовки

С появлением многочисленного видеоконтента, люди перестают читать длинные статьи. Если попадают на текстовый контент, то ищут в нем что-то определенное или интересующее их. В этом помогают подзаголовки. В HTML их существует 6: Н1 — главный заголовок и 5 подзаголовков уровней Н2-Н6.

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

Порядок размещения подзаголовков также важен. Если подзаголовки будут идти вперемешку, например, Н3-Н2-Н4-Н3…, то это считается ошибкой в разметке HTML. Внутри подзаголовки высшего уровня могут размещаться подзаголовки низшего, но не наоборот.

Подзаголовки должны последовательно размещаться в статье. Например такие варианты: Н2-Н3-Н2-Н3…, Н2-Н3-Н3-Н3-Н2-Н3-Н3-Н3-…,Н2-Н3-Н3-Н3… и т.д.

Подзаголовки помогут пользователям лучше и легче ориентироваться в вашем контенте.

Инфографика в дополнение

анатомия качественной веб-страницы

Списки

Уже немало сказано, что человек пытается найти какие-то привлекающие внимание элементы на сайтах, чтобы не искать самостоятельно. Список еще один элемент, который помогает легче воспринимать и искать информацию. Есть нумерованный и маркированный списки (рис. 5).

список на сайтеРисунок №5 — Маркированный список

Если вы обладаете знаниями CSS, то можно настроить свои знаки для маркированного списка(по умолчанию — кружочки).

Изображения

Изображения дают возможность понять контент, если словами его трудно воспринимать. Используйте:

  • диаграммы/графики,
  • фото продуктов,
  • изображения-инструкции,
  • карты,
  • инфографики и т.д.

Что сделать для того, чтобы Google лучше понимал изображения?

Недостаточно просто добавлять фото в свой контент на странице. Чтобы робот и человек, понимали какие картинки перед ними, используйте атрибуты alt — описывает содержимое картинки, понятное название файлов, в некоторых случаях — title — описание при наведении на изображение.

При составлении alt учитывайте ключевые слова, так как данный атрибут поможет ранжироваться вашим картинкам в Google Картинках. Описанный атрибут должен быть понятен и для человека, то есть полностью отражать смысл изображения.

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

Видео

Видео еще более ценный контент после изображений. Если присутствует хорошая озвучка или хотя бы субтитры, то ему нет цены. Видеоролики:

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

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

Старайтесь размещать видео не слишком далеко от границы экрана, но и не в самом начале. Идеально размещать после 1-2 абзаца, тогда пользователи начнут читать, а потом их увлечет видео).

Микроразметка

Как и description, микроразметка, не является прямым фактором ранжирования, но она может помочь улучшить отображение вашего сайта в выдаче. Наверняка вы встречали рецепты, обзоры и пр. сниппеты в выдаче с картинками, видео и т.д. Это размеченные данные schema.org. Многие исследования показывают, что сайты, у которых есть микроразметка, получают больше органического трафика. В таких сниппетах есть отзывы(звездочки), ссылка на страницу в виде последовательной цепочки, цена, наличие товара и т.д (рис. 6).

разметка на сайтеРисунок №6 — Разметка в сниппете

На данный момент разметку использует менее трети сайтов. Наиболее используемые виды:

    • вакансии,
    • для организаций,
    • мероприятий,
    • товаров,
    • статей,
    • отзывов,
    • приложения,
    • фильмы,
    • телесериалы и т.д.

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

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

Автор Ирина Старченко
практикующий Seo-специалист
и программист любитель

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *