Як відправити інформацію про рецепти за допомогою розмітки Schema.org
(5,00 из 5 на основе 5 оценок(ки))
Loading...Семантична розмітка — це те що допоможе зробити сніппети вашого сайту більш помітними в пошукових системах. Також за допомогою розмітки можна переробити дані про сайт пошуковим системам і різних сервісів, які з ними працюють.
В попередній статті ми розглянули настройку розмітки для подій, інформація про які розміщена на сайті. У цій мова піде про передачу структурованої інформації про велику кількість рецептів.
Щоб коректно розмітити елементи сайту потрібно користуватися словником 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
На цьому прикладі коду ми використовуємо не всі додаткові поля, оскільки вони займають більшу частину коду і не є обов’язковими. Але якщо ви маєте у своєму розпорядженні достатньо інформації про рецепт, щоб заповнити додаткові поля, рекомендуємо скористатися ними.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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=""Вареники с творогом" - cамый вкусный рецепт :)" width="383" height="200" class="imagecache full-width img-responsive imagecache-336x269 hidden-xs " itemprop="image"/> |
Щоб перевірити коректність впровадження даної розмітки, скористаємося сервісами від Google та Yandex.
В результаті у нас повинен вийти ось такий звіт:
Google:
Yandex:
Примітка: валідатор Яндекса буде реагувати попередженням на відсутність обов’язкового поля в розмітці. Це не критично, оскільки в результаті розмітка буде коректно зображатися у видачі.
В результаті розмітка рецепта у видачі буде виглядати так:
Google:
Yandex:
Візуально у видачі Яндекса рецепт виглядає більш структуровано і привабливо, ніж в Google: тут ми можемо бачити інгредієнти страви, порції, час приготування, калорійність.
Висновок
В результаті впровадження розмітки рецептів на сторінках сайту істотно підвищиться CTR документів з розміткою в пошукових системах. Після того як всі рекомендації з розмітки будуть виконані, користувачі побачать у видачі інформативний сніппет, який буде залучати їх увагу.
Якщо ви хочете розмітити інформацію про організацію в Google або Yandex, зробити розмітку для інтернет-магазинів, прочитайте статті на нашому блозі. Якщо виникнуть запитання, пишіть в коментарях.
