Mark up a recipe page with schema.org microdata for rich results

Our recipe pages show up in search as a plain blue link while competitors get a photo, a star rating and a cook time.

Intermediate to advancedRead 5 minDoing: a couple of hours8 steps

▶ Start

What you'll have at the end

A recipe page marked up with schema.org microdata that passes Google's Rich Results Test

Before you start

You need

A live recipe page written in plain HTML, whose dish name, one photo, ingredient list and numbered instructions are already visible to a reader.

Not covered

JSON-LD, the format search engines recommend by default, and a summary page listing several recipes together for a carousel result.

Leans on

HTML Cheat Sheetcarries the exact itemscope, itemtype and itemprop syntax this recipe builds every step out of.
Search Engine Optimization (SEO) Cheat Sheetcovers the schema types beyond Recipe and the tool that validates whatever you mark up.

8 steps

Where to go next

Your page has no Open Graph tags, so shared links show a bare URL

if the goal is a clean preview card when the link is pasted into a chat app rather than a richer search result, that recipe covers Open Graph tags instead.

Checked 25 Aug 2026

Part of the HTML5 cookbook