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