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"

 

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

  • 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)
        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.