Технология использования семантической верстки в HTML5

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

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

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

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

Роль семантической разметки сайта в SEO

Если вы все еще не позаботились о создании микроразметки данных на сайте, то поспешите. На это есть две причины:

Удобство для пользователей. Если HTML-код позволяет оформить данные, то семантическая разметка помогает детально объяснить, что вы хотели сказать. Так вы оптимизируете поиск, сделав этот процесс не таким времязатратным.

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

Микроразметка влияет на позиции только косвенно, так как она повышает CTR кликабельности страниц в выдачи, тем самым улучшая поведенческие факторы.

Виды разметки данных

Schema.org – язык поисковых систем Гугл и Яндекс. Также его прекрасно понимают другие поисковые роботы, так как это самый популярный вариант микроразметки, который считается общепринятым стандартом.

OpenGraph – тип разметки, который применяют роботы соцсетей. Первая разработка принадлежит социальной сети Фейсбук, но позже его подхватили и другие – Вконтакте, Твиттер, Гугл + и так далее. Микроразметка отвечает за отображения превью в новостной ленте.

JSON-LD – язык связанных данных, который описывает содержимое страницы. При таком виде разметки контент видят только роботы, но не пользователи. Используется только как дополнение к Schema.org.

Микроформаты – альтернатива разметки гипертекста через атрибут «class». К примеру, задаем тег <div class=”adr”></div>, то есть объясняем боту, что внутри <div> находится адрес.

На каком виде разметки остановиться? Поисковые системы рекомендуют использовать общепринятую разметку schema.org. В популярных конструкторах сайтов внедрена разметка OpenGraph. Мнения вебмастеров о выборе разметки расходятся.

Как внедрить микроразметку

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

Schema App – платный софт, позволяющий успешно внедрить Schema.org даже без специальных знаний.

Microdata Generator Using Schema.org + JSON-LD – инструменты для создания автоматической микроразметки Schema.org.

Расширения и плагины для различных языков и движков.

Как проверить, правильно ли сделана семантическая разметка сайта

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

Еще один инструмент – Structured Data Testing Tool от Google. Оба инструмента показывают, как поисковый робот видит сниппет на основе вашей разметки.

Выводы

На вашем сайте должны быть как минимум два вида разметки – Schema.org (для разметки организаций, хлебных крошек и статей) и OpenGraph (отображение в соцсетях). JSON-LD идеально подходит для разметки событий или организаций.

Комментарии
RSS
Ваш комментарий
Загрузка...
Вам может быть интересно
Тема адаптивности сегодня как никогда актуальна, поскольку многие пользователи часто сталкиваются с проблемой невозможности использовать сайты с разных устройств. Если раньше веб-ресурсы создавались д...
JavaScript входит в число самых популярных языков программирования, а фронтенд-р...
Достаточно большое количество задач в верстке сейч...
Что такое адаптивная верстка сайта и зачем она нуж...
Адаптивный дизайн сайта – это динамический дизайн,...
Мобильная версия сайта — это самостоятельная...
Все мы активно пользуемся смартфонами, планшетами ...
Адаптивный дизайн. Почему это важно?До недавнего в...
Верстка - один из важнейших факторов юзабилити, от...
В наши дни оптимизация сайта под мобильные телефон...
Интернет меняется с каждым днем. Сегодня пользоват...

Новые комментарии

Спасибо ребятам разработчикам за русскую соц.сеть да еще и к празднику 9 мая!
Спасибо разработчикам DST за то что вовремя сделали такой важный проект как Русский Твиттер! Как нельзя кстати. Мы уже сделали канал на РутВите
Если вы хотите, чтобы получилось что-то путное, нужно переходить на УТ11, продлевать лицензию, обновляться, добиться увольнения 1С-ника, раз он не пон...
Если вы хотите, чтобы получилось что-то путное, нужно переходить на УТ11, продлевать лицензию, обновляться, добиться увольнения 1С-ника, раз он не пон...

Заявка на услуги DST

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

Россия, Москва

Комсомольский пр-т, д.28

8 800 5508827
Заказать звонок

Режим работы: Пн-Пт 10:00-19:00

info@dstglobal.ru

Задать вопрос по почте

Укажите ваше имя
Укажите ваше email
Укажите ваше телефон