BYTETOOLS

How to Add Recipe Schema (JSON-LD) to Your Food Blog

To add Recipe schema, generate a Recipe JSON-LD block with your dish's name, image, author, prep and cook times, ingredients and steps, then paste that script into the page's HTML — the ByteTools Recipe Schema Generator builds a valid block for you in seconds. Recipe structured data is what tells Google your page is a recipe, making it eligible for the photo-and-star cards that dominate food searches.

This tutorial walks through the whole process end to end, from filling in the fields to validating the output, and explains why each piece matters. Everything runs in your browser, so your draft recipe never leaves your device.

What Recipe schema actually does

Recipe schema is a small block of JSON-LD (JavaScript Object Notation for Linked Data) that describes your dish in a format search engines read directly. Instead of guessing that a page is a recipe from its text, Google reads structured fields: name, image, recipeIngredient, recipeInstructions, prepTime, cookTime and more. When those fields are present and valid, your page becomes eligible for recipe rich results — the visual cards with a thumbnail, star rating, total time and calorie count that stand out in Search and the recipe carousel.

The generator handles the fiddly parts automatically. Times are converted into ISO 8601 duration format, and totalTime is calculated by adding prep and cook together. Blank fields are omitted so the markup stays valid rather than shipping empty properties.

Step-by-step: generate your Recipe JSON-LD

  1. Enter the recipe name, image URL and author. Use the exact title as it appears on the page, a crawlable high-resolution image URL, and the author or brand who created the dish.
  2. Set prep time and cook time in minutes. Type plain numbers — 15 and 40, for example. The tool converts them to PT15M and PT40M and computes totalTime as PT55M for you.
  3. List each ingredient on its own line. Every line becomes one recipeIngredient entry, so keep quantities and items together, like "200g plain flour".
  4. Write each instruction step on its own line. Each becomes an ordered HowToStep, which lets Google show step-by-step guidance rather than one wall of text.
  5. Add calories and a rating if you have them, then copy the JSON-LD. Nutrition and a genuine aggregateRating are optional but strengthen the result.

Where to place the markup and how to validate it

Copy the generated <script type="application/ld+json"> block and paste it into the HTML of the specific recipe page — inside the <head> or anywhere in the body both work. Add one Recipe block per recipe page. After it is live, run the URL through Google's Rich Results Test and Schema Markup Validator to confirm there are no errors or warnings before Google recrawls.

FieldExample inputGenerated output
prepTime20PT20M
cookTime90PT1H30M
totalTimeautoPT1H50M
calories320"320 calories"

Why in-browser generation matters

Because the tool is fully client-side, your recipe drafts, unpublished dishes and private notes are processed locally and never uploaded. That makes it safe for cookbook manuscripts or client work under embargo, and it means the tool keeps working offline as an installed PWA.

Try the Recipe Schema Generator — free and 100% in your browser.

FAQ

Do I need to know how to code to add Recipe schema?

No. You fill in plain fields, copy the finished JSON-LD block, and paste it into your page or your CMS's custom-HTML area. Many site builders and blog platforms have a header or footer code section for exactly this.

Can I add Recipe schema to an existing published recipe?

Yes. Adding the markup to a page that already ranks is one of the fastest wins available, since the content is proven and you are only making it eligible for a richer display.

How long until the rich result appears?

It depends on how often Google recrawls the page. Once the markup validates cleanly, request indexing in Search Console to speed things up, then monitor the Enhancements report for the Recipe status.

What happens if I leave optional fields blank?

The generator omits empty fields entirely, so you never ship an invalid property. Add nutrition and ratings later when you have real data.

Related free tools

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio that builds web apps, SaaS platforms and custom software. If your food brand or content business needs a bespoke site, a custom CMS or a full web application, explore what ByteVancer can build for you.