Skip to main content
SlapMyWeb

SEO fix

How to Add Breadcrumb Navigation and Schema

Add breadcrumbs (and BreadcrumbList schema) so users and Google understand your site hierarchy.

Difficulty
Medium
Impact
Medium
Time
20 min

Before

<!-- no breadcrumb nav or schema -->

After

<nav aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li><a href="/fixes">Fixes</a></li><li>This page</li></ol></nav>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://example.com/"}]}</script>
Before and after code for: How to Add Breadcrumb Navigation and Schema

Missing breadcrumbs means a page gives no visible trail back up the site hierarchy. Add a breadcrumb navigation showing the path from the home page to the current one, and mark it up with BreadcrumbList structured data. Google can then show the hierarchy in the search result instead of a bare URL, and visitors gain a way back up.

Why it matters

Breadcrumbs show users where they are and let them jump up a level. With BreadcrumbList structured data, Google can replace the plain URL in search results with a readable breadcrumb trail, improving clarity and click-through.

How to fix it

  1. Add a breadcrumb nav

    Render an accessible breadcrumb trail (<nav aria-label="Breadcrumb">) on hierarchical pages.
  2. Add BreadcrumbList JSON-LD

    Emit matching structured data so the trail is eligible for rich results.

The code

Beforehtml
<!-- no breadcrumb nav or schema -->
Afterhtml
<nav aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li><a href="/fixes">Fixes</a></li><li>This page</li></ol></nav>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://example.com/"}]}</script>

On your platform

WordPress

Yoast/Rank Math output breadcrumbs + schema: enable them and add the theme template tag where you want them shown.

Next.js

Render the nav + a JSON-LD script from the page component.

Sources

Check your site with our free tool

Schema Markup Generator

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress