Микроразметка schema.org: реализация с примерами и способы проверки

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

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

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

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

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

Если же рассматривать значение внедрения микроразметки с коммерческой точки зрения для бизнеса, то она влияет на SEO-выдачу, улучшает внешний вид сайта в результатах поиска, дает красивые и структурированные сниппеты, что значительно увеличивает кликабельность. Она необходима для оптимизации сайтов, повышения CTR сайта.

Основной вид микроразметки — Schema.org. Он существует давно, является наиболее популярным и позволяет описать практически любой продукт или услугу. Это своеобразный генератор структурированных данных — вручную прописывать ничего не придется. Имеет в своем багаже очень много тегов, но основой являются три: itemscope - указывает поисковому роботу на то, что будет произведено описание объекта. Остальные два itemtype и itemprop — это его тип и свойства.

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

1. Open Graph. Микроразметка Facebook, которую используют для настройки качества отображения публикации в соцсетях, когда пользователь поделился статьей с вашего сайта (заголовок, описание, правильная картинка). Изначально разметка была создана для Facebook, но сегодня она поддерживается и другими социальными сетями и мессенджерами (ВКонтакте, Твиттер, Телеграм и др.).
2. Микроформаты. Разработка W3C, созданная в 2007 году. Часто используется для разметки товаров, выведения похожей группы товаров, отзывов, контактной информации и прочих видов контента. Раньше применялся такой микроформат более активно, но сейчас он имеет ряд недостатков, недостаточно быстро развивается и существенно уступает Schema.org.
3. Dublin Core. Этот словарь разметки используют библиотеки и музеи — он позволяет описывать книги и музейные экспонаты.
4. JSON-LD — формат вывода микроразметки через JS. Синтаксис JSON-LD и JSON идентичен. Разница заключается только в том, что в JSON-LD есть так называемые зарезервированные ключи, которые позволяют задать контекст описания или связать объекты. Например, ключ context нужен для указания на словарь объектов, а type — на тип сущности (к примеру, Person)/

Идеальное решение — когда на сайте используются все три вида. Присутствие Open Graph не только желательно, но и обязательно, поскольку данный тип отвечает за представление в соцсетях. Важность Schema.org переоценить невозможно, поскольку это разметка основного контента. “Джейсон” необходим, если необходимо отобразить какие-то мероприятия, события, концерты и т.д.

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

Сниппет — это своего рода визитка сайта, с URL, заголовком и краткой информацией о ранжируемой странице. Поисковый робот автоматически генерирует ее или берет из title и description.

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

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

В чем преимущества расширенного сниппета?

Расширенные сниппеты грузятся всегда сверху. По статистике, запрос, который задан в форме вопроса, генерирует наибольшее количество расширенных сниппетов. Если по пунктам, то они:

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

Добавление микроразметки на сайт

Посмотрим на наиболее востребованные на коммерческих и информационных страницах схемы: статьи, отзывы, товары, хлебные крошки.

Разметка хлебных крошек

1. itemtype=https://schema.org/BreadcrumbList (строки навигации) — говорит о том, что элемент относится к типу объекта «хлебным крошкам» и состоит из цепочки связанных веб-страниц.
2. itemscope — необходим только для того, чтобы показать поисковому роботу, что на странице описывается какой-либо объект.
3. itemtype — всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта.
4. itemprop="itemListElement" — означает, что элемент относится к отдельному пункту списка.
5. itemprop="name" — тег с названием хлебной крошки.
6. itemprop="item" — используется для разметки ссылки в документе.
7. meta itemprop="position" content="%number%" — добавляют в конце блока хлебной крошки, определяет позицию элемента в навигационной цепочке. Данный тег не отображается на веб-странице, только в разметке.

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

Вид разметки, который обязательно должен присутствовать на каждом сайте. В Schema.org доступен выбор типа организации. Можно остановиться или на LocalBusiness, или на Organization, который подходит для всех.

Рассмотрим вариант Organization:

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

Микроразметка для данных об организации

Микроразметка Organization отвечает за структурирование данных о компании в формате Microdata. С ее помощью можно указать поисковому роботу на контактную информацию, а также добавить её в сниппет главной страницы.

Микроразметка для интернет-магазина

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

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

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

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

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

Такой микроразметки для маркетинга нет, поэтому адаптируют и внедряют разметку для карточки товара путем ввода таких параметров:

• offerCount – количество товаров в разделе;
• lowPrice и highPrice - самая низкая и высокая цена в категории;
• availability — наличие товаров.

Подробнее про товарную микроразметку

https://developers.google.com/search/docs/advanced...

Микроразметка статей и новостей

Для такой разметки будут применяться следующие атрибуты:

• headline – название статьи;
• datePublished – когда опубликована;
• image – картинка;
• articleBody – непосредственно текст;
• author – автор статьи;
• publisher – имя ресурса, на котором публиковалась.

Ниже приведен пример микроразметки по shema.org

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

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

Поэтому первое, что нужно сделать — это сообщить роботу о типе разметки.

Затем следует использовать такие параметры:

• name — название;
• author — фамилия автора;
• datePublished — дата размещения;
• reviewBody — текст комментария;
• reviewRating – объективная оценка.itemprop="bestRating" - самая высокая оценка, которая возможна в системе.

Не стоит спамить этой разметкой, проставляя «левые» данные. С большой вероятностью, это приведет к тому, что поисковые системы станут её игнорировать полностью.

Микроразметка для изображений

Благодаря атрибуту itemprop="image" поисковый робот легко находит необходимую информацию. Нужно лишь указать адрес изображения, название, его размеры, сделать описание, а также поставить подпись.

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

Благодаря расширенному сниппету видео можно получать трафик не на сайт, а на Ютуб канал. Этот сниппет лишь за последний год по своей популярности вырос втрое. Видео сейчас можно увидеть по большей части поисковых запросов.

Такую микроразметку можно реализовать с помощью плагина Insert Video with Schema.org (IVS). В таком случае в расширенном сниппете будет показана заставка с названием ролика, его длительность, а также короткое описание.

Микроразметка страницы FAQ

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

Сначала, как всегда, стоит обозначить начало разметки. Затем следует написать тему вопроса:

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

Дополнительная информация с schema.org по этим видам разметок:

1. HowTo – инструкции типа «как сделать», пошаговые руководства к действию.
2. Q&A – страница с несколькими вопросами-ответами или ориентированная на один конкретный вопрос с несколькими вариантами ответов на него.

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

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

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

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

Пример структуры:

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

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

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

1. Тип данных и наборы свойств. Для мероприятий стандартно использование разметки типа Event, которая включает название (name), дату мероприятия (startDate) и место его проведения (location). Среди рекомендуемых свойств: описание (description), название компании или имя организатора (organizer), участники (performer), страница покупки билетов (offers.url), дата окончания (endDate) и проч.
2. Что дает разметка типа Event. Позволяет создать привлекательный сниппет с фотографиями и логотипом, получить отметку в «Картах» поисковиков, сообщить о мероприятии большему количеству человек и привлечь новых заинтересованных участников. Также с помощью разметки Event можно анонсировать и онлайн-события, например, разные курсы.
3. Кому стоит использовать. Сайтам, посвященным ежегодному фестивалю, конференции и другим событиям, а также ресурсам, которые регулярно анонсируют мероприятия на отдельных страницах.

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

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

Например, это модули All In One Schema Rich Snippets для WordPress и Google Structured Data — для Joomla.

Какие типы разметок использует Яндекс

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

1. Товары — Product.
2. Отзывы — Review.
3. Мероприятие — Event.
4. Организация — Organization.
5. Место — Place.
6. Товарное предложение — Offer.
7. Несколько товаров — AggregateOffer.
8. Сводный рейтинг — AggregateRating.
9. Рецепт — Recipe.
10. Книга — Book.
11. Фильм — Movie.
12. Ресторан — Restaurant.
13. Аудио — AudioObject.
14. Видео — VideoObject.
15. Картинки — ImageObject.
16. Программы — SoftwareApplication.
17. Мобильные приложения — MobileApplication.
18. Интернет-программы — WebApplication.
19. Игры — VideoGame.
20. Вопросы и ответы — Question и Answer.

Как проверить правильность микроразметки

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

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

Данный бесплатный сервис самый строгий из всех: он выявляет любое несоответствие.

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

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

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

https://search.google.com/test/rich-results?hl=ru

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

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

https://webmaster.yandex.ru/tools/microtest/

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

Словари Schema.org для различных нужд

Для магазина одежды

https://schema.org/ClothingStore

Для магазина автозапчастей

https://schema.org/AutoPartsStore

Книжный магазин

https://schema.org/BookStore

Мебельный магазин

https://schema.org/FurnitureStore<