Как отправить информацию о рецептах с помощью разметки Schema.org

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

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

Чтобы корректно разметить элементы сайта нужно воспользоваться словарем 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/recept/vareniki-s-tvorogom

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

<div class="recipe-full clearfix" itemscope itemtype="http://schema.org/Recipe" style="z-index: 2; position: relative;">

	<div class="title-line container">

	<div class="line-through">

	<div class="recept-dedails-grey"></div>

	</div>


	<!--Обязательное поле----->

	<h1 class="pull-left fn" itemprop="name" id="id-824"> Вареники с творогом </h1>

	<time class="value-title duration" itemprop="totalTime" datetime="PT60M"></time>

	<input class="quantity-field yield" maxlength="3" itemprop="recipeYield" content="10" value="10" id="quantity">

	<!--/Обязательное поле----->

	<div itemprop="ingredients" >

	<div class="name pull-left">

	<span>Мука пшеничная высшего сорта</span>

	</div>

	</div>

	<div itemprop="ingredients" >

	<div class="name pull-left">Вода

	</div>

	</div>

	<div itemprop="ingredients" >

	<div class="name pull-left">Соль

	</div>

	</div>

	<div itemprop="ingredients" >

	<div class="name pull-left">

	<span>Творог</span>

	</div>

	</div>

	<div itemprop="ingredients" >

	<div class="name pull-left">Сахар

	</div>

	</div>

	<div itemprop="ingredients" >

	<div class="name pull-left">

	<span>Яйцо куриное</span>

	</div>

	<img src="http://tvoirecepty.ru/files/imagecache/recept_page_photo_two_col/recept/recept-vareniki-s-tvorogom.jpg" alt="" title="&quot;Вареники с творогом&quot; - cамый вкусный рецепт :)" width="383" height="200" class="imagecache full-width img-responsive imagecache-336x269 hidden-xs " itemprop="image"/>

	

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

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

Google:

Yandex:

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

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

Google:

Yandex:

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

Заключение

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