Forum Discussion

Claudius's avatar
10 months ago

How to add Breadcrumb Structured Data markup

So you want to add Breadcrumb Structured Data markup to your Khoros Community Classic to potentially allow richer search result presentation with added context of where a content piece sits within your structure? 

That's more easy than you thought.

Create a new custom component called common.widget.breadcrumb@override - The @override makes this component replace Khoros core breadcrumb component, so you don't even need to update any layouts including breadcrumb currently. Then drop the following Freemarker code:

<#attempt>
<#assign depth = 0 /> 
<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>
	<#assign depth++ /> 
	<#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>
			 <meta itemprop="position" content="${depth}" />
		</li>
		<li class="${crumb.separatorCss}" aria-hidden="true">
			 <span class="separator">${page.content.nav.breadcrumb.seperator}</span>
		</li>
	<#else>
		<#if (page.name == "PostPage" || page.name == "ReplyPage" || page.name == "SearchPage" || page.name == "PrivateNotesPage" || page.name == "ForumTopicPage")>
        <li class="${crumb.wrapperCss}">
          	<#outputformat "HTML">
			<span class="lia-link-navigation child-thread lia-link-disabled" itemprop="name">${crumb.text?no_esc}</span>
      		</#outputformat>
		</li>
        </#if>
	</#if>
	</#list>
	</ul>
</div>
<#recover>
<!-- Breadcrumb load failure -->
	<@delegate/>
</#attempt>

And that's it! Validate your new enrichment a few days after deploying in Google Search Console.

One comment on the if statement with the list of pages in line 17: Depending on your page layout where the page title is displayed super prominently next to the breadcrumb you might not always have the page title be the last element in the breadcrumb. If you want the page title to be part of the breadcrumb simply add the page.name to this list of pages.

As always: Please share back any feedback and improvements you made. Enjoy!  

No RepliesBe the first to reply