How to add breadcrumb schema on any website platform

Describe where each page sits in your site's hierarchy in a form machines can read. The code is the same everywhere; where you paste it is not. This covers 35 platforms, 19 of which gate custom code behind a paid plan.

Why this matters

Breadcrumbs on the page help a visitor orient; BreadcrumbList markup helps a machine understand your information architecture. That second thing has practical consequences — it is how a search engine works out that a page is a leaf of a section rather than a standalone document, and it is what produces the path shown under a result instead of a raw URL.

What you paste

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Support", "item": "https://example.com/support" },
    { "@type": "ListItem", "position": 3, "name": "Returns", "item": "https://example.com/support/returns" }
  ]
}
</script>

Positions start at 1 and must be contiguous. The final item is the current page; including its URL is fine and generally preferred.

Where it goes, by platform

The code is identical everywhere. The screen you paste it into is not, and neither is whether your plan allows it — 19 of 35 platforms require a paid plan for custom code.

PlatformWhere it goesPlan needed
ShopifyOnline Store → Themes → Edit code → layout/theme.liquidAll plans can edit theme code. Checkout pages are restricted to Shopify Plus.
WooCommerceThe parent theme's Head.php, or a code-snippets pluginNo plan gate — WooCommerce is self-hosted, so you control the code.
BigCommerceStorefront → Script ManagerScript Manager is available on all plans.
Adobe CommerceContent → Design → Configuration → HTML Head / HeadAvailable on Adobe Commerce and Magento Open Source alike.
PrestaShopThe theme's templates/_partials/Head.tplSelf-hosted, so no plan gate.
EcwidThe host page, not Ecwid itselfCustom code on Instant Site requires a paid plan.
Squarespace CommerceSettings → Developer Tools → Code Injection → HeadCode Injection requires a Business plan or higher.
OpenCartcatalog/view/theme/<theme>/template/common/Head.twigSelf-hosted, so no plan gate.
Shift4ShopSettings → Design → Themes & Styles → Edit TemplateTemplate editing is available on all paid plans.
WordPressThe active theme's Head.php, or a code-snippets pluginSelf-hosted WordPress has no gate. WordPress.com requires a Business plan for custom code.
WebflowProject settings → Custom code → Head codeCustom code requires a paid Site plan; it is not available on the free staging domain alone.
SquarespaceSettings → Developer Tools → Code Injection → HeadCode Injection requires a Business plan or higher. Personal plans cannot add custom code.
WixSettings → Custom Code → Add Custom CodeCustom code requires a paid Premium plan and a connected domain.
FramerSite settings → General → Custom Code → End of <Head>Custom code requires a paid site plan.
GhostSettings → Code injection → Site HeadAvailable on Ghost(Pro) and self-hosted alike.
WeeblySettings → SEO → Head CodeCustom code requires a paid plan.
DudaSettings → Head HTML / Head HTMLAvailable on all paid Duda plans.
CarrdAn Embed element set to Code, placed at the end of the pageEmbed elements require Carrd Pro.
BubbleSettings → SEO / metatags → Script in the HeadCustom code requires a paid Bubble plan.
SoftrSettings → Custom code → HeadCustom code requires a paid plan.
Next.jsapp/layout.tsx, using next/scriptNone — you control the code.
Reactpublic/index.html, before the closing </Head> tagNone.
Vueindex.html, before the closing </Head> tagNone.
Nuxtnuxt.config.ts, under app.head.scriptNone.
Astrosrc/layouts/Layout.astro, before </Head>None.
SvelteKitsrc/app.html, before %sveltekit.Head% closesNone.
Gatsbygatsby-ssr.js, via onRenderHeadNone.
Hugolayouts/partials/Head.htmlNone.
Jekyll_layouts/default.html or _includes/Head.htmlNone.
plain HTMLEvery page's closing </Head> tagNone.
HubSpot CMSSettings → Website → Pages → Site Head HTMLAvailable on CMS Hub Starter and above.
DrupalThe theme's html.html.twig, or the Asset Injector moduleSelf-hosted, so no plan gate.
JoomlaThe template's index.phpSelf-hosted, so no plan gate.
Notion sitesA hosting layer such as Super or Potion, not Notion itselfDepends on the hosting layer; most require a paid plan for custom code.
Shopify Hydrogenapp/root.tsx, inside the document HeadNone beyond your Shopify plan.

How to check it worked

  • Confirm the markup's trail matches the breadcrumb a visitor actually sees on the page.

  • Validate with the Rich Results Test on a deep page rather than the homepage.

  • Check that every item URL resolves with a 200 rather than a redirect.

What goes wrong

  • Generating a trail that does not match the visible breadcrumb, or that does not match your URL structure.

  • Using the same markup on every page because it is easier — the trail must be per-page to mean anything.

  • Skipping levels, which makes the hierarchy look flatter than it is.

Questions

Do I need visible breadcrumbs too?
You should have them. Markup that describes navigation a visitor cannot see is exactly the mismatch guidelines warn about, and visible breadcrumbs are genuinely useful anyway.
What about pages with more than one parent?
Pick the canonical path and use it consistently. Multiple BreadcrumbList blocks are permitted but rarely worth the ambiguity they introduce.

Related

While you are in that field.

RubyRep installs through the same screen, in the same visit. Enter your site and we will read it and hand you the line to paste.

https://

Takes about a minute. No credit card.

All how-to guides