A A A

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

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

Чтобы корректно разметить элементы сайта нужно воспользоваться словарем http://schema.org/Recipe . В словаре есть полная документация о работе с разметкой страниц с рецептами, с ней мы будем сверяться в дальнейшем.

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

Обязательные поля для разметки рецептов

Их всего два:

  • name — (Текст) название рецепта или блюда;
  • ingredients  — (Текст) ингредиент рецепта и его объем, количество (может быть несколько).

Рекомендуемые поля

  • recipeInstructions — (Текст) инструкция по приготовлению.
  • recipeCategory — (Текст) тип блюда: например, горячее блюдо, десерт.
  • recipeYield — (Текст) количество порций на выходе.
  • cookTime — (Duration) время приготовления. Указывается в формате ISO 8601. Например, PT30M (30 минут).
  • image — (URL) URL изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования улучшенного сниппета.
  • author — (Текст, Person/name, Organization/name) автор рецепта.
  • recipeCuisine — (Текст) национальная кухня, к которой относится блюдо. В рецепте может быть не более одного элемента класса cuisine—type.
  • nutrition — (NutritionInformation) энергетическая или пищевая ценность блюда, то есть содержание калорий, белков, жиров, углеводов, витаминов и т. д.
    • calories — (Energy) калорийность;
    • fatContent — (Mass) жиры;
    • saturatedFatContent — (Mass) насыщенные жиры;
    • unsaturatedFatContent — (Mass) ненасыщенные жиры;
    • carbohydrateContent — (Mass) углеводы;
    • sugarContent — (Mass) сахар;
    • fiberContent — (Mass) клетчатка;
    • proteinContent — (Mass) белки;
    • cholesterolContent — (Mass) холестерин;
    • servingSize — (Текст) порция, объем или вес для которого указывается информация о энергетической и пищевой ценности.

Реализация

Для наглядного примера воспользуемся информацией с сайта http://tvoirecepty.ru/ . Рассмотрим, как внедрена разметка на примере рецепта вареников с творогом.

http://tvoirecepty.ru/recept/vareniki-s-tvorogom

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

 

 

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

В итоге у нас должен получится вот такой отчет:

Google:

recipes-validator

 

Yandex:

recipes-validator-yandex

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

В результате разметка рецепта в выдаче будет выглядеть так:

Google:

recipes-card-google

Yandex:

recipes-card-yandex

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

Заключение

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

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.