Микроформат hRecipe

hRecipe — это стандарт разметки (X)HTML для рецептов, разработанный международной инициативой и считываемый Яндексом. Семантические элементы — ингредиенты, способ приготовления, время готовки — извлекаются из текста страницы.

Ключевое свойство

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

Что это дает

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

Структура реализации

Корневой элемент hrecipe охватывает весь рецепт; fn обозначает название блюда, как правило, h1; каждый ингредиент имеет класс ingredient ; способ приготовления помечен как instructions, причем отдельные шаги могут быть размечены опционально. Все остальное — выход порций, продолжительность, фотографии, автор, пищевая ценность — является опциональным и улучшает сниппет.

Условие, ограничивающее дизайн страницы

Яндекс требует один рецепт на страницу, причем этот рецепт должен быть основным контентом страницы и полностью видимым для посетителей. Стартап-подборка из десяти рецептов не подходит, как и рецепт, скрытый за вкладкой или кнопкой «показать еще». Сайты, организованные в виде коллекций, должны разделить их на отдельные страницы, прежде чем все это заработает, что является решением в области архитектуры контента с последствиями далеко за пределами разметки.

Собственные расширения Яндекса

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