Forum Discussion

GuillaumeV's avatar
11 years ago

Breadcrumb customization for SEO

Hi,

 

I would like to customize the breadcrumb to make it visible in the search engine result page by adding the google item scope tag

itemscope itemtype="http://data-vocabulary.org/Breadcrumb"

 

The objective would be to move from

<li class="lia-breadcrumb-node crumb">

to 

<li class="lia-breadcrumb-node crumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

at all breadcrumb level

 

Does anyone have some clue to address this topic or have the same need ?

 

 

Current search result

Current search result.PNG

 

Wished search result

Wished searched result.PNG

5 Replies

  • AdamN's avatar
    AdamN
    Khoros Oracle
    11 years ago

    Hi GuillaumeV,

     

    I'm not aware of any way to do this out-of-the-box, but there's likely a way you could do this via customization. At the very least, you could create your own custom breadcrumb formatted as you desire.

     

    This TKB article documents how you can get the details of the breadcrumb and construct your own:

    http://lithosphere.lithium.com/t5/developers-knowledge-base/page-FreeMarker-context-object/ta-p/9331

     

    Here's a slightly different use case, but provides another good example of working with bread crumbs:

    http://lithosphere.lithium.com/t5/developers-discussion/Localizable-category-and-board-names/m-p/43392/highlight/true#M1175

     

    I hope this helps!

  • GuillaumeV's avatar
    GuillaumeV
    Mentor
    11 years ago

    i works fine thanks,

     

    i created a component overriding breadcrumb standard component 

    here is the code for some of you that should be interested

     

    common.widget.breadcrumb@override:

     

    <div class="BreadCrumb crumb-line lia-breadcrumb lia-component-common-widget-breadcrumb" class="BreadCrumb crumb-line lia-breadcrumb">
       <ul id="list" class="lia-list-standard-inline">
        <#list page.content.nav.breadcrumb.crumbs as crumb>
        <#if crumb_has_next>
             <li class="${crumb.wrapperCss}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <a class="lia-link-navigation ${crumb.css}" href="${crumb.url}" itemprop="url"><span itemprop="title">${crumb.text}</span></a>
            </li>
            <li class="${crumb.separatorCss}">
                 <span class="separator">${page.content.nav.breadcrumb.seperator}</span>
            </li>
        <#else>
            <li class="${crumb.wrapperCss}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <span itemprop="title">${crumb.text}</span>
            </li>
        </#if>
        </#list>
        </ul>
        </div>

     

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    9 years ago

    Thanks for sharing this code GuillaumeV - Looks like for the final breadcrumb item the CSS class is missing. Here's the code with this missing piece added:

    <div class="BreadCrumb crumb-line lia-breadcrumb lia-component-common-widget-breadcrumb" class="BreadCrumb crumb-line lia-breadcrumb">
       <ul id="list" class="lia-list-standard-inline">
        <#list page.content.nav.breadcrumb.crumbs as crumb>
        <#if crumb_has_next>
             <li class="${crumb.wrapperCss}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <a class="lia-link-navigation ${crumb.css}" href="${crumb.url}" itemprop="url"><span itemprop="title">${crumb.text}</span></a>
            </li>
            <li class="${crumb.separatorCss}">
                 <span class="separator">${page.content.nav.breadcrumb.seperator}</span>
            </li>
        <#else>
            <li class="${crumb.wrapperCss}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <span class="lia-link-navigation child-thread lia-link-disabled" itemprop="title">${crumb.text}</span>
            </li>
        </#if>
        </#list>
       </ul>
    </div>

    For any developer / Lithium Studio wizard looking   to roll this out on their community take a look at the "Using @override to change core components" article to get started.

  • RobertT's avatar
    RobertT
    Boss
    9 years ago

    Hi All, 

     

    Early present for everyone, I've included an SEO optimised version of the Breadcrumb component that will help Search Crawlers better index and present the content in your community in Search Results.

     

    To use the code below you'll need to create a new component in Studio with the name common.widget.breadcrumb@override

     

    <#attempt>
    <div class="BreadCrumb crumb-line lia-breadcrumb lia-component-common-widget-breadcrumb" class="BreadCrumb crumb-line lia-breadcrumb" aria-label="breadcrumbs" role="navigation">
       <ul id="list" class="lia-list-standard-inline" itemscope itemtype="http://schema.org/BreadcrumbList">
        <#list page.content.nav.breadcrumb.crumbs as crumb>
        <#if crumb_has_next>
             <li class="${crumb.wrapperCss}" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                 <a class="lia-link-navigation ${crumb.css!"crumb"}" itemprop="item" href="${crumb.url}">
                 <span itemprop="name">${crumb.text}</span></a>
            </li>
            <li class="${crumb.separatorCss}" aria-hidden="true">
                 <span class="separator">${page.content.nav.breadcrumb.seperator}</span>
            </li>
        <#else>
            <li class="${crumb.wrapperCss}" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                 <span class="lia-link-navigation child-thread lia-link-disabled" itemprop="name">${crumb.text}</span>
            </li>
        </#if>
        </#list>
        </ul>
    </div>
    <#recover>
    <!-- Breadcrumb load failure -->
    </#attempt>

    Once you add this component it will override the default Community breadcrumb (this version matches and is backwards compatible with the out of the box Lithium breadcrumb component just with additional markup around it to support SEO).

     

    Search Engines can take a while to pick up on the change but you should after a few weeks start to notice instead of the URL to the topic in question appearing below your search result it'll show the path in the community in a friendly manner which reflects the desired outcome mentioned in the first post.

     

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    9 years ago

    Thanks for sharing RobertT - I like the iterative approach to the ideal version of this breadcrumb optimization. Now let's get it incorporated into the Lithium base ;)