Микроразметка сайта что это

Schema.org своими руками: настраиваем микроразметку без программиста

Программисты сейчас обиделись, а не надо. Они же попробуют справиться без вас, а потом придут к вам же с просьбой починить все, что поломалось в процессе. Шутка. Почти.

Рассказываем о словаре и синтаксисе микроразметки, собрали несколько плагинов и инструментов для создания и проверки разметки, разобрали по шагам один из плагинов.

Рассказываем о том, зачем нужна разметка Schema.org, что она из себя представляет и как ее создавать без знания кода.

Зачем нужна микроразметка

Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.

Кроме Schema.org есть другие виды микроразметок. У них разные назначения, поэтому вкратце приведем свойства основных видов, чтобы не путать:

Разница между словарем и синтаксисом

Словарь — это набор классов и свойств, которые описывают тип содержимого страницы и передают ключевую информацию. Словарь можно сравнить с языком — например, английским. Schema.org, Open Graph, Dublin Core — все это словари.

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

Варианты синтаксиса, которые применяются для разметки Schema.org:

Подробнее о том, какой синтаксис лучше, поговорим чуть позже.

Чем различаются сайты с разметкой и без нее

Сайты с реализованной микроразметкой видно по сниппетам на странице поисковой выдачи. Вот пример: в выдаче два сниппета с одного и того же сайта, первый — с микроразметкой, второй — без нее.

А так выглядит сниппет страницы с афишей кинофильмов, если на странице есть микроразметка:

С помощью микроразметки в сниппетах страниц товаров отображаются цены:

И еще один пример: в первом сниппете реализована микроразметка хлебных крошек, а во втором такой разметки нет:

Больше информации о разметке Schema.org, а также перечень поддерживаемых сущностей — в справке Яндекса.

А здесь — виды расширенных результатов поиска в Google (отображаются для сайтов с реализованной микроразметкой).

Что говорят поисковики

Яндекс и Google советуют вебмастерам и оптимизаторам внедрять микроразметку. Основная мотивация: внедрение микроразметки улучшает сниппет визуально, а также повышает качество поиска (поисковые роботы лучше понимают содержимое сайта, на страницах которого реализована семантическая разметка данных).

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку. (С разметкой тоже поможем).

Чем еще полезна микроразметка

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

И тут срабатывает такая цепочка: привлекательный сниппет → больше пользователей кликают и переходят на сайт → улучшаются поведенческие факторы → вы ранжируетесь лучше и поднимаетесь в выдаче.

Также микроразметку используют собственные сервисы поисковиков — например, страница с реализованной разметкой может попасть в колдунщики на поисковой выдаче (при этом сам сайт не обязательно должен быть в ТОПе выдачи).

Словарь Schema.org

Словарь микроразметки состоит из сущностей (например, Продукт) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).

Весь список сущностей и документация — на официальном сайте schema.org.

На скриншоте — часть сущностей (слева) и свойств сущности Thing (в правой части скриншота)

Рассказывать о всех сущностях не будем, приведем примеры самых популярных:

Оптимальный синтаксис

Мы уже упоминали о том, что для Schema.org подходят четыре вида синтаксиса:

Первые три имеют ряд недостатков и теряют популярность, а последний (JSON-LD) — используется все чаще.

Google рекомендует использовать именно JSON-LD — он более простой и компактный, в отличие от RDFa, микроформатов и других синтаксисов.

Но есть проблема: Яндекс пока не поддерживает синтаксис JSON-LD на поиске (хотя использует его в Яндекс.Почте). Поэтому, если вы продвигаетесь в Рунете (а скорей всего так и есть), вам этот синтаксис нет смысла использовать. В таком случае ваш выбор — микроданные или RDFa (микроформаты тоже вариант, но их используют не так часто — этот синтаксис имеет ряд ограничений и устарел по сравнению с другими стандартами).

Если ваш продукт или бизнес направлен на западный сегмент интернета и Google для вас в приоритете — используйте JSON-LD.

JSON-LD

Теперь о деталях. Поговорим о том, как выглядит синтаксис и какие правила в нем действуют.

JSON-LD в базовом виде выглядит так:

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

Обратите внимание! Наличие микроразметки не гарантирует того, что в поиске будет выводиться расширенный сниппет со всеми данными, указанными в разметке. Тем не менее, поисковые роботы все равно будут учитывать переданные данные и смогут лучше понимать содержимое страницы.

Как делать разметку JSON-LD

Ручная разметка в JSON-LD (да и в любом другом синтаксисе) — рутинная задача, отнимает много времени и всегда остается риск допустить ошибку. Упростить задачу можно с помощью генераторов JSON-LD, вот несколько популярных:

Проверка валидности разметки

При создании микроразметки важно, чтобы синтаксис был правильным и без ошибок. Даже если вы генерируете JSON-LD с помощью специальных плагинов или сервисов, не спешите загружать код на сайт, сначала проверьте его на валидность.

Для проверки кода используйте валидаторы от поисковиков:

Куда вставлять JSON-LD?

Если код валиден (валидатор не нашел ошибок) — можете смело добавлять разметку на сайт. Для этого код нужно вставить между тегами и на целевой странице.

Микроданные

В микроданных используется язык разметке HTML (в JSON-LD — JavaScript). Работать с этим синтаксисом сложнее — код разметки нужно прописывать в теле контента.

В основе микроданных — три атрибута:

Вот как это выглядит:

Прописывать такой код вручную — довольно трудоемкая и рутинная задача.

Сервисы для генерации микроданных

Хорошая новость в том, что для микроданных также существуют специальные сервисы-генераторы:

Сгенерируйте код и проверьте его на наличие ошибок (теми же сервисами).

Внедряем микроразметку самостоятельно и без знания кода

Покажем вам простой способ, как быстро и без единой строчки кода подключить микроразметку.

Автоматическая разметка страниц с помощью Маркера данных

Google разработал специальный инструмент для максимально простого внедрения микроразметки — Маркер данных.

Чем удобен инструмент:

Как пользоваться

Переходим в Маркер данных и выбираем подтвержденный ресурс;

Роботы Google просканируют страницы сайта и учтут заданную микроразметку.

Как изменить или убрать микроразметку

Когда робот Google снова просканирует страницы сайта, разметка перестанет учитываться и в поисковой выдаче будут отображаться обычные сниппеты.

Обратите внимание! Маркер передает данные только для робота Google. Если вы продвигаетесь в Яндексе, вам все равно придется добавлять код микроразметки на страницы. К счастью, для этого по-прежнему не обязательно знание кода.

Сайт на CMS? Используйте плагины

Рассмотрим самую популярную CMS в Рунете — Вордпресс. Для Вордпресс есть несколько решений, которые помогут просто и быстро внедрить микроразметку. Вот обзор плагинов, подходящих для этой задачи:

Настройка микроразметки в плагине Schema: пошаговая инструкция

Установите плагин и кликните по разделу Schema, который появится в боковом меню админпанели. Перейдите в раздел Settings → General. Выберите тип сайта и загрузите логотип.

Сохраните изменения и перейдите на вторую вкладку — Knowledge Graph. Здесь вам нужно указать, кого представляет сайт — выберите Person, если это личный сайт, или Organization (если продвигаете сайт компании).

Перейдите на вкладку Schemas. Выберите из выпадающих списков страницы «О себе» и «Контакты». Если хотите подключить разметку хедера и футера, хлебных крошек и других элементов страниц сайта — поставьте галочки напротив соответствующих параметров.

Также можно настроить автоматическое удаление микроразметки, если будет удален плагин Schema. Для этого перейдите на вкладку Advanced и поставьте галочку напротив «Delete Data on Uninstall».

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

Примерно так же строится работа с другими плагинами для Вордпресс. Главное преимущество — вам не нужно разбираться в синтаксисе и прописывать все параметры вручную.

Выжимка

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

Источник

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

Я работаю в команде семантического веба в Яндексе. Мы занимаемся тем, что создаем продукты на основе семантической разметки, делаем свои расширения и участвуем в развитии стандарта Schema.org.

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

Под микроразметкой (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.

Микроразметка состоит из словаря и синтаксиса.

Словарь — это своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».

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

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

В этой статье мы разберем наиболее распространенные словари:

Schema.org — словарь, который вместе разрабатывают крупнейшие поисковые системы для того, чтобы вебмастерам не приходилось размечать отдельно для каждого поисковика. Разметка Schema.org дает возможность сайтам получать специальные сниппеты в поисковой выдаче.

Микроформаты разработаны энтузиастами из W3C, которые хотели сделать свой стандарт с использованием базовых элементов HTML. Часто бывают сложности с различием микроформатов и микроразметки — сразу отметим, что это не одно и то же. Микроформаты — это один из словарей микроразметки, так же, как и Schema.org, Open Graph или FOAF. Единственное отличие в том, что микроформаты представляют собой объединенный стандарт синтаксиса и словаря. Тогда как микроразметка, как мы сказали выше, — собирательный термин для способа обогащения страницы семантическими данными.

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

Самые распространенные словари в интернете

Open Graph

Open Graph (OG) — это самый распространенный и простой словарь. Сейчас Open Graph чаще всего используют для того, чтобы публикуемые ссылки с сайтов были расширенными, красивыми и понятными. С разметкой OG ссылки будут так показываться по всех популярных соцсетях.

Также разметка Open Graph активно используется приложениями для Facebook — она позволяет пользователям отражать действия из приложений на своих страничках.

Благодаря OG можно смотреть видео, читать краткое описание статьи и быстрее понимать суть информации, которой делятся друзья, просматривая бесконечные ленты новостей. Помимо Facebook разметку Open Graph распознают также Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие.

Сам словарь достаточно лёгок в применении — для начала использования нужно 4 свойства:

Здесь робот распознает, что страница посвящена мужчине по имени Юрий Гагарин, на ней есть ссылка на его фото. Здесь такое свойство как url указывается как канонический URL страницы.

В теге og:type помимо типа «profile» могут быть указаны различные типы сущностей (у которых есть еще свои свойства):

Кроме того, словарь OG признают и поисковые системы, в некоторых случаях даже дополняют его.

Schema.org

Schema.org — это словарь, который появился по инициативе поисковых систем в 2011 году. Его поддерживают Яндекс, Google, Bing и Yahoo!

В Schema.org также представлены наборы классов, описывающих различные сущности и их свойства. Но если в OG и Microformats.org такие классы исчисляются десятками, в Schema.org их уже несколько сотен. Все классы имеют свое место в древовидной иерархии.

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

Наиболее обобщенный тип сущности — это Thing, у которого есть подтипы. Рассмотрим несколько из них:

Из нашего опыта. Почти год внедрялись 7 новых полей в тип schema.org/PeopleAudience, так как сомнениям политкорректных европейцев и американцев не было предела: «Как можно указывать максимальный возраст целевой аудитории? То, что мужчине за 30, еще не значит, что ему не интересны книжки для маленьких девочек!» Ок, предлагаемые поля maxAge и minAge превращаются в suggestedMaxAge и suggestedMinAge. С полом оказалось тоже все сложно. Убедить в том, что пол может быть однозначно указан не удалось — неполиткорректно. Так что gender превратился в suggestedGender.

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

Также предусматривается возможность расширять словарь по инициативе пользователей и вебмастеров.

Существует публичная рассылка на английском языке public-vocabs@w3.org, созданная для обсуждения общих вопросов, предложений и сообщений об ошибках, куда также можно написать письмо с вопросом о разметке, если у вас не получается что-то внедрить. Есть механизм расширения, а также с мая 2011 года можно использовать списки на внешних ресурсах для указания различных свойств.

Так что если вы хотите принять участие в развитии семантической разметки, в частности словаря Schema.org, у вас такая возможность есть 😉

Пример разметки Schema.org для типа Person:

В такой разметке поисковая система распознает, что человек по имени Юрий Гагарин является летчиком-космонавтом и является коллегой Валентины Терешковой. Также указано много других данных: его награда, национальность, дата смерти, знакомства и другие — некоторые из этих свойств можно указать только с помощью словаря Schema.org. Здесь есть две ссылки, размеченные с помощью свойств «sameAs» и «url», где в первом случае указывается страница с достоверной информацией о человеке, а во втором — ссылка на личный сайт.

Хочется еще раз отметить, что Schema.org — это инициатива поисковиков. И развитие словаря будет зависеть от создания продуктов поисковыми системами для сайтов. Поэтому не стоит воспринимать этот словарь как попытку привести к единой онтологии все существующее на свете. Все существующее в интернете — возможно. Но если это будет нужно поисковым системам.

А в создании большого количества продуктов для сайтов на основе Schema.org, в том числе для русскоязычных, поисковые системы безусловно заинтересованы.

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

Microformats.org

Microformats.org (Микроформаты) — это открытый стандарт, созданный в 2007 году сообществом энтузиастов. Это сообщество очень хотело создать стандарт для семантической разметки сайтов, используя ранее существующие технологии. Шесть лет назад это было определенным плюсом стандарта, так как его было проще внедрять, но сейчас добавлять разметку микроформатов не проще, а в некоторых случаях и сложнее других словарей. По сравнению с OG и Schema.org, его используют все меньше и меньше.

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

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

В настоящее время поисковыми системами поддерживаются такие микроформаты:

Один из самых популярных микроформатов — hCard. Микроформат hCard универсален для описания людей и организаций, содержит базовую информацию и о том и о другом.

Используя hcard можно указать такие свойства, как:

Здесь поисковой системе понятно, что речь идет об организации либо о человеке по имени Юрий Гагарин — это летчик-космонавт, работавший в Военно-воздушных силах СССР. Также известна его дата рождения и есть заметка «Первый человек в космосе». Свойство url здесь указывает на домашнюю страницу описываемого объекта.

В 2013 была объявлена новая инициатива — microformats 2, в которой есть нововведения в названиях классов и упрощения для использования свойств.

Раньше микроформаты были довольно распространены, но сегодня, особенно на фоне других быстрорастущих словарей, они выглядят бессмысленными и беспощадными устаревшими. К тому же использование микроформатов ограничивает их формат — это объединенный стандарт синтаксиса и словаря, в котором нельзя использовать другие словари. (О том, что из себя представляет синтаксис будет следующая статья).

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

Другие словари

Словарь FOAF (акроним от Friend of a Friend — «друг друга») специализируется на связях между людьми, их взаимодействиях и объединениях.

В нем присутствуют такие классы, как Agent, Organization, Group, Person. У них могут быть различные свойства, описывающие людей или группы в жизни. Есть обычные — age, gender, surname, birthday, а также есть свойства:

В поиске по блогам от Яндекса используется этот словарь. В него было добавлено свое расширение, помогающее точно описать блоги пользователей (в Рунете в основном используется именно это расширение).

Data Vocabulary

Словарь Data Vocabulary разрабатывался компанией Google. На данный момент он уже не развивается, так как вся разработка плавно перетекла в Schema.org

Ранее поддерживались такие типы, как Person, Organization, Breadcrumb, Review, Product, Address — можно сказать, что они стали прототипами классов Schema.org.

Dublin Core

Словарь Dublin Core (или Дублинское ядро) используется в электронных библиотеках и документах. Дублинского ядро появилось по инициативе группы специалистов библиотечного и музейного дела.

Dublin Core появился в 1995 году с базовым набором из 15 элементов, таких как Title, Creator, Subject, Description, Publisher, Rights и др. Сейчас уже множество различных классов и свойств.

Пример разметки Dublin Core

Good Relations

Словарь Good Relations используется с 2008 года как стандарт для описания продуктов электронной торговли. Создатели рассчитывали, что использование такой разметки будет давать структурированное представление товаров и услуг в поисковых системах.

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

В Рунете этот словарь практически не используется, но встречается на некоторых крупных зарубежных сайтах (Volkswagen UK, Strobelight-Shop, lux-case.se). Из поисковиков разметку GR распознает Google.

Пример разметки с использованием Good Relations:

Расширения Яндекса для словарей

Для получения всех необходимых данных от сайтов в Яндексе разрабатываются свои расширения для некоторых словарей.

Например, это понадобилось для разметки:

Источник

Что такое микроразметка и в чем ее польза для SEO? Способы структурировать код страниц

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

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

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

Для чего используют микроразметку

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

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

Если на странице указано, к какому типу контента она относится — например инструкция, новости, рецепт — Google Assistant сможет находить такую страницу в ответ на запросы типа «показать новости», «ответить на вопрос», «подборка рецептов» и тому подобное.

Результаты поиска (сниппеты) с дополненными элементами называют расширенными сниппетами (Rich Snippets). Они выглядят заметнее на фоне других сайтов и, как следствие, получают больше кликов. Настройка расширенных сниппетов — один из способов увеличить CTR страниц.

Результаты исследования показали, что добавление микроразметки на страницу увеличило кликабельность сниппета на 51 %.

Кроме расширенных сниппетов, правильно настроенная микроразметка помогает сайту попасть в «Граф знаний» (Knowledge Graph), а также передавать дополнительную информацию об изображениях и видеороликах.

Микроразметка влияет на то, какая информация подтягивается в пост, когда вы делитесь URL-ом страницы в соцсетях. Чтобы при добавлении в пост URL-адреса подтягивался заголовок страницы с изображением, используется микроразметка типа Open Graph.

Как выглядят страницы с микроразметкой в поисковой выдаче

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

А еще наличие специальной микроразметки повышает шансы сайта попасть в такие вкладки поисковой выдачи, как «Новости», «Картинки», «Видео». С них и начнем, так как разметка типа изображение, видео или статья актуальна и для Google, и для Яндекса. Для каждого примера актуален свой тип микроразметки — в карусели вы сможете посмотреть, как выглядит код страницы.

Статья

Сниппет для статьи кроме заголовка может включать изображение, дату публикации или последнего обновления. У статей есть разновидности, например, новостная публикация (NewsArticle) или пост в блоге (BlogPosting). На скринах ниже — пример сниппета новости в выдаче Google и Яндекса, а также код страницы.

Тип данных и наборы свойств: Для новостных публикаций используется тип данных NewsArticle. С помощью микроразметки можно указать название статьи (headline), изображение-обложку (image), дату публикации (datePublished), дату обновления материала (dateModified), издателя (publisher). Эти же данные можно указать и для статьи в блоге, но при этом в качестве типа разметки прописать BlogPosting.

Что дает разметка типа NewsArticle: более объемный и дополненный иллюстрацией сниппет, информирование пользователя об актуальности контента в результатах выдачи.

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

Расширенные данные о фото

С помощью микроразметки можно передать поисковикам дополнительную информацию об изображениях — такой визуальный контент имеет больше шансов ранжироваться по запросам в специальном разделе «Картинки» в выдаче.

Кроме ссылки на изображение страницы, можно указать ее название, подпись и другие параметры. Пример ниже — из выдачи Google. Благодаря микроразметке рядом с фотографией товара отображается его цена, наличие, бренд.

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

Тип данных и наборы свойств: Чтобы передать поисковикам дополнительную информацию об изображении, используют тип данных ImageObject. С его помощью можно указать автора изображения (author), дату его создания (dateCreated), задать миниатюру (thumbnail), добавить ссылку на изображение. Чтобы рядом с картинкой отображалась информация о товаре, который на ней изображен (как на картинке-примере), нужно использовать разметку типа «Товар». Мы ее подробно рассмотрели ниже.

Что дает разметка изображений: Благодаря микроразметке в разделе «Картинки» поисковой выдаче отображаются дополнительные данные об изображении или товаре.

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

Расширенные данные о видео

Аналогичным образом микроразметка позволяет предоставлять поисковикам дополнительные данные о видеороликах, которые будут отображаться в разделе «Видео». В выдаче Google, кроме ссылки на видео, в таком сниппете обычно отображается его описание — оно отличается от описания страницы в метатеге description. Также в сниппете присутствуют картинка-превью и дата публикации видео.

В Яндексе, как правило, во вкладке «Видео» отображается стандартное описание страницы, даже если у сайта настроена микроразметка. Максимум — поисковик может отобразить дату загрузки видео на сайт. И все же Яндекс рекомендует использовать разметку для видеороликов и плеера, чтобы сайт отображался среди видеорезультатов поиска.

Тип данных и наборы свойств: Для видеороликов используется тип данных VideoObject, который позволяет указать название видео (name) и его описание (description), дату публикации ролика (datePublished), путь к файлу со значком видео (thumbnailUrl).

В качестве дополнительной информации указывают: продолжительность (duration), жанр (genre) и возрастной рейтинг (contentRating) видео; режиссера (director), актеров (actor); дату, после которой доступ к видео закрыт (expires); количество просмотров (interactionStatistic); регионы, где можно смотреть ролик (regionsAllowed) и другие параметры.

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

Кому стоит использовать: сайтам, для которых видеоконтент является основным — онлайн-кинотеатрам, образовательным платформам, предлагающим видеоуроки, сайтам с видеоинструкциями. Стоит учитывать, что по многим запросам большинство роликов во вкладке «Видео» подтягиваются из YouTube.

Расширенные сниппеты и другие спецэлементы выдачи

Переходим к расширенным сниппетам. Настроить микроразметку и выделиться таким образом среди конкурирующих сайтов можно в Google. С Яндексом вам придется заводить кабинет в Яндекс.Маркет, регистрироваться в Яндекс.Бизнес, участвовать в партнерской программе Яндекс.Новостей и т. д. По ссылке можно подробнее почитать об обогащенных ответах в выдаче Яндекса и о том, как их получить.

Единственный тип микроразметки, который будет полезен как для продвижения в Google, так и в Яндексе — это «Рецепт».

Рецепт

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

Тип данных и наборы свойств: Для рецептов используется тип данных Recipe с двумя обязательными свойствами — name и image. Дополнительно можно указать время приготовления (cookTime); имя или компанию, создавшую рецепт (author); категорию блюда (recipeCategory); принадлежность к определенной кухне мира (recipeCuisine) и так далее.

Что дает разметка типа Recipe: создание сниппета с дополнительными данными о блюде и процессе его приготовления, структурирование пошаговых рецептов, создание карусели из рецептов сайта.

Кому стоит использовать: кулинарные сайты.

Товар

Такие расширенные сниппеты можно увидеть при поиске в Google продукции определенного вида (например, «беспроводные наушники») или товара с указанием модели, бренда и других деталей (например, «наушники apple airpods»). При переходе на страницу пользователь попадает на карточку товара или в категорию сайта.

Тип данных и наборы свойств: Для карточек товара используется тип данных Product, который должен содержать название (name) и одно из свойств: отзывы (review), рейтинг (aggregateRating) или описание предложения (offers).

Дополнительные свойства, которые добавляют при необходимости: изображение (image), производитель (brand или organization), уникальный номер товара (sku) и другие.

Что дает разметка типа Product: попадание в сниппет таких структурных элементов, как цена или диапазон стоимости товара, наличие, рейтинг, условия доставки и так далее.

Кому стоит использовать: онлайн-магазины и маркетплейсы.

Книга

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

Тип данных и наборы свойств: Для книг используется тип разметки Book, который включает название книги (name), автора (author), издание (bookEdition), формат (bookFormat), количество страниц (numberOfPages), рейтинг книги (aggregateRating), ее стоимость (price).

Что дает разметка типа Book: делает сниппет более заметным и сразу же предоставляет пользователю всю основную информацию.

Кому стоит использовать: крупным магазинам книг.

Фильм

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

Тип данных и наборы свойств: Тип данных Movie обязательно включает название фильма (name) и обложку (image). Дополнительной информацией может быть: режиссер (director), дата выпуска фильма (dateCreated), общий рейтинг (AggregateRating), отзывы (review).

Что дает разметка типа Movie: пользователи прямо в выдаче видят дополнительную информацию о фильме и могут принимать решение смотреть фильм или нет с учетом рейтинга.

Кому стоит использовать: информационным сайтам о кино и онлайн-кинотеатрам.

Курсы

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

Что дает разметка типа Course: помогает привлечь больше учеников из поиска на курс или программу.

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

Вакансия

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

Тип данных и наборы свойств: Для страниц с вакансиями используется тип разметки JobPosting. Для каждой вакансии можно указать дату ее публикации (datePosted), название должности (title), имя компании (hiringOrganization), рабочий график (workHours), предполагаемую зарплату (estimatedSalary), тип трудоустройства (employmentType), требования к образованию (educationRequirements) и опыту кандидатов (experienceRequirements).

Что дает разметка типа JobPosting: помогает попасть в специальный блог поисковой выдачи, улучшить видимость объявлений и привлечь больше кандидатов. Структурированные страницы с вакансией ведет к более релевантным результатам поиска.

Кому стоит использовать: сайтам по поиску работы и компаниям, которые ищут сотрудников.

Инструкции

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

Такой результата доступен при поиске на мобильном.

Тип данных и наборы свойств: Для разметки инструкций используют тип данных HowТo, указывая шаги (step), необходимые инструменты (tool), материалы (supply), время выполнения инструкции (totalTime) и другие параметры.

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

Кому стоит использовать: сайтам, которые предоставляют пошаговые руководства. Также разметку можно применять к статьям в формате how-to, включающим последовательность действий и иллюстрации.

Частые вопросы и ответы

Под описанием сниппета может размещаться блок с вопросами. При нажатии на один из вопросов, будет отображаться ответ на него. Такие сниппеты, как правило, ведут на страницу FАQ (частых вопросов) или ее аналог.

Тип данных и наборы свойств: Чтобы под сниппетом появился блок с вопросами, используют тип данных FAQPage с обязательным набором элементов типа Question. В свою очередь Question содержит обязательные свойства — полный текст вопроса (name) и ответ на него (acceptedAnswer).

Тип Answer может включать списки, подзаголовки, ссылки на другие страницы.

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

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

Окно поиска по сайту

Это строка ввода запроса, аналогичная поисковой системе, но которая применяется только к конкретному сайту. Такой сниппет часто отображается по брендовым запросам, например, «сайт booking», «hotline сравнить цены».

Тип данных и наборы свойств: Чтобы под сниппетом появилась строка поиска, используют тип данных Website вместе с разметкой SearchAction. В разметке указывают свойство potential action (потенциальное действие), для которого задают тип «поиск» (SearchAction), добавляют ссылку на функционал поиска на сайте (target) и задают тип ввода данных (query-input).

Что дает микроразметка типа SearchAction: возможность искать информацию внутри сайта прямо из результатов выдачи.

Кому стоит использовать: крупным сайтам, у которых много разделов и страниц.

Анонс мероприятий

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

Тип данных и наборы свойств: Для мероприятий используется разметка типа Event, которая включает название (name), дату мероприятия (startDate) и место его проведения (location). Среди рекомендуемых свойств: описание (description), название компании или имя организатора (organizer), участники (performer), страница покупки билетов (offers.url), дата окончания (endDate) и т. д.

Что дает разметка типа Event: позволяет создать привлекательный сниппет с фотографиями и логотипом, получить отметку в «Картах» поисковиков, сообщить о мероприятии большему количеству пользователей и привлечь новых участников. Также с помощью разметки Event анонсируют онлайн-события.

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

Словарь Schema.org и форматы микроразметки

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

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

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

Использование структурированных данных для Google → Центр Google Поиска.

Информация о семантической разметке страниц для Яндекса → Яндекс Справка.

Существует три способа добавить нужные свойства schema.org на страницу сайта: Microdata, RDFa, JSON-LD.

В первых двух случаях страницу структурируют, добавляя пометки в каждый тег с видимым для пользователей контентом. При использовании JSON-LD разметку встраивают отдельно от текста с помощью скрипта (элемента JavaScript).

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

Микроданные (microdata)

Использование микроданных в HTML-документе позволяет добавить к фрагментам страницы семантические пометки. Их можно указать в заголовке ( ) или теле страницы ( ) с помощью тегов

В чем отличия HTML microdata?

Этот вариант подходит для формирования результатов поиска как в Google, так и в Яндексе. При настройке микроданных в качестве словаря обычно используют словарь Schema.org. Синтаксис microdata описан в спецификации W3C.

Пример. Фрагмент разметки для страницы товара с использованием метаданных.

RDFa

RDFa — это расширение HTML5, которое расшифровывается как Resource Description Framework in attributes.

RDFa встраивают в или HTML-документа.

В чем отличия разметки RDFa?

Этот формат чаще применяют в связке со словарем Open Graph, чтобы выполнять разметку для соцсетей — такой тип разметки мы рассмотрим чуть позже.

Видимое содержимое страницы в RDFa можно описать, используя следующие атрибуты к тегам: vocab, typeof, property, resource, prefix. Особенности каждого из них описаны в рекомендациях.

Пример. Фрагмент разметки RDFa для страницы товара.

JSON-LD

JSON-LD расшифровывается как JavaScript Object Notation (JSON) и Linked Data (LD). В этом случае данные о разметке указывают не в тегах, отвечающих за видимый пользователю контент, а в скрипте (.

В чем отличия разметки JSON-LD?

Этот тип разметки подходит только для Google, поскольку Яндекс не отображает такой вид разметки в результатах поиска.

В то же время Google рекомендует использовать именно тип разметки JSON-LD, поскольку код, размещенный отдельно от текста, иногда проще структурировать — например, для типов данных PostalAddress и Event. Такая микроразметка меньше по объему и ее легче внедрить в HTML-документ. Также поисковая система может считывать вложенные элементы, которые реализованы динамически — через код JavaScript или виджет на сайте.

Пример: скрипт разметки для страницы товара.

Словарь микроданных Open Graph

Open Graph (OGP) — словарь микроданных, разработанный Facebook, который формирует превью страницы в публикации. Основные теги словаря сегодня используются и для других социальных сетей — Twitter, Pinterest, Вконтакте.

Микроразметка Open Graph позволяет при создании поста «подтягивать» заголовок и изображения страницы, которой пользователь хочет поделиться. В результате публикации в соцсетях выглядят информативнее и привлекательнее.

Полный список свойств словаря Open Graph вы найдете по ссылке. Как я уже упоминала ранее, такой тип разметки часто реализуется в паре с форматом микроразметки RDFa, но также и с другими форматами микроразметки на базе словаря Schema.

Как внедрить микроразметку на сайт

Чтобы страница попала в расширенные результаты поиска, нужно выполнить несколько основных действий.

1. Создать страницу с микроразметкой.

2. Проверить код с помощью инструмента-валидатора.

3. Опубликовать страницу в админпанели сайта — то есть сделать ее доступной для индексации роботом.

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

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

Последствия ошибок в микроразметке

Среди отчетов Search Console от Google есть «Меры, принятые вручную». Когда структурированные данные на станицах не соответствуют правилам поисковой системы, к сайту могут быть применены санкции.

Примеры проблем, которые попадают в отчет: «На странице с вакансиями обнаружено резюме», «Структурированные данные в скрытом контенте», «Контент на странице не соответствует структурированным данным». Полный список ошибок перечислен в руководстве пользователя.

Если в отчет попали такие уведомление, необходимо устранить проблему в соответствии со всеми рекомендациями и нажать «Запросить проверку».

Способы создания микроразметки страницы

Рассмотрим несколько популярных подходов, позволяющих структурировать HTML-код.

Мастер разметки структурированных данных

Это инструмент от Google, в котором можно присваивать пометки выделенным элементам на странице. Таким образом, Googlebot более точно распознает ее содержимое.

Чтобы воспользоваться инструментом, нужно выбрать тип данных для разметки («Статьи», «Продукты», «Фильмы», «Мероприятия» и прочее), указать URL страницы или HTML-код. Затем необходимо выделить фрагменты страницы, присвоить им значения и выбрать «Создать HTML». Подробнее о том, как пользоваться мастером разметки Google здесь.

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

Плагины для CMS

Разработчики CMS предоставляют для систем управления сайтом специальные программы, структурирующие код. Например, модули All In One Schema Rich Snippets, Markup (JSON-LD) structured in schema.org — для WordPress, расширения Microdata и Schema.org — для Drupal, Google Structured Data — для Joomla, модуль SEO Микроразметка — для Opencart и другие.

Онлайн-генераторы микроразметки

В качестве альтернативного способа для структурирования кода можно использовать специальные сервисы, например, Schema Markup Generator, Генератор разметки Schema (JSON-LD) и другие.

Как проверить микроразметку страницы

Рассмотрим сервисы, которые анализируют валидность структурированного кода.

Проверка расширенных результатов от Google

Это онлайн-сервис с открытым доступом. Если страница опубликована, можно ее проверить по URL. Когда нужно протестировать код на этапе настройки микроразметки, используют команду «Проверить код».

Если микроразметка выполнена корректно, на экране появится уведомление «Страница подходит для показа расширенных результатов». Там же можно увидеть найденные системой элементы и примеры, как они отображаются на экране устройства.

Также в Google Search Console можно отслеживать информацию о расширенных результатах поиска после настройки — правильно ли структурированы данные на странице и есть ли по ним показы. Чтобы получить доступ к статистике и инструментам Search Console, необходимо подтвердить права на сайт одним из предложенных способов.

Если указать адрес страницы в разделе «Проверка URL», в отчете «Улучшения» появятся типы расширенных результатов, которые поддерживает поисковая система, например: «Строки навигации», «Страница вопроса с ответами», «Мероприятия», «Товары», «Рецепты», «Отзывы», «Вакансии». Стоит учитывать, что некоторые структурные элементы, реализованные на странице, могут не попасть в отчет.

Валидатор микроразметки от Яндекса

Это инструмент, который показывает, могут ли роботы распознать элементы разметки страницы. Валидатор поддерживает такие форматы, как schema.org, microdata, RDFa и другие.

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

Другие инструменты проверки

Есть альтернативные варианты тестирования кода. Например, валидатор Schema.org или сервис валидации микроданных, где можно проверить метатеги категорий «Статья» (Article) и «Товар» (Product).

Как смотреть микроразметку других сайтов?

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

Чтобы увидеть HTML-код страницы, перейдите по сниппету на нее и нажмите Ctrl+U. Для быстрого поиска нужных тегов в коде можно использовать характерные для разметки фрагменты: schema, json или тип данных, если вы его знаете, например, Product.

Заключение

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

Чтобы настроить микроразметку на сайте, нужно:

Источник