Forum Discussion

GuillaumeV's avatar
GuillaumeV
Mentor
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"  ...
AdamN's avatar
AdamN
Khoros Oracle

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)
    8 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
      8 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)
        8 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 ;)