Breadcrumb customization for SEO

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!

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>

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.

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.

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