CSS and SEO

Breadcrumb Schema Generator

Enter your page trail once and get both the visible breadcrumb navigation and the BreadcrumbList structured data that search engines read, always in sync.

    Live preview
    
    

    Runs entirely in your browser. Nothing is uploaded to any server.

    Why generate breadcrumbs and schema together

    Always in sync

    The visible trail and the structured data come from one list.

    Rich results

    BreadcrumbList lets search engines show the trail in results.

    Accessible

    A labelled nav, an ordered list and aria-current.

    How to create breadcrumb schema

    1. Enter the trailOne crumb per line from the home page down to the current page.
    2. Set the base URLRelative links are turned into absolute URLs for the schema.
    3. Copy the codePaste the nav and JSON-LD into your page and the CSS into your stylesheet.

    Breadcrumb markup that search engines understand

    The visible breadcrumb is an ordered list inside a nav element labelled "Breadcrumb", which is the pattern recommended by the WAI-ARIA authoring practices. The current page is marked with aria-current="page" and is not a link.

    The JSON-LD block describes the same trail as a schema.org BreadcrumbList. Each ListItem has a position, a name and, for every crumb except optionally the last, an absolute item URL. Google requires absolute URLs, which is why relative links are resolved against your base URL.

    Separators in CSS

    Separators are drawn with ::before so screen readers skip them.

    Home icon

    The text stays in the HTML for screen readers and the schema.

    Validation

    Check the output with the Rich Results Test before publishing.

    Breadcrumb schema FAQ

    Does the last breadcrumb need a URL in the schema?

    No. Google allows the last item to have no item URL. This tool includes it when you provide one.

    Should breadcrumbs be links on the current page?

    No. The current page is shown as plain text with aria-current="page" so it is not a link to itself.

    Can I use microdata instead of JSON-LD?

    Both are supported by search engines, but JSON-LD is Google's recommended format and keeps the HTML clean.

    Why must schema URLs be absolute?

    Structured data is read outside the page context, so search engines require full URLs that include https:// and the domain.

    Will breadcrumbs always appear in Google results?

    No. Valid markup makes your page eligible, but Google decides when to show breadcrumbs in results.

    Try other CSS and SEO tools

    More free tools from My Panda Toolbox.