breadcrumb

breadcrumb · No Google docs page

Appears in

AboutPage

What is it?

breadcrumb attaches a navigation trail to a WebPage, showing where the page sits in the site hierarchy. It accepts either a BreadcrumbList object (preferred) or a plain text string like "Home > About." Embedding the breadcrumb directly on the WebPage node is an alternative to placing a standalone BreadcrumbList entity in the @graph array. Both approaches produce valid structured data.

Why this matters for AEO

AI answer engines use breadcrumb data to understand site structure and page relationships. When an engine processes a query about a company's products or leadership, a breadcrumb trail from Home > Company > About confirms the page is the canonical about section, not a blog post that mentions the company in passing. This hierarchical signal helps the engine rank the page higher in its source selection.

Google renders BreadcrumbList as a rich result in search, displaying clickable path segments below the page title. While the breadcrumb property on WebPage itself does not trigger this rich result (Google reads BreadcrumbList at the top level), having both the standalone BreadcrumbList and the WebPage breadcrumb property creates a consistent, connected graph.

What the specs say

Schema.org: A set of links that can help a user understand and navigate a website hierarchy. schema.org/breadcrumb

Expected type: BreadcrumbList or Text. The property is defined on WebPage, which AboutPage inherits.

Google: Google supports BreadcrumbList as a standalone rich result type. No dedicated documentation exists for the breadcrumb property on WebPage. Google BreadcrumbList docs

How to find your value

• URL structure — Split the URL path into segments: /about becomes Home > About
• Visible breadcrumb — Match the breadcrumb navigation component already on the page
• Webflow — Use the folder structure or breadcrumb component in the Designer
• CMS pages — Parent collection + item name: Blog > Post Title

Format and code

Type: BreadcrumbList (object) or Text (string)

Structured format (recommended):

{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "About | College of Applied Health Sciences",
  "url": "https://ahs.illinois.edu/about/",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://ahs.illinois.edu/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "About",
        "item": "https://ahs.illinois.edu/about/"
      }
    ]
  }
}

Text format (minimal):

{
  "@type": "AboutPage",
  "breadcrumb": "Home > About"
}

Text format is valid schema.org but produces no rich result and gives AI engines less structured data to work with. Use the BreadcrumbList object.

Each ListItem needs position (integer, starting at 1), name (display text), and item (URL). Omit item on the last breadcrumb step if it represents the current page.

Webflow implementation

Static pages

Add to Page Settings > Custom Code > Before </head>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "About Karpi Studio",
  "url": "https://karpi.studio/about",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://karpi.studio/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "About"
      }
    ]
  }
}
</script>

CMS template pages

For CMS collection pages, reference the collection name dynamically:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://karpi.studio/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Blog",
        "item": "https://karpi.studio/blog"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}"
      }
    ]
  }
}
</script>

In Schema HQ

Breadcrumblist as a standalone entity in the @graph array and can also set the breadcrumb property on the webpage node to reference it via @id. both approaches are supported depending on the output mode.

Real examples

University of Illinois (ahs.illinois.edu):

{
  "@type": "AboutPage",
  "@id": "https://ahs.illinois.edu/about/#about",
  "url": "https://ahs.illinois.edu/about/",
  "name": "About | College of Applied Health Sciences",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://ahs.illinois.edu/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "About",
        "item": "https://ahs.illinois.edu/about/"
      }
    ]
  }
}

Yoast (jsonld.com):

{
  "@type": "WebPage",
  "@id": "https://jsonld.com/web-page/",
  "url": "https://jsonld.com/web-page/",
  "name": "JSON-LD Web Page Example Code",
  "isPartOf": { "@id": "https://jsonld.com/#website" },
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://jsonld.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Web Page",
        "item": "https://jsonld.com/web-page/"
      }
    ]
  }
}

Related fields

• itemListElement -- ListItem entries inside the BreadcrumbList
• isPartOf -- Links a page to its parent WebSite (structural, not navigational)
• name -- Page title, often the last breadcrumb label
• url -- Page URL, used as item in each ListItem

FAQ

Should breadcrumb go on WebPage or as a standalone BreadcrumbList?

Both work. Google reads BreadcrumbList at the top level of @graph for rich results regardless of whether the WebPage also has a breadcrumb property. Setting breadcrumb on the WebPage node adds an explicit structural link between the page entity and its navigation trail, which strengthens the graph for AI engines.

Does the last breadcrumb item need a URL?

No. Schema.org and Google both allow omitting item on the final ListItem, since it represents the current page. Including it is valid but optional.

Can a page have multiple breadcrumb trails?

Yes. If a page is reachable through different navigation paths, use an array of BreadcrumbList objects. Google will display the most relevant trail in search results.