Что такое микроразметка на сайтах и зачем она нужна
easy

Что такое микроразметка на сайтах и зачем она нужна

Это как разметка, только микро

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

Пару строк простого сниппета поисковик может сформировать сам: процитировать отрывок веб-страницы со словами из запроса или взять описание из тега <description>. 

Но бывает, что у сайта расширенный сниппет с картинкой или ссылками. Например, так выглядит сниппет Практикума:

Что такое микроразметка на сайтах и зачем она нужна

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

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

Микроразметка — это специальный код, который добавляется на веб-страницу, чтобы у машин была о ней более подробная и структурированная информация. Изначально микроразметку придумали для поисковых систем: метаданных и ключевых слов недостаточно, чтобы интерпретировать информацию на сайте. Со временем микроразметку стали поддерживать и другие сервисы, например мессенджеры и социальные сети. Она помогает им лучше понимать, что содержится на веб-странице, и отображать её контент в информативном формате.

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

  • для многостраничного сайта — разделы и наиболее важные страницы;
  • для статьи в интернет-издании — обложка, заголовок, автор и дата публикации;
  • для страницы товара в интернет-магазине — фотография товара, его цена и рейтинг;
  • для страницы с кулинарным рецептом — фотография блюда, список ингредиентов, время приготовления, количество порций;
  • для страницы «О компании» — контактный телефон, адрес и часы работы и так далее.

Вот как выглядит микроразметка в коде главной страницы «Кода»:

Что такое микроразметка на сайтах и зачем она нужна

А вот как это отображается в результатах поисковых систем. Попробуйте найти соответствие кода и результатов:

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

Что даёт микроразметка

Наличие микроразметки хорошо для всех — и для пользователей, и для владельцев сайтов. У сайтов с микроразметкой много преимуществ:

  • Улучшенное понимание поисковыми системами. За счёт этого пользователи быстрее находят подходящие им веб-страницы, а владельцы сайтов могут повысить рейтинг и видимость этих страниц в результатах поисковых систем.
  • Расширенные результаты поиска. Фрагменты веб-страницы делают результаты поиска сайта более привлекательными. Пользователи могут видеть, насколько результат соответствует запросу, а владельцы сайтов получают больше переходов по ссылкам из поисковиков.
  • Оптимизация голосового поиска. Структурированные данные помогают голосовым помощникам лучше искать подходящие сайты. Пользователи голосового поиска получают более точные результаты, а владельцы сайтов не теряют посетителей, которые пользуются таким поиском.
  • Персонализация контента. С помощью микроразметки рекомендательные системы предоставляют пользователям более подходящие рекомендации контента, а владельцы сайтов получают более релевантную аудиторию.

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

Что даёт микроразметка
Так благодаря микроразметке отображается превью статьи при отправке ссылки на неё в Телеграме: обложка, заголовок и введение
Что даёт микроразметка
Вторая ссылка в поиске — самая информативная. Спасибо микроразметке!
Что даёт микроразметка
Микроразметка используется и для отображения компаний в Яндекс Бизнесе

Словари и синтаксис

Для указания структурированных данных на веб-странице используются определённые словари и синтаксис микроразметки.

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

Синтаксис — это правила и структура представления данных. Он определяет, как должны быть организованы и вложены элементы микроразметки, какие атрибуты и элементы HTML могут быть использованы, а также какие свойства словаря можно применить к каждому элементу.

Если проще, то словари — это ЧТО описывается, а синтаксис — КАК. Словарей много, поэтому мы расскажем о наиболее распространённых: 

  • Schema.org предоставляет схемы для описания сотен различных типов контента, например статей, товаров, организаций, событий, отзывов и так далее.
  • Open Graph Protocol позволяет автоматически создавать превью в социальных сетях и мессенджерах для постов с определёнными тегами и атрибутами. С помощью OGP можно указать название, описание, изображение, тип контента и другие свойства для объекта.
  • Микроформаты включают такие форматы, как, например hCard для контактной информации, hRecipe для рецептов и hReview для отзывов. У каждого формата свой набор правил и атрибутов для описания определённых типов контента.

А вот наиболее используемые синтаксисы микроразметки:

  • JSON-LD (JavaScript Object Notation for Linked Data) позволяет добавлять структурированные данные в виде скриптов с объектами со свойствами и значениями, определёнными словарём. Обычно используется со Schema.org, но подходит и для других словарей.
  • RDFa (Resource Description Framework in Attributes) основан на тегах и атрибутах XHTML и используется для создания RDF-графов, которые описывают структуру и содержимое веб-страницы. RDFa позволяет добавлять семантическую информацию прямо к HTML-коду страницы при помощи таких атрибутов элементов, как, например property, typeof и resource.
  • Микроданные используются для описания объектов и их свойств с помощью пар «атрибут — значение».
  • Микроформаты предназначены для определённых типов данных, таких как адреса, контакты, события и так далее.

Что дальше

В следующий раз мы сделаем расширенный сниппет для сайта. Подпишитесь, чтобы не пропустить :-)

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Юлия Зубарева

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy