Forum Discussion

GuillaumeV's avatar
GuillaumeV
Mentor
12 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"  ...
GuillaumeV's avatar
GuillaumeV
Mentor
12 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.