# Breadcrumbs

Breadcrumbs are the trail of links that shows where a page sits in your site. They help visitors move up, help crawlers discover sections, and can show in search results. This page covers what to add, how to mark it up, how to check it, and the traps to avoid.

Updated 2026-09-14 · Source: https://porteur.ai/glossary/breadcrumbs-navigation

## What they do for a small site

Breadcrumbs give visitors a quick way back to a parent page. On a page like /guides/search-console/inspections, a trail like Home, Guides, Search Console, Inspections reduces pogoing to the main nav.

They add internal links up your hierarchy. That helps crawlers reach categories and hubs you care about, like /guides or /pricing.

With BreadcrumbList structured data, Google can replace the URL line under a result with the trail. That makes the path clearer on the results page and can lift confidence to click.

## How to add breadcrumbs: HTML and structured data

Place the trail near the top of the main content. Use an ordered list so the sequence is clear. Give the nav an aria-label so assistive tech announces it as breadcrumbs.

```html
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/guides/">Guides</a></li>
    <li><a href="/guides/search-console/">Search Console</a></li>
    <li aria-current="page">Inspections</li>
  </ol>
</nav>
```

Add BreadcrumbList structured data. You can use JSON-LD without changing your HTML. The names should match what you display and the last item is the current page.

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1,
     "name": "Home", "item": "https://yourproduct.com/"},
    {"@type": "ListItem", "position": 2,
     "name": "Guides", "item": "https://yourproduct.com/guides/"},
    {"@type": "ListItem", "position": 3,
     "name": "Search Console", "item": "https://yourproduct.com/guides/search-console/"},
    {"@type": "ListItem", "position": 4,
     "name": "Inspections"}
  ]
}
</script>
```

Base the trail on your site structure, not only the URL. If a blog post lives under /library/ but belongs in Guides, show it under Guides in the trail so users land in the right hub.

> One trail per page. Keep the current page last, unlinked.

## How to check your breadcrumbs

Validate the structured data. Use Google’s Rich Results Test on a sample of pages. Fix missing positions, wrong item URLs or mismatched names before rolling out.

Spot check the live HTML. Load a few deep pages and use a screen reader or browser accessibility tree to confirm the nav has aria-label Breadcrumb and the list order is correct.

Search for a page title in Google. Look at your result. When BreadcrumbList is picked up, the green or grey URL line becomes the trail, like Home › Guides › Search Console.

## What to do on common page types

- Home: no breadcrumb needed, or show Home only and mark it current.
- Category or hub pages like /guides/: show Home, then the section, current unlinked.
- Articles and docs: include Home, section, and the subcategory if you have one.
- Product pages: show Home, Category, Product. For variants, keep the same trail.
- Search or filter pages: avoid breadcrumbs if the path is not a stable hierarchy.

A fixed page looks like this after changes: on /pricing for a SaaS, show Home, Pricing, with Pricing unlinked, and validate the two-item BreadcrumbList.

## Traps to avoid

- Copying your header nav instead of the real hierarchy.
- Linking the current page in the trail, which confuses assistive tech.
- Letting CMS tags create multiple, conflicting paths for one page.
- Using spans for everything, not an ordered list, so the order is unclear.
- Stuffing keywords into crumb names that do not match the page titles.
- Breaking canonicals and trails: if a page is canonical, its breadcrumb should reflect that canonical location.

## Questions

### What is a breadcrumb in a website?

It is the trail of links that shows where a page sits in your site, such as Home, Guides, Search Console, this page. It helps users move up and gives crawlers internal links to parents.

### What is an example of a breadcrumb?

On /docs/getting-started, you might show Home, Docs, Getting started. The last item is the current page and should not be a link.

### What are URL breadcrumbs?

Some themes show a path that mirrors folders in the URL. That can be fine, but the better rule is to mirror your actual site structure, which is not always the same as the URL.

### Do breadcrumbs help SEO?

They add clear internal links and can replace the URL line in search with a trail when marked up as BreadcrumbList. That can improve how your result reads and how crawlers move.

### Can Google Maps do breadcrumbs?

Maps uses a different interface. Breadcrumbs are a website pattern for page navigation and structured data for web search results, not map directions.

### Where should breadcrumbs go on the page?

Place them near the top of the main content area, before the h1 or just after, so users and assistive tech reach them early. Keep the pattern consistent across pages.

## Read next

- [Breadcrumbs: the navigation, the markup, and what Google shows](https://porteur.ai/guides/breadcrumbs): Add breadcrumb navigation that helps visitors, improves internal linking and gives Google a clean trail to show in results, with JSON-LD examples.
- [Structured data](https://porteur.ai/glossary/structured-data): Structured data is schema markup that names your page type. See why it changes results, how to add JSON-LD, and how to validate it.
- [Internal link](https://porteur.ai/glossary/internal-link): An internal link is a link between two pages on the same site. Use them to show which pages matter, pass context with anchor text, and lift rankings.
- [Internal linking for a small site: which pages link to which](https://porteur.ai/guides/internal-linking-for-seo): Decide which pages rank. Build hubs, write clear anchors, fix orphans, and crawl your site to map links you control.
- [Structured data checker](https://porteur.ai/tools/structured-data-checker): Read the JSON-LD on a page: every type, the rich result each can earn, the required and recommended fields it lacks, and a mended copy of each node.
- [JSON-LD: how to write it, where to put it, how to test it](https://porteur.ai/guides/json-ld): See why Google recommends JSON-LD, where to place it, how to use one @graph, how to test with Google and schema.org, and what to fix.

Paste a URL and get a free check that reads your site and the searches around it, then shows three breadcrumb findings in about thirty seconds. Free check: https://porteur.ai/