Breadcrumbs

What are Breadcrumbs?

A breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

Google also likes to display breadcrumbs in its search results. This is as extra green links after the domain name. Google tries to find these breadcrumb links on websites so they can use them. This example contains breadcrumbs indicating the category and subcategory pages related to a product.

why are breadcrumbs necessary?

You might have heard the term ‘Breadcrumb Navigation’ and even seen it on many websites.

Breadcrumbs are equally beneficial to the search engines as they are to users. They provide logical access to all the inner and outer pages of your site, a practice highly favored by search engines.

Breadcrumbs serve two purposes. From a visitor’s point of view, they visually help identify exactly where on the website they are. They also help search engines like Google better index your website and make hierarchical sense of your website structure, enabling structured data and improving your site’s internal linking structure.

Breadcrumb Benefits

  • Visitors take fewer steps when navigating from section to section.
  • Breadcrumbs clarify site navigation that shows visitors where they are on a site’s hierarchy of pages without having to examine the comparatively less semantic URL structure.
  • Breadcrumbs use space effectively.
  • 3 Types of Breadcrumbs You Should Know About

    1. Location-based Breadcrumbs

    Also known as hierarchy-based breadcrumbs, they are the most common type of breadcrumbs. They represent the structure of the page and help users to understand the site’s multiple level hierarchy for better navigation.

    Location-based breadcrumbs are convenient for showing the site’s structure to visitors who have entered a deep page in the site from external sources.

    2. Attribute-based Breadcrumbs.

    These breadcrumbs explain the relationship of products to one another and help visitors to find a new approach. They show a list of attributes which the user previously selected.

    You often see the simultaneous use of two breadcrumbs types: at the beginning, there are location-based links, followed by attribute-based links, which appear when you use filters, for instance.

    It usually looks like “Home > Product category > Color> Size > Shape”.

    3. History-based or Path-based Breadcrumbs

    History-based breadcrumbs provide the visitor with the path they have followed through the site.

    Basically, it looks like this: Home > Previous page > Previous page > Previous page

    Breadcrumb Microformats in Bigcommerce (Blueprint/Legacy Theme):

    Please follow the steps:

    Step 1: Open Panels/Breadcrumb.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="Breadcrumb">
        <ul>
            <li>
                <a href="%%GLOBAL_ShopPathNormal%%/">
                    %%LNG_Home%%
                </a>
            </li>%%SNIPPET_Trail%%
        </ul>
    </div>

    After Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="Breadcrumb">
        <ul itemscope itemtype="http://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="%%GLOBAL_ShopPathNormal%%/" itemprop="item">
                    <span itemprop="name">%%LNG_Home%%</span>
                </a>
            </li>%%SNIPPET_Trail%%
        </ul>
    </div>​

    Step 2: Open Snippets/BreadcrumbItem.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <li>
        <a href="%%GLOBAL_CatTrailLink%%">
            <span>%%GLOBAL_CatTrailName%%</span>
        </a>
    </li>​

    After Implementation of Breadcrumb Microformats, code will be look like the following:

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="%%GLOBAL_CatTrailLink%%">
            <span itemprop="name">%%GLOBAL_CatTrailName%%</span>
        </a>
    </li>​

    Step 3: Open Snippets/ProductBreadCrumb.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <ul>
        %%GLOBAL_BreadcrumbItems%%
    </ul>
    
    <p>After Implementation of Breadcrumb Microformats, code will be look like the following:</p>
    
    <ul itemscope itemtype="http://schema.org/BreadcrumbList">
        %%GLOBAL_BreadcrumbItems%%
    </ul>

    Step 4: Open Panels/CategoryBreadCrumb.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="CategoryBreadcrumb">
        <ul>
            <li>
                <a href="%%GLOBAL_ShopPathNormal%%/">
                    <span>%%LNG_Home%%</span>
                </a>
            </li>
            %%SNIPPET_CatTrail%%
        </ul>
    </div>​

    After Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="CategoryBreadcrumb">
        <ul itemscope itemtype="http://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="%%GLOBAL_ShopPathNormal%%/">
                    <span itemprop="name">%%LNG_Home%%</span>
                </a>
            </li>
            %%SNIPPET_CatTrail%%
        </ul>
    </div>​

    Step 5: Open Panels/PageBreadCrumb.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Breadcrumb Moveable Panel" id="PageBreadcrumb">
        <ul>
            <li>
                <a href="%%GLOBAL_ShopPathNormal%%/">
                    <span>%%LNG_Home%%</span> 
                </a>
            </li>%%SNIPPET_PageBreadcrumb%%
        </ul>
    </div>​

    After Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Breadcrumb Moveable Panel" id="PageBreadcrumb">
        <ul itemscope itemtype="http://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="%%GLOBAL_ShopPathNormal%%/">
                    <span itemprop="name">%%LNG_Home%%</span> 
                </a>
            </li>%%SNIPPET_PageBreadcrumb%%
        </ul>
    </div>​

    Step 6: Open Panels/BrandBreadCrumb.html file in theme editor and Use this:

    Before Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="BrandBreadcrumb">
        <ul>
            <li>
                <a href="%%GLOBAL_ShopPathNormal%%/">
                    <span>%%LNG_Home%%</span>
                </a>
            </li>
            <li>
                <a href="%%GLOBAL_AllBrandsLink%%">
                    <span>%%LNG_Brands%%</span>
                </a>
            </li>
            <li>%%GLOBAL_TrailBrandName%%</li>
        </ul>
    </div>

    After Implementation of Breadcrumb Microformats, code will be look like the following:

    <div class="Block Moveable Panel Breadcrumb" id="BrandBreadcrumb">
        <ul itemscope itemtype="http://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="%%GLOBAL_ShopPathNormal%%/">
                    <span itemprop="name">%%LNG_Home%%</span>
                </a>
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="%%GLOBAL_AllBrandsLink%%">
                    <span itemprop="name">%%LNG_Brands%%</span>
                </a>
            </li>
            <li>%%GLOBAL_TrailBrandName%%</li>
        </ul>
    </div>

Leave a comment

Your email address will not be published. Required fields are marked *