Микроразметка – это стандарт для семантической оптимизации страницы. Ее цель – помочь поисковым роботам понять, о чем говорится на странице, и представлять информацию в результатах выдачи более полно и релевантно.
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. Его создали разработчики социальной сети Facebook. Также этот стандарт поддерживают Вконтакте, Google+, Twitter, LinkedIn и Pinterest.
Основные мета-теги Open Graph
Для формирования красивого и правильного превью используются следующие четыре мета-тега: og:description, og:image, og:type и og:url. Рассмотрим их подробно.
Мета-тег og:description отвечает за описание материала, причем его размер может достигать 295 знаков.
Пример:
meta property="og:description" content="Разработка и продвижение сайтов"
В мета-теге og:type содержится тип добавляемого материала. Например, для указания типа статьи, нужно написать article. Если это аудиозапись песни – пишется music.song. Если это целый музыкальный альбом – указываем music.album.
Пример
В теге og:url находится ссылка на исходную страницу.
Пример:
Разметка Open Graph логична и интуитивно понятна, полный словарь с примерами можно посмотреть на ее официальном сайте.
Валидаторы микроразметки
Поисковые гиганты Google и Яндекс предлагают Вам проверить качество своей разметки на своих сайтах. Для Google - это проверка структурированных данных , а для российского поисковика – валидатор микроразметки.
Не стоит пренебрегать микроразметкой. Не сложная в изучении и применении, она поможет представить Ваш сайт в выгодном свете как для поисковых систем, так и для посетителей. Качественные сниппеты в результатах выдачи и интересно оформленные превью в социальных сетях будут способствовать привлечению дополнительного траффика на Ваш сайт.
