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.

By , founder of Porteur · Updated 14 September 2026 · Markdown

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.

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

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

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.

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

Sources

Check my site, free

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, no card
  • Read-only, your own accounts
  • Readable by your agent

Read next