Breadcrumb Schema Generator

What Google can show

Google can show the breadcrumb trail in place of the URL on desktop results.

Required and recommended properties

Google needs these for Breadcrumb markup to be valid:

A complete example

The example values in the generator above produce this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Shoes",
      "item": "https://www.example.com/shoes"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Trail Running Shoe"
    }
  ]
}
</script>

Where to paste the code

• WordPress: check what your SEO plugin (Yoast, Rank Math) already outputs, then add the block with a header-code plugin such as WPCode, or in your child theme's header.php before </head>. For one page only, use a Custom HTML block in that page.
• Shopify: for site-wide markup such as Organization, go to Online Store › Themes › Edit code and paste it in theme.liquid before </head>. For products, edit the product section (often main-product.liquid) and use Liquid variables such as {{ product.title | json }} so every product gets its own values. Most themes already output basic Product markup.
• Next.js: render it in the page component as <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data).replace(/</g, "\\u003c") }} />. Escaping < stops a value from closing the script tag early; this site does the same.
• Webflow: Page settings › Custom code › Inside <head> tag. For CMS collection pages, add it to the template's page settings and insert fields from the collection.

Test before you publish

Paste the code into Google's Rich Results Test, then test the live page once it's published. Make sure every value matches what people see on the page.