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.
| Platform | Where it goes | Plan needed |
|---|---|---|
| Shopify | Online Store → Themes → Edit code → layout/theme.liquid | All plans can edit theme code. Checkout pages are restricted to Shopify Plus. |
| WooCommerce | The parent theme's Head.php, or a code-snippets plugin | No plan gate — WooCommerce is self-hosted, so you control the code. |
| BigCommerce | Storefront → Script Manager | Script Manager is available on all plans. |
| Adobe Commerce | Content → Design → Configuration → HTML Head / Head | Available on Adobe Commerce and Magento Open Source alike. |
| PrestaShop | The theme's templates/_partials/Head.tpl | Self-hosted, so no plan gate. |
| Ecwid | The host page, not Ecwid itself | Custom code on Instant Site requires a paid plan. |
| Squarespace Commerce | Settings → Developer Tools → Code Injection → Head | Code Injection requires a Business plan or higher. |
| OpenCart | catalog/view/theme/<theme>/template/common/Head.twig | Self-hosted, so no plan gate. |
| Shift4Shop | Settings → Design → Themes & Styles → Edit Template | Template editing is available on all paid plans. |
| WordPress | The active theme's Head.php, or a code-snippets plugin | Self-hosted WordPress has no gate. WordPress.com requires a Business plan for custom code. |
| Webflow | Project settings → Custom code → Head code | Custom code requires a paid Site plan; it is not available on the free staging domain alone. |
| Squarespace | Settings → Developer Tools → Code Injection → Head | Code Injection requires a Business plan or higher. Personal plans cannot add custom code. |
| Wix | Settings → Custom Code → Add Custom Code | Custom code requires a paid Premium plan and a connected domain. |
| Framer | Site settings → General → Custom Code → End of <Head> | Custom code requires a paid site plan. |
| Ghost | Settings → Code injection → Site Head | Available on Ghost(Pro) and self-hosted alike. |
| Weebly | Settings → SEO → Head Code | Custom code requires a paid plan. |
| Duda | Settings → Head HTML / Head HTML | Available on all paid Duda plans. |
| Carrd | An Embed element set to Code, placed at the end of the page | Embed elements require Carrd Pro. |
| Bubble | Settings → SEO / metatags → Script in the Head | Custom code requires a paid Bubble plan. |
| Softr | Settings → Custom code → Head | Custom code requires a paid plan. |
| Next.js | app/layout.tsx, using next/script | None — you control the code. |
| React | public/index.html, before the closing </Head> tag | None. |
| Vue | index.html, before the closing </Head> tag | None. |
| Nuxt | nuxt.config.ts, under app.head.script | None. |
| Astro | src/layouts/Layout.astro, before </Head> | None. |
| SvelteKit | src/app.html, before %sveltekit.Head% closes | None. |
| Gatsby | gatsby-ssr.js, via onRenderHead | None. |
| Hugo | layouts/partials/Head.html | None. |
| Jekyll | _layouts/default.html or _includes/Head.html | None. |
| plain HTML | Every page's closing </Head> tag | None. |
| HubSpot CMS | Settings → Website → Pages → Site Head HTML | Available on CMS Hub Starter and above. |
| Drupal | The theme's html.html.twig, or the Asset Injector module | Self-hosted, so no plan gate. |
| Joomla | The template's index.php | Self-hosted, so no plan gate. |
| Notion sites | A hosting layer such as Super or Potion, not Notion itself | Depends on the hosting layer; most require a paid plan for custom code. |
| Shopify Hydrogen | app/root.tsx, inside the document Head | None 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
term
What is answer engine optimization (AEO)?
Search increasingly returns synthesised answers rather than links. AEO is the unglamorous work of making sure the facts about your business — what it is, who it's for, what it costs — are stated plainly enough to be quoted correctly.
platform
How to add an AI chatbot to Shopify
You add an AI chatbot to Shopify by pasting a script tag into your theme's theme.liquid file, just before the closing body tag. It takes about two minutes, needs no app install, and survives theme updates as long as you don't switch themes entirely.
platform
How to add an AI chatbot to WordPress
The safest way to add an AI chatbot to WordPress is a code-snippets plugin or your theme's built-in footer-scripts field — not editing footer.php, which a theme update will overwrite. All three methods take under five minutes.
platform
How to add an AI chatbot to Webflow
In Webflow you add an AI chatbot under Site Settings → Custom Code → Footer Code, then publish. The step people miss is publishing — custom code does not appear on the live site until you do, and it never appears in the Designer preview.
platform
How to add an AI chatbot to Squarespace
Squarespace has a Code Injection panel built for exactly this. Paste your snippet into the Footer field under Settings → Advanced → Code Injection and it appears site-wide. You need a Business plan or higher — Personal plans cannot run custom code.
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.