# Breadcrumbs: the navigation, the markup, and what Google shows

Breadcrumbs make large and small sites easier to use. They reduce backtracks, expose higher level pages and give Google a clean path to show in results. You will build the HTML, add the schema and test it, with one trail per page.

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

## What breadcrumbs do for visitors and crawlers

Breadcrumbs tell a visitor where they are and what sits above this page. They reduce pogoing with a one click way up a level. On a product page they cut the time to reach the category.

Breadcrumb links spread PageRank inside your site. They lift category and hub pages that need authority. They also surface relevant anchors such as “/guides” and “/pricing” across many pages.

Google reads breadcrumbs and often shows them instead of the URL line. A clear trail improves scannability in results and can raise the chance of a click on “/guides/getting-started”.

## HTML pattern: a simple, accessible breadcrumb

Use a nav with an aria-label and an ordered list. Make each item a link, except the current page. Add visible separators with CSS, not with extra characters in the link text. Keep it keyboard and screen reader friendly.

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/guides/getting-started">Getting started</a></li>
    <li aria-current="page">Install the CLI</li>
  </ol>
</nav>
```

Style the separators with ::before on li plus a margin so they are not part of the link text. On small screens, allow horizontal scroll if the path is long. Do not truncate the current page label if you can avoid it.

Place the breadcrumb near the top of main content, under the header. Keep font size readable. Do not hide it behind a menu on desktop. On mobile, show it or place it just under the title. A good breadcrumb does not compete with the h1, it supports it.

## Pick a single trail per page

One page, one breadcrumb trail. Do not switch the trail based on how the user arrived. A stable path helps users form a model of your structure and keeps Google’s understanding clean.

Choose the canonical parent. On “/shop/widgets/blue-widget”, the trail should be Home > Shop > Widgets > Blue widget. If the product also sits in “/sale”, keep “/sale” out of the breadcrumb unless that is the canonical category in your URL and links. Use internal links to reach the alternative grouping from the page body if needed.

For blog posts, prefer the main category or hub over dates. Home > Guides > Getting started > Install the CLI beats Home > 2026 > September > Install the CLI. The breadcrumb is for sense making, not for archive navigation.

## Keep the trail consistent with URLs and information architecture

If your URL is “/guides/getting-started/install-cli”, the breadcrumb should show Home > Guides > Getting started > Install the CLI, with links to “/guides” and “/guides/getting-started”. Do not invent labels that do not exist as real pages. Each breadcrumb step should land on a page that makes sense on its own.

When you change a URL structure, update the breadcrumb HTML and the links across the site. If you redirect “/guides/getting-started” to “/docs/getting-started”, update the breadcrumb parent and the JSON-LD. A mismatched trail confuses both users and crawlers and looks sloppy in results.

For faceted navigation, do not bake filters into the breadcrumb. “Home > Shoes > Men > Trail running > Size 10 > Blue” is noisy and unstable. Keep the breadcrumb to the stable category path, and show applied filters elsewhere with clear remove actions. This limits crawl bloat from parameter or filter pages too.

## Add BreadcrumbList markup in JSON-LD

Use BreadcrumbList with itemListElement, a list of ListItem. Each item needs a position from 1, a name and an item URL. The last item may omit the URL. JSON-LD is the easiest format and is recommended. You can place it in head or body. Google can read it even when injected by JavaScript, but prefer server rendering for reliability and for non executing crawlers.

```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": "Getting started",
      "item": "https://yourproduct.com/guides/getting-started"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Install the CLI"
    }
  ]
}
</script>
```

Use absolute URLs in item. Do not use relative paths here. Keep names human, title case or sentence case as your site uses. The visible HTML trail and the JSON-LD should match. If they differ, fix the source of truth that builds both.

Microdata and RDFa also work if your CMS template already uses them. JSON-LD is cleaner to maintain and less likely to break when you change HTML structure. If you have an @graph already, add the BreadcrumbList as a node in the same script block, that is fine.

> Rule: one BreadcrumbList per page that needs a breadcrumb. Do not mark up two different trails on the same page.

## What Google shows and what schema earns

Breadcrumbs are not a ranking factor. They make the page eligible for the breadcrumb display in results and help machines read your structure. Google often replaces the URL line with your breadcrumb trail. You may see Home > Guides > Getting started instead of yourproduct.com/guides/getting-started/install-cli.

Google can display labels that differ from your exact names if it decides a different path is clearer. Keep your IA and your breadcrumb markup consistent to reduce surprises. Do not rely on breadcrumbs to force a specific canonical. Use proper canonical tags for that job.

BreadcrumbList can sit alongside other schema types in one @graph. For example, an Article or a Product node and your Organization can all live in the same script. This is common on product or blog pages and works well as of 2026.

## Test, fix and monitor

Run the Rich Results Test. It tells you if the page is eligible for a breadcrumb rich result and flags issues. It reads the rendered page, so it will see JSON-LD added after load. Use it to catch missing required fields and bad URLs.

Use the Schema Markup Validator to check syntax against schema.org. It does not enforce Google’s rich result rules, so use it to catch type or property mistakes. The old Structured Data Testing Tool was retired in 2020, so do not rely on guides that still link to it.

1. **Open the Rich Results Test** Go to search.google.com/test/rich-results and enter a full page URL.
2. **Check the breadcrumb card** Look for Breadcrumb in detected items. If it is missing, your JSON-LD may not be present or is broken.
3. **Fix reported errors** Common issues: relative URLs in item, missing position, last item given a URL that redirects, or a name that does not match visible content.
4. **Validate with the Schema Markup Validator** Go to validator.schema.org, paste the same page and verify the BreadcrumbList structure and values.
5. **Ship and watch Search Console** After deployment, Google Search Console may show a Breadcrumb enhancement report for your site. Watch for errors and warnings per template.

Search Console’s enhancement reports group issues by type and URL pattern. Fix the template and revalidate. If your site is small, Google may take a few days to refresh the report. Use the URL Inspection tool for spot checks while you wait if needed, but do not spam reindex requests site wide.

- Missing required field: add position, name and item where needed
- Relative URL where absolute is needed: use https URLs in item
- Markup not matching visible content: make the HTML trail and JSON-LD agree
- Two types nested poorly: keep BreadcrumbList as its own node, not inside unrelated types
- Policy violation: do not mark up content that users cannot see

## Mistakes to avoid and edge cases

- Home as the last item: the current page should be last, not Home
- A trail that does not match the URL path: keep labels and parents aligned to actual pages
- Thin or fake parents: each step must link to a real, useful page, not a search result page
- Changing trails per referrer: keep one canonical trail per page
- Marking up query parameters and filters: keep filters out of the breadcrumb
- Using icons only: include text labels for accessibility and for schema name values
- Overlong trails on mobile: allow horizontal scroll or collapse earlier steps behind a single link to the parent category

If your home page lives at “/home” in the CMS but resolves at “/”, use the canonical public URL in the breadcrumb item. Be consistent across the site. If you use a subfolder for language like “/en/”, include it in item URLs in the JSON-LD and in the HTML links.

If the current page is a paginated list like “/guides?page=2”, keep the breadcrumb to the base category only. Do not include the page number as a breadcrumb step. The pagination state belongs in rel=“prev” and rel=“next” or in UI controls, not in the breadcrumb.

> Warning: answering AI crawlers often do not execute JavaScript. If you want them to read your breadcrumbs, render JSON-LD on the server.

## Where breadcrumbs help the most on a small site

Add them to deep pages first. Product detail pages, sub categories and long form guides see the most gain. Your “/pricing” or “/contact” pages are shallow and do not need them as much, but consistency still helps.

Use keyworded but natural names. “Email templates” beats “Templates” if that is the category and it matches the page title at “/guides/email-templates”. Do not stuff keywords. Short, clear labels make better anchor text across the site and better snippets in results.

Tie the breadcrumb to your sitemap and internal linking audit. If Search Console shows orphan pages, add them to the right category and include them in the breadcrumb path. A fixed page will have a path you can follow from Home to the page in three or four clicks, and the breadcrumb mirrors that path.

## Questions

### Do I need breadcrumbs on a small site with less than 20 pages?

They still help if you have categories and detail pages. If your site is five flat pages, you can skip them. As soon as you add a section with several pages, add breadcrumbs to those templates for consistency and internal links.

### Should I put keywords in breadcrumb labels for SEO?

Use the real category or page name. If a keyword is part of the natural name, that is fine. Avoid stuffing or changing labels just for search. Consistency with the page title and category beats squeezing extra words into the breadcrumb.

### Can I show a different breadcrumb based on how the user arrived?

Do not. Show one canonical trail per page. Switching trails breaks mental models, makes internal linking noisy and can confuse Google. Use related links in the body if you want to reflect alternate journeys.

### Is Microdata better than JSON-LD for BreadcrumbList?

No. JSON-LD is easier to maintain and is what Google recommends as of 2026. Microdata and RDFa are still read if you use them. If you start fresh, use JSON-LD and keep it in a single script block.

### Why does Google show a different breadcrumb than my markup?

Google can rewrite paths for clarity. Check that your HTML trail, JSON-LD and URL structure match. Ensure each breadcrumb step is a real page. If Google still picks a different path, it is a display choice, not an error.

### Where should the breadcrumb sit in the DOM?

Place it near the top of the main landmark after the header. Order matters for assistive tech. Keep the nav labelled with aria-label="Breadcrumb" and ensure the current page has aria-current="page".

## Read next

- [Breadcrumbs](https://porteur.ai/glossary/breadcrumbs-navigation): Breadcrumbs are the trail of links that show where a page sits. Add them for visitors, crawlers and rich results, without changing your URL paths.
- [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.
- [Faceted navigation SEO: which filters to index and how to hide the rest](https://porteur.ai/guides/faceted-navigation-seo): Pick which filters should rank, hide the rest, and keep crawl under control. A practical plan for product sites with examples you can ship.
- [The Rich Results Test: what it checks and what it does not](https://porteur.ai/guides/rich-results-test): Run Google’s Rich Results Test, read eligibility, warnings and errors, know its limits, and when to use schema.org’s validator and Search Console.
- [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.
- [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.
- [Cloaking](https://porteur.ai/glossary/cloaking): Cloaking is showing Google different content than users. See what counts, what is safe, how to check your site, and how to fix risky setups.
- [Navigation: the links that decide what gets crawled](https://porteur.ai/guides/navigation-and-seo): Your menu decides which pages are found first and how deep the rest sit. What belongs in it, what belongs in the footer, and how to check yours.

Want to see how your breadcrumb paths read to searchers, and where rivals rank on them? Paste a URL into the free check and get three findings in about thirty seconds. Free check: https://porteur.ai/