Skip to content

SEO

Breadcrumbs Google Can Read — schema.org Microdata Without a JSON-LD Block

itemscope on the Element That Renders It — the Markup Can't Drift From the UI
Written by Aiden Wood Founder and Lead Design Engineer
🍞 🔍 🏷️

That path under a Google result — Site › Components › Forms instead of a raw URL — isn't automatic. It's BreadcrumbList structured data, and pages without it show a URL string where competitors show a readable trail.

Most sites bolt it on as a JSON-LD block that somebody has to keep matching the visible breadcrumbs. The microdata approach marks up the breadcrumbs themselves — the UI and the SEO data are the same elements, so they cannot drift. That's the pattern inside Velocity X's free breadcrumbs component.

The Money Pattern

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    {items.map((item, i) => (
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href={item.href}>
          <span itemprop="name">{item.label}</span>
        </a>
        <meta itemprop="position" content={String(i + 1)} />
      </li>
    ))}
  </ol>
</nav>

Four itemprops and a meta tag, rendered at build time by Astro — zero JavaScript, and Google's Rich Results Test reads it exactly as it reads JSON-LD. The position meta is the one people forget, and it's required: a ListItem without a position fails validation silently.

The Catch

The current page is a ListItem too, but it's not a link — it gets itemprop="name" on a span with aria-current="page", no anchor. And truncating long trails for mobile is a display decision: collapse the middle visually (ellipsis) but keep every ListItem in the DOM, or the markup tells Google a different hierarchy than the one you have.

One warning from our own library work: when a component gets rewritten, microdata is the classic silent casualty — a v2 that looks identical can ship without the itemprops and nothing visually changes. Structured data needs a check, not a memory; run changed pages through the Rich Results Test.

The Verdict

Breadcrumb microdata is five attributes for a visibly better search listing on every page of your site — one of the highest ratio wins in technical SEO. The component version is free and MIT: breadcrumbs on ui.aidxn.com, source public in the free components repo.

Let us make some quick suggestions?

Please provide your full name.
Please provide your phone number.
Please provide a valid phone number.
Please provide your email address.
Please provide a valid email address.
Please provide your brand name or website.
Please provide your brand name or website.