Технология использования семантической верстки в 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 идеально подходит для разметки событий или организаций.

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

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

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

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

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

Адрес

Ижевск, ул. Воткинское шоссе, д. 170 Е, Технопарк Нобель, офис 1117

8 495 1985800
Заказать звонок

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

info@dstglobal.ru

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

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