Fix Guide

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

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

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

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 signupResults in 30s