fbpx

Using BreadcrumbList Structured Data

by

Using BreadcrumbList Attribute in Structured Data

Breadcrumbs are essential for eCommerce websites as they help users navigate through the site and improve SEO by providing search engines with a clear structure of your site. Implementing the BreadcrumbList attribute in structured data can enhance your site’s visibility in search results.

For Shopify

To add a BreadcrumbList attribute in structured data in Shopify, you can modify the theme’s Liquid template files. Breadcrumbs are helpful for SEO as they enhance the way search engines understand the structure of your site and can improve the way your site appears in search results. Here’s a step-by-step guide:

Step 1: Access Your Shopify Theme

  1. Log in to your Shopify admin panel.
  2. Go to Online Store > Themes.
  3. Find the theme you want to edit, click on Actions, and select Edit Code.

Step 2: Locate the Template Files

  1. In the left sidebar, find the Templates folder and open the template file where you want to add the breadcrumbs. Typically, this could be product.liquid, collection.liquid, or page.liquid.
  2. You might also need to edit the Snippets folder if you have a separate breadcrumb snippet.

Step 3: Add JSON-LD Structured Data

  1. In the chosen template file, locate the breadcrumb navigation area. This is often wrapped in a div or nav element.
  2. Add the following JSON-LD script within the head section or right before the closing </body> tag of your theme.liquid file. Modify it to match your site’s structure:
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title }}",
      "item": "{{ collection.url }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title }}",
      "item": "{{ product.url }}"
    }
  ]
}
</script>

Step 4: Customize the JSON-LD Data

  • Home: This represents the homepage. Ensure the URL is the homepage of your Shopify store.
  • Collection: This is for a collection page. You can dynamically insert the collection title and URL if you are on a collection page.
  • Product: This represents the product page. Dynamically insert the product title and URL when on a product page.

Example for a Product Page

If you are adding breadcrumbs to a product page, your Liquid code might look like this:

{% if template contains 'product' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ product.collections.first.title }}",
      "item": "{{ product.collections.first.url }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title }}",
      "item": "{{ product.url }}"
    }
  ]
}
</script>
{% endif %}

Step 5: Save and Test

  1. Save your changes.
  2. Use the Rich Results Test tool by Google to ensure your structured data is correctly implemented and detected.

By following these steps, you can implement BreadcrumbList structured data in your Shopify store, enhancing your SEO and helping search engines understand your site structure better.

For WordPress (WooCommerce)

To add a BreadcrumbList attribute in structured data in WooCommerce, you need to modify your theme’s files to include JSON-LD structured data for breadcrumbs. Here’s a step-by-step guide:

Step 1: Access Your Theme’s Files

  1. Log in to your WordPress admin panel.
  2. Go to Appearance > Theme Editor.
  3. In the Theme Files sidebar, locate the file where you want to add the breadcrumb structured data. This is typically in the header.php, single-product.php, or archive-product.php files.

Step 2: Add JSON-LD Structured Data

  1. Open the appropriate template file where you want to include breadcrumbs. For product pages, this would typically be single-product.php.
  2. Add the following JSON-LD script in the <head> section or right before the closing </body> tag of your theme file:
<?php
// Add this function to output JSON-LD for breadcrumbs
function add_breadcrumbs_json_ld() {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
        $breadcrumbs = yoast_breadcrumb( '', '', false );
        if ( ! empty( $breadcrumbs ) ) {
            // Parse breadcrumbs from Yoast
            $dom = new DOMDocument;
            libxml_use_internal_errors( true );
            $dom->loadHTML( $breadcrumbs );
            libxml_clear_errors();

            $xpath = new DOMXPath( $dom );
            $breadcrumb_items = $xpath->query( "//span[@typeof='v:Breadcrumb']/a" );

            $json_ld = array(
                '@context' => 'https://schema.org',
                '@type'    => 'BreadcrumbList',
                'itemListElement' => array(),
            );

            foreach ( $breadcrumb_items as $index => $item ) {
                $json_ld['itemListElement'][] = array(
                    '@type'    => 'ListItem',
                    'position' => $index + 1,
                    'name'     => $item->nodeValue,
                    'item'     => $item->getAttribute( 'href' ),
                );
            }

            echo '<script type="application/ld+json">' . json_encode( $json_ld ) . '</script>';
        }
    }
}
add_action( 'wp_head', 'add_breadcrumbs_json_ld' );
?>

Step 3: Customize and Implement

  • This example uses Yoast SEO’s breadcrumb function. If you’re using another breadcrumb plugin or method, adjust the function accordingly.
  • Ensure the script dynamically pulls the breadcrumb data to create the JSON-LD structured data.

Example for a Product Page

  1. If you want to add structured data for product pages specifically, you can check if you’re on a single product page before adding the script:
<?php
// Add this function to output JSON-LD for breadcrumbs on product pages
function add_product_breadcrumbs_json_ld() {
    if ( is_product() ) {
        if ( function_exists( 'yoast_breadcrumb' ) ) {
            $breadcrumbs = yoast_breadcrumb( '', '', false );
            if ( ! empty( $breadcrumbs ) ) {
                // Parse breadcrumbs from Yoast
                $dom = new DOMDocument;
                libxml_use_internal_errors( true );
                $dom->loadHTML( $breadcrumbs );
                libxml_clear_errors();

                $xpath = new DOMXPath( $dom );
                $breadcrumb_items = $xpath->query( "//span[@typeof='v:Breadcrumb']/a" );

                $json_ld = array(
                    '@context' => 'https://schema.org',
                    '@type'    => 'BreadcrumbList',
                    'itemListElement' => array(),
                );

                foreach ( $breadcrumb_items as $index => $item ) {
                    $json_ld['itemListElement'][] = array(
                        '@type'    => 'ListItem',
                        'position' => $index + 1,
                        'name'     => $item->nodeValue,
                        'item'     => $item->getAttribute( 'href' ),
                    );
                }

                echo '<script type="application/ld+json">' . json_encode( $json_ld ) . '</script>';
            }
        }
    }
}
add_action( 'wp_head', 'add_product_breadcrumbs_json_ld' );
?>

Step 4: Save and Test

  1. Save your changes.
  2. Use the Rich Results Test tool by Google to ensure your structured data is correctly implemented and detected.

By following these steps, you can implement BreadcrumbList structured data in your WooCommerce store, enhancing your SEO and helping search engines understand your site structure better.