Recipe Page
Definition
A recipe page is a small, highly structured document. It needs a title, a yield, prep and cook times, an ingredient list with quantities in one consistent unit system, numbered steps, and ideally a photograph of the finished thing. The reading situation is unusual and drives the layout: the cook has wet hands, the screen keeps timing out, and they are jumping between the list and step four. That is why the ingredients stay near the top and the method is numbered rather than written as a paragraph. Recipes also have a machine-readable form, schema markup of type Recipe, which is what allows a search engine to show a photograph, a rating and a cooking time in the result instead of a line of grey text.
Why It Matters
A recipe that is awkward to follow in a kitchen does not get made twice. Small things decide it: quantities given once and not restated differently in the method, a step that says until the onions are soft rather than for five minutes, and ingredients that are not three screens down behind a holiday anecdote. The search side follows from the structure — a page a search engine can parse is eligible for a rich result carrying the picture and the time, which is what most people tap. Weight matters too: one 4 MB photograph of the finished dish costs more to load than every word on the page.
How It Works
Describe the recipe in a JSON-LD script — recipeIngredient, recipeInstructions, cookTime, recipeYield and an image — and those fields become what a search engine can display. Use a real ordered list for the method, so the numbers are structure rather than typed characters, which also lets a screen reader announce step three of nine. Compress the photograph: a finished dish at 1200 pixels wide in WebP normally lands well under 200 KB, against several megabytes straight off a phone. Check what printing the page gives you, because plenty of people still print a recipe and take the paper to the counter. Keep it all on one page with no tabs or accordions, so a search within the page finds an ingredient, and if you publish many of them, a sitemap.xml listing each one helps a crawler find new recipes.
Real-World Example
A home baker publishes one recipe per page — sourdough-focaccia.99helpers.site among them — each a 30 KB HTML file with a 140 KB photograph and a block of Recipe markup. A visitor arriving from search sees the ingredient list without scrolling once. The analytics show most visits running long enough to be somebody actually cooking, and nearly all of them on a phone, which is why the type is set larger than a desktop-first page would use.
Common Mistakes
- ✕Burying the ingredients under several screens of preamble — the cook is standing in a shop or at a counter and will go elsewhere
- ✕Giving timings with no sense cue — ovens differ, and until it smells nutty is more useful than for eight minutes
- ✕Uploading the photograph at camera resolution — it becomes the heaviest thing on a page that is otherwise a few kilobytes of text
Related Terms
Schema Markup
Schema markup is structured data added to a page using the schema.org vocabulary, stating in machine-readable form what the page is about — a product, an event, a person, a recipe.
Rich Result
A rich result is a search listing displayed with extra features beyond the plain title, URL and description — star ratings, images, prices, breadcrumbs or a recipe card.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Digital Menu
A digital menu is a restaurant, cafe or bar menu published as a web page and usually reached by scanning a code on the table. It replaces reprinting every time something changes.
Photo Gallery
A photo gallery is a page that presents a set of images for looking at — a trip, a portfolio, an event — usually as a grid of thumbnails that open larger versions. It is public: anyone with the link, and often a search engine, can see it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →