The hRecipe microformat

hRecipe is an (X)HTML markup standard for recipes, developed by an international initiative and read by Yandex. Semantic elements — ingredients, method, cooking time — are extracted from the page text.

The key property

The markup is invisible to visitors and does not affect how the page displays. It labels text that is already there: the dish name, the ingredient list, the numbered steps. A well-structured recipe page needs class attributes added and nothing rewritten.

What it produces

Recipe snippets in Yandex results — the enhanced block showing ingredients, time and an image. For a recipe site this is the difference between an ordinary blue link and a result that answers part of the question before the click.

The shape of an implementation

A root hrecipe element wraps the whole recipe; fn marks the dish name, usually the h1; each ingredient carries the ingredient class; the method carries instructions, with individual steps optionally labelled. Everything else — yield, duration, photos, author, nutrition — is optional and improves the snippet.

The condition that constrains page design

Yandex requires one recipe per page, and that recipe must be the main content of the page and fully visible to visitors. A round-up article containing ten recipes is not a candidate, and neither is a recipe hidden behind a tab or a “show more” control. Sites organised as collections have to split them into individual pages before any of this applies — which is a content architecture decision with consequences well beyond markup.

Yandex’s own extensions

Several useful properties are Yandex additions rather than parts of the standard — the finished-dish photo among them. Those are the ones a developer following a generic hRecipe guide will omit, and they are precisely the ones that improve the snippet here.