How to Add Breadcrumb Schema: JSON-LD Examples

Have you ever noticed a navigation path like Home > Blog > SEO Guide above a webpage? These links are called breadcrumbs, and they help visitors understand where a page belongs within a website.

Breadcrumbs are useful for navigation, but they can also provide search engines with information about your website's structure.

By adding breadcrumb schema markup, you can describe the relationship between your homepage, category pages, and individual content pages in a format search engines understand.

The good news? You don't need to be an experienced developer to implement it.

In this guide, you'll learn how to add breadcrumb schema to a website using JSON-LD, explore working code examples, understand Google's requirements, and discover how to test your implementation.

Breadcrumb schema is a type of structured data that describes the hierarchical navigation path leading to a webpage.

It uses the BreadcrumbList type from Schema.org to tell search engines how different pages relate to one another.

For example, imagine a website that publishes guides about digital marketing. Its navigation path might look like this:

Home > SEO Guides > Technical SEO > Breadcrumb Schema

Each breadcrumb represents a level in the site's content hierarchy.

Without structured data, search engines may identify this relationship through links and page content. With breadcrumb schema, you can explicitly communicate the intended navigation path.

Breadcrumb markup is particularly useful for websites with multiple categories, product collections, blog articles, and other nested pages.

Breadcrumb Navigation vs. Breadcrumb Schema

Although the two terms are closely related, they serve different purposes.

Breadcrumb Navigation	Breadcrumb Schema
Visible navigation links for visitors	Structured data describing the navigation path
Helps users move between website sections	Helps search engines interpret the page hierarchy
Usually implemented using HTML and CSS	Commonly implemented using JSON-LD
Improves navigation and usability	Can make pages eligible for breadcrumb display in Google Search

For example, visitors might see:

Home > Products > Electronics > Headphones

The corresponding breadcrumb schema communicates the same hierarchy using structured properties such as name, item, and position.

Importantly, adding schema markup does not automatically create visible breadcrumb links on your webpage. If you want visitors to navigate through breadcrumbs, you should implement the navigation separately.

Breadcrumb schema provides several practical benefits for website organization and search appearance.

1. Helps Google Understand Website Hierarchy

Google uses structured data to interpret different types of information on webpages. Breadcrumb markup helps identify where a page belongs within a site's navigation structure.

For example, an online store might organize its products as follows:

Home > Clothing > Men's Clothing > Jackets

This hierarchy provides context about the relationship between the product and its parent categories.

Valid breadcrumb structured data can make a page eligible for a breadcrumb path in Google's desktop search results.

Instead of displaying only the domain, Google may show a more descriptive navigation path.

However, Google does not guarantee breadcrumb display, even when the schema is implemented correctly.

There is also an important update: since January 2025, Google has stopped displaying breadcrumb paths in mobile search results. Breadcrumb display remains supported on desktop.

Breadcrumb navigation helps visitors find related categories without repeatedly using the back button.

For example, someone reading an SEO tutorial may want to return to the main Technical SEO category.

A visible breadcrumb path provides a convenient route.

While structured data describes that path to search engines, actual clickable breadcrumb links provide the navigation benefit to visitors.

4. Clarifies the Relationship Between Pages

Large websites often contain hundreds or thousands of pages.

A clearly organized breadcrumb structure can support a consistent information architecture across category pages, product pages, articles, and subcategories.

Breadcrumb schema is a useful addition to that architecture, but it is not a replacement for clear internal linking.

How Does BreadcrumbList Schema Work?

Google supports breadcrumb markup using Schema.org's BreadcrumbList structured-data type.

A breadcrumb trail contains an ordered collection of ListItem objects.

Each item describes a step in the navigation path.

The main properties are:

Property	Description	Example
@context	Identifies the structured-data vocabulary	https://schema.org
@type	Specifies the structured-data type	BreadcrumbList
itemListElement	Contains the ordered breadcrumb entries	Array of ListItem objects
position	Identifies each item's position	1, 2, 3
name	Describes the breadcrumb label	SEO Guides
item	Provides the URL of the associated page	https://example.com/seo

According to Google's documentation, a BreadcrumbList needs at least two ListItem entries to meet its breadcrumb feature requirements.

Positions should use integers, beginning with 1.

Google allows the final breadcrumb to omit the item URL. In that case, Google uses the URL of the page containing the markup.

You can also omit the homepage breadcrumb if it is not part of the navigation path you're describing.

Let's start with a common example: a blog article.

Imagine a website with the following structure:

Home > Blog > SEO Guide

The corresponding JSON-LD schema would look like this:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO Guide",
      "item": "https://example.com/blog/seo-guide/"
    }
  ]
}
</script>

Understanding the Code

Here's what each part communicates:

BreadcrumbList: Defines the structured data as a breadcrumb trail.
Position 1: Identifies the homepage as the first level.
Position 2: Represents the parent blog section.
Position 3: Identifies the current article.

The name property provides the breadcrumb label, while item supplies the relevant URL.

Notice that the code uses complete URLs rather than relative paths such as /blog/.

Replace the example domain, labels, and URLs with your actual website information before implementation.

E-commerce stores often have deeper page hierarchies.

For example:

Home > Electronics > Laptops > Gaming Laptop

The JSON-LD schema could look like this:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Electronics",
      "item": "https://example.com/electronics/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Laptops",
      "item": "https://example.com/electronics/laptops/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Gaming Laptop"
    }
  ]
}
</script>

In this example, the last item doesn't include an item property.

That is permitted by Google's documentation because it represents the current page.

This structure works well for product websites, provided the categories reflect how visitors actually navigate the store.

Important: The example URLs are placeholders. They must be replaced with real destinations before being used on a live website.

Breadcrumb markup can also be useful for websites offering online tools, calculators, and utilities.

Suppose your website includes different tool categories.

A navigation path might look like:

Home > SEO Tools > Meta Tag Generator

You could implement the following schema:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO Tools",
      "item": "https://example.com/seo-tools/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Meta Tag Generator",
      "item": "https://example.com/seo-tools/meta-tag-generator/"
    }
  ]
}
</script>

This tells search engines that the Meta Tag Generator belongs to the SEO Tools category.

For websites with many utilities, using a consistent hierarchy can make content organization easier to maintain.

However, avoid adding artificial categories solely to make breadcrumb paths longer. Google recommends using breadcrumbs that represent a typical user path rather than blindly copying a URL's folder structure.

Now that you understand the markup, let's look at the implementation process.

Before writing any code, determine the navigation path visitors would use to reach the page.

For example:

Home > Resources > SEO Tutorials > Technical SEO Guide

Make sure the hierarchy reflects real website sections.

Check that each parent page exists and that its URL works correctly.

If a page can be reached through multiple categories, select a meaningful primary path.

Google also supports multiple breadcrumb trails when they genuinely represent different navigation routes.

Step 2: Create Your JSON-LD Markup

Once you've identified the hierarchy, create a BreadcrumbList containing the appropriate ListItem objects.

Each entry should have a descriptive name and a position.

Include valid page URLs for the applicable breadcrumb items.

You can write the JSON-LD manually, or use an online schema generator to make the process easier.

For example, the Smooli AI Breadcrumb Schema Generator provides a tool for creating breadcrumb structured data.

Use it to prepare your breadcrumb markup, then review the generated code to ensure that the labels and URLs accurately match your website.

Even when using a generator, checking the final output is essential.

Step 3: Add JSON-LD to Your Webpage

After preparing the schema, add it to the appropriate webpage using a script element:

html

<script type="application/ld+json">
/* Insert valid JSON-LD here */
</script>

The comment shown above is an illustration only. Replace it with valid JSON; comments themselves are not permitted inside JSON-LD.

You can place the completed script inside the HTML <head> or <body>.

For websites that generate pages dynamically, the schema can be created through templates or server-side rendering.

The important requirement is that search engines can access the final structured data when crawling the webpage.

If your website doesn't already have breadcrumb navigation, consider adding it to the page interface.

A simple HTML example is:

html

<nav aria-label="Breadcrumb">
<ol>
  <li><a href="/">Home</a></li>
  <li><a href="/blog/">Blog</a></li>
  <li aria-current="page">SEO Guide</li>
</ol>
</nav>

CSS can be used to style the navigation and add separators.

The visible breadcrumbs should reflect the same logical path described in your structured data.

This creates a consistent experience for visitors and search engines.

Before publishing the changes, validate your code.

Use Google's official Rich Results Test.

You can test the live URL or paste your code directly into the testing tool.

The test helps identify whether Google recognizes the structured data and whether required properties are missing.

You can also use the Schema Markup Validator to check general Schema.org syntax.

A successful validation confirms that your markup meets the tested requirements. It does not guarantee that Google will display breadcrumbs in search results.

Step 6: Check the Page in Google Search Console

After publishing your schema:

Open Google Search Console.
Select your website property.
Open the URL Inspection tool.
Enter the updated webpage URL.
Check whether Google can access and render the page.
Review the indexed-page information and relevant structured-data reports.

Google Search Console may provide a Breadcrumbs enhancement report when it detects supported breadcrumb markup.

If you encounter an error, correct the markup and validate the fix.

Allow time for Google to recrawl the page and process the changes.

WordPress users may not need to write JSON-LD manually.

SEO plugins such as Yoast SEO and Rank Math provide breadcrumb features that can generate the relevant structured data.

Using Yoast SEO

For websites using Yoast SEO:

Open your WordPress dashboard.
Navigate to Yoast SEO > Settings.
Open Advanced > Breadcrumbs.
Enable breadcrumbs.
Configure the navigation appearance.
Make sure your theme displays breadcrumbs where appropriate.
Test a published page to verify the generated schema.

Depending on your WordPress theme, additional template configuration may be needed for visible breadcrumb navigation.

Using Rank Math

If you're using Rank Math:

Open the WordPress dashboard.
Navigate to Rank Math SEO > General Settings > Breadcrumbs.
Enable breadcrumbs.
Configure the relevant settings.
Add visible breadcrumbs using your supported theme integration, shortcode, or template function.
Verify the generated BreadcrumbList markup.

Important: Before adding manual JSON-LD to a WordPress site, check whether your SEO plugin already generates it.

Duplicating the same breadcrumb data through multiple plugins or custom scripts can create unnecessary maintenance problems or conflicting markup.

Even a small JSON-LD mistake can prevent Google from correctly interpreting your breadcrumb data.

Here are common implementation problems worth checking.

1. Missing Required Properties

Each breadcrumb should include the relevant required properties.

For example, this item is incomplete:

html

{
  "@type": "ListItem",
  "position": 2,
  "item": "https://example.com/blog/"
}

It is missing a name.

A corrected version would be:

html

{
  "@type": "ListItem",
  "position": 2,
  "name": "Blog",
  "item": "https://example.com/blog/"
}

Remember that Google permits the last breadcrumb's item URL to be omitted.

2. Incorrect Position Numbers

Breadcrumb positions should represent the actual navigation order.

For example:

Incorrect: 1, 3, 5

Correct: 1, 2, 3

Use consecutive integer values beginning with 1.

3. Using Incorrect or Broken URLs

Every included breadcrumb URL should point to the intended page. Common mistakes include:

Linking to a deleted category.
Using the wrong website domain.
Including an accidental staging URL.
Referencing an unrelated webpage.
Using a redirecting URL instead of the intended canonical destination.

Whenever possible, use stable, canonical URLs that accurately reflect your website structure.

Suppose a blog post belongs to the SEO Tutorials category, but its schema describes it as part of an unrelated e-commerce category.

That markup could misrepresent the page's actual location.

Choose breadcrumb labels and paths based on genuine website organization, not unrelated high-volume keywords.

Multiple BreadcrumbList objects are not automatically an error; Google supports multiple genuine breadcrumb trails.

The problem occurs when separate plugins, themes, or scripts unintentionally create duplicate or contradictory breadcrumb paths.

Review existing structured data before adding another implementation.

6. Assuming Valid Schema Guarantees Google Visibility

A page can pass Google's Rich Results Test without showing a breadcrumb trail in actual search results.

Google decides which search features to display.

Remember that breadcrumb structured data doesn't guarantee higher rankings, more impressions, or rich-result visibility.

Its primary purpose is to communicate navigational context accurately.

Following a few practical principles can help maintain reliable breadcrumb markup as your website grows.

Best practice	Why it matters
Represent a genuine navigation path	Keeps structured data accurate and meaningful
Use descriptive breadcrumb names	Helps users and search engines understand the hierarchy
Number items consecutively	Establishes the correct breadcrumb order
Use appropriate canonical URLS	Avoids inconsistent page references
Keep visible navigation and schema aligned	Maintains a consistent representation of the site
Validate after major website changes	Helps detect broken paths and outdated schema
Use one reliable source to generate markup	Reduces accidental duplication and inconsistencies

If your website contains hundreds of product or tool pages, consider generating breadcrumb schema programmatically from your navigation data.

This helps reduce manual mistakes and ensures that changes to category names or URLs can be reflected consistently.

For large websites, the underlying navigation architecture matters more than the amount of structured data being generated.

Once your schema is published, you can confirm the implementation through several checks.

First, inspect the page source. Search for BreadcrumbList and verify that your markup appears with the expected labels and URLs.

Second, run Google's Rich Results Test. Confirm that the tool detects breadcrumb structured data and does not report critical errors.

Third, use Google Search Console. Review URL Inspection and any available breadcrumb enhancement reports.

Finally, check desktop Google Search results. After Google processes the markup, your search appearance may include a breadcrumb path.

Don't rely on mobile search results for visual confirmation. Google removed visible breadcrumb paths from mobile results in January 2025.

Also remember that schema recognition and actual search-result appearance are separate outcomes.

Breadcrumb schema is structured data that describes a webpage's position within a website's navigation hierarchy. It commonly uses Schema.org's BreadcrumbList type to provide search engines with an ordered path of categories and pages.

Breadcrumb schema helps Google understand page hierarchy and can support breadcrumb display in desktop search results. However, adding it does not guarantee a ranking improvement or increased organic traffic.

Which schema format is best for breadcrumbs?

Google supports JSON-LD, Microdata, and RDFa. JSON-LD is generally recommended because it keeps structured data separate from the visible HTML markup and is relatively straightforward to generate and maintain.

No. Google does not require the homepage to appear in every breadcrumb trail. However, the breadcrumb structure must meet Google's other requirements, including at least two ListItem entries for breadcrumb feature eligibility.

JSON-LD markup can be added separately from visible breadcrumb navigation. However, Google recommends accurate structured data that reflects the actual page context. Adding visible breadcrumbs is generally useful because it also provides navigational value to visitors.

Possible reasons include invalid markup, missing properties, inaccessible pages, inaccurate navigation paths, or Google's decision not to display the breadcrumb feature. Google also no longer displays breadcrumb paths in mobile search results.

You can implement appropriate breadcrumb markup across pages that have meaningful navigation hierarchies. However, the markup should be accurate for each page, and you should avoid adding irrelevant or artificial breadcrumb paths.

You can use an online generator such as the Smooli AI Breadcrumb Schema Generator to prepare the markup. After generating the code, verify its accuracy, add it to your website, and validate it with Google's Rich Results Test.

Conclusion

Adding breadcrumb schema to your website is a practical way to communicate page hierarchy to search engines while supporting a better-organized navigation structure.

By using BreadcrumbList JSON-LD, you can describe how your homepage, categories, articles, products, and online tools relate to one another.

The implementation process is straightforward: identify your navigation path, generate accurate JSON-LD, add it to the webpage, and validate the result.

Most importantly, remember that structured data should describe your website accurately rather than attempt to manipulate search results.

If you want a simpler way to prepare the markup, try the Smooli AI Breadcrumb Schema Generator and review the generated code before publishing it.

With accurate implementation and regular validation, breadcrumb structured data can become a useful part of your website's technical SEO foundation.

References