Як відправити інформацію про рецепти за допомогою розмітки 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/. Розглянемо, як впроваджена розмітка на прикладі рецепта вареників із сиром.

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 документів з розміткою в пошукових системах. Після того як всі рекомендації з розмітки будуть виконані, користувачі побачать у видачі інформативний сніппет, який буде залучати їх увагу.

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