Микроразметка: форматы Schema.org и Open Graph

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

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

schema.org

schema.org

В 2011 году появилась микроразметка schema.org. Она представляет собой словарь тегов и атрибутов, которые встраиваются в стандартный HTML-код страницы и указывают поисковым роботам на точное содержание информации.  Также с ее помощью формируются качественные сниппеты – информация, которая отображается в результатах выдачи.

Например, рассмотрим обычный HTML-заголовок

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

Этот стандарт используют самые главные поисковики - Google, Яндекс, Microsoft и Yahoo!

Основные атрибуты schema.org

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

Атрибут  itemscope: выделяем сущность

Этот атрибут указывает поисковым системам обратить внимание на выделенную им часть страницы, так как речь идет о какой-то конкретной сущности. Добавим его в код html, содержащий информацию о фильме:

Титаник

Титаник

Атрибут itemtype – уточняем сущность

Теперь нужно уточнить, о какой именно сущности идет говорится на странице. Сделать это можно при помощи атрибута itemtype. Укажем, что тип данной сущности -  фильм (тип Movie). Обратите внимание, что названия типов имеют вид URL:

Титаник

Атрибут itemprop – дополняем сущность

Можно указать дополнительную информацию о рассматриваемой сущности. Укажем режиссера, жанр фильма и поясним, что на странице содержится трейлер:  

Режиссер: Джеймс Кэмерон ДрамаТитаник

С полным списком атрибутов можно ознакомится на официальной странице микроразметки

При помощи schema.org  можно размечать статьи, товары в интернет-магазине, видео- и аудиопубликации, рецепты и многое другое.

Open Graph

open graph

Open Graph – это стандарт для правильного отображения веб-страниц в социальных сетях.

Зачем нужен Open Graph?

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

Чтобы быть уверенным в корректном отображении своей веб-страницы в социальных сетях, следует использовать стандарт Open Graph. Его создали разработчики социальной сети Facebook. Также этот стандарт поддерживают Вконтакте, Google+, Twitter, LinkedIn и Pinterest.

Основные мета-теги Open Graph

Для формирования красивого и правильного превью используются следующие четыре мета-тега: og:descriptionog:imageog:type и og:url. Рассмотрим их подробно.

Мета-тег og:description отвечает за описание материала, причем его размер может достигать 295 знаков.

Пример:

meta property="og:description" content="Разработка и продвижение сайтов"

В мета-теге og:type содержится тип добавляемого материала. Например, для указания типа статьи, нужно написать article. Если это аудиозапись песни – пишется  music.song.  Если это целый музыкальный альбом – указываем music.album.

 Пример

В теге og:url находится ссылка на исходную страницу.

Пример:

Разметка Open Graph логична и интуитивно понятна, полный словарь с примерами можно посмотреть на ее официальном сайте.

Валидаторы микроразметки

Поисковые гиганты Google  и Яндекс предлагают Вам проверить качество своей разметки на своих сайтах. Для Google  - это проверка структурированных данных , а для российского поисковика – валидатор микроразметки.

проверка структурированных данных

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


Назад