How to Add Breadcrumb Navigation and Schema

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

Medium Medium Impact 20 min

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

Add a breadcrumb nav

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

Add BreadcrumbList JSON-LD

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

Code Fix

html

Before (broken)

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

After (fixed)

<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>

Platform-Specific Instructions

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.

Check with our tool

Schema Markup Generator

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit