Микроразметка для сайта от А до Я

Например, на странице «Контакты» компании X стоит обозначить микроразметкой блок с контактными данными. Тогда, на запрос пользователя «контакты компании X» робот безошибочно покажет нужную страницу и нужные данные. Грамотное продвижение сайта – залог эффективного привлечения клиентов.

Начнем со словарей

Как уже упоминалось выше, наиболее распространенными словарями микроразметки являются Open Graph и Schema.org.

По статистическим данным Яндекса известно, что словарь Open Graph используют 15% всех сайтов рунета. Этот показатель является преобладающим среди всевозможных словарей для микроразметки. Сегодня разметку Open Graph понимает не только facebook, как это планировалось сначала, но и многие другие популярные социальные сети, такие как Google+, Twitter, Вконтакте и т.д. На своем официальном сайте создатели Open Graph заявляют, что создание данного словаря — это возможность представления данных веб-страницы как социальных граф. Стоит отметить, что язык строился на основании уже существующих технологий.

В свою очередь, язык микроразметки Schema.org создавался совместно с крупнейшими поисковыми компаниями Google, Yandex, Bing, Yahoo!. Основная цель, которую преследовали разработчики — дать пользователю возможность увидеть в сниппете выдачи дополнительные данные о компании не заходя на сайт, и, таким образом, сделать поиск более быстрым и удобным. Со Schema.org сниппет содержит более полное описание страницы, может включать рейтинг, выводить стоимость «от и до», включать разметку хлебных крошек и т.д.

Если рассмотреть принцип работы словаря микроразметки Schema.org более детально, то можно увидеть, что веб-страница представляет собой схему из разных типов данных. Каждый такой тип соединен с набором свойств. Типы иерархически организуются в схемы. На официальном сайте Schema.org можно найти утверждённые и действующие типы и их свойства. Для примера рассмотрим alternateName, description, image.

В свойстве alternateName, в основном, излагается текстовая информация, в которой указываются псевдонимы (алиасы) описываемого объекта. В свойстве description представляется описание того объекта, о котором идет речь, а в image может отображаться изображение или ссылка на изображение товара (услуги) о котором(ой)  идет речь.

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

• itemscope – описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
• itemtype – указывает тип сущности;
• itemprop – позволяет указать дополнительные свойства. Например, сущность — кинопремьера. В таком случае можно указать название, дату, место проведения.

Помимо Open Graph и Schema.org. существуют и другие, менее популярные словари:

• FOAF (Friend of a Friend) – словарь основан на идее связей между людьми, вещами, их отношением друг к другу;
• Data-Vocabulary.org – словарь разрабатывался командой Google до Schema.org. На сегодня разработка данного словаря остановлена, а разработчики Data-Vocabulary.org перешли в Schema.org;
• Dublin Core – словарь, созданный для библиотечных нужд в далеком 1995 г., имеет набор базовых параметров;
• Good Relations – словарь, созданный для описания товаров из сферы  торговли в интернете, позволяет описывать товар, его цену, место, где его можно приобрести.

Микроразметка для разных типов сайта

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

Интернет-магазин

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

Товарные страницы

В Schema.org для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Информация продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.

Для  этого необходимо в коде указать поля name, offers, price, pricecurrency и т.д. Например:

Контакты

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

Код выглядит следующим образом:

Отзывы

Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства AggregateRating в Product. В результате в выдаче Google в сниппете появится рейтинг и отзывы:

Код выглядит следующим образом:

Картинки

Поиск по картинке дает возможность увеличить трафик на сайт при помощи визуализации. Для того, чтобы попасть в поиск по изображениям Google и Яндекс, необходимо применить на сайте микроразметку schema.org/ImageObject и  указать ссылку на изображение, его название, описание, размеры и подпись.

Код выглядит следующим образом:

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

Информационные порталы и СМИ

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

Новостные страницы в большинстве своем используют мультимедийный контент. Поэтому, наиболее часто используемый язык микроразметки Schema.org/Article размечается следующими атрибутами:

• itemscope itemtype=http://schema.org/WPHeader – указывает на общий контент;
• itemscope itemtype=http://schema.org/Article – указывает на тело статьи;
• itemprop=»name» – обозначает заголовок;
• itemprop=»author» – авторство;
• itemprop=»datePublished» (Обязательно время в формате «Y-m-d») – дата публикации;
• itemprop=»articleBody» – текст статьи;
• itemprop=»articleSection» – рубрика;
• itemprop=»image» – изображение.

Для социальных сетей используется разметка Open Graph.

Видеохостинг

Для сайтов с внушительным количеством видеоконтента, необходима разметка роликов при помощи типа VideoObject от Schema.org или расширения  Open Graph. Вследствие такой разметки, доступна следующая информация о ролике на страницах поисковой выдачи: заставка, заголовок, текстовое описание, продолжительность, возможность предварительного просмотра, авторские права и прочее.

Соответственно, код будет представлен следующим образом:

Также, не стоит забывать, что не всегда пользователи ищут фильм конкретно по названию. В поисковую строку они могут вводить имя актёра или режиссёра, к примеру. Поэтому, для того, чтобы сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie, которая позволит получить структурированный сниппет в Яндексе. Для этого необходимо указать подробные данные о фильме: название, жанр, описание, актеров и т.д.

Коммерческий сайт

Для коммерческих сайтов, помимо уже описанных выше микроразметок отзывов, картинок, видео и контактов, можно разметить раздел с вопросами и ответами (если такой имеется на сайте), чтобы привлечь еще и низкочастотный трафик из поиска.

Для этого, в коде данные необходимо размечать с помощью атрибутов Question и Answer от Schema.org:

Микроразметка для FAQ (блок вопрос-ответ)

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

Микроразметка для FAQ

Требования к микроразметке FAQ:

• контент для разметки должен полностью совпадать с контентом на странице (несоблюдение этого пункта может привести к санкциям со стороны поисковых систем);
• согласно правилам Google, страница с микроразметкой не должна использоваться в рекламных целях.

Пример микроразметки для FAQ на десктопе

Пример микроразметки для FAQ на мобильном устройстве

Недостаток микроразметки FAQ

Замечено, что внедрение микроразметки FAQ может отрицательно влиять на показатель кликабельности страницы. Дело в том, что если пользователь в выдаче находит полный и исчерпывающий ответ на свой запрос, ему нет смысла переходить на сайт. Таким образом растет число показов страницы, а вот количество кликов может существенно снизиться (так называемый zero-click или no-click).

Вот пример того, как добавление микроразметки FAQ на сайт повлияло на статистику по странице: число показов выросло (голубая линия), количество кликов снизилось (синяя линия):

Но эту проблему можно решить.

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

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

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

HowTo – еще одна достаточно новая микроразметка. Используется для страниц, содержащих инструкции. Как и для микроразметки FAQ, к HowTo у Google также есть ряд требований:

• контент инструкции должен быть разделен на явно обозначенные шаги;
• контент не должен носить оскорбительный характер или призывать к жестокости;
• контент для микроразметки не должен носить рекламный характер;
• инструкция должна содержать релевантные изображения, а также материалы и инструменты, необходимые для решения задач. Они должны быть указаны в разметке;
• микроразметка HowTo не может использоваться для кулинарных рецептов, для этого типа контента существует отдельная разметка.

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

Существует 2 формата сниппетов для микроразметки HowTo:

Первый вариант оформления сниппета для микроразметки HowTo

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

Во втором варианте описание представлено в виде раскрывающегося списка с описанием для каждого шага.

Одно из преимуществ разметки HowTo – оптимизация для голосового поиска и девайсов с Google Assistant. Когда пользователи формулируют устный запрос, на который можно ответить пошаговой инструкцией, контент, отмеченный разметкой HowTo, будет выбран с большей вероятностью.

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

Если вы внедряете разметки FAQ или HowTo, внимательно следите за тем, как она влияет на показы, клики и ранжирование страницы. Разметка должна приносить вашему ресурсу пользу.

Адекватность семантической разметки на страницах сайта можно проверить при помощи Валидатора микроразметки от Яндекса или Google. Они поддерживают все известные форматы микроразметки, в том числе OpenGraph и Schema.org., и их содержимое. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных.