Concrete5 – Microdata Ready Breadcrumbs

Micro Data Breadcrumbs

HTML5 microdata, put simply, is used to label page content. For example, reviews, events, and even breadcrumbs. Microdata helps search engines better understand page content to deliver more relevant search results for the user.

In this short article, I’ll show you how to bake microdata into breadcrumbs within concrete5.

In this short article, I’ll show you how to bake microdata into breadcrumbs within concrete5.
Looking specifically at breadcrumbs, you’ll see in the image below how breadcrumb microdata adds breadcrumb links to the SERP, making it visually more attractive, driving the potential for a higher click through rate.

The additional information added within the search result from the microdata are called rich snippets. Learn more about microdata and rich snippets.

Examples of Breadcrumbs in Rich Snippets

Creating C5 Microdata Breadcrumbs

    1. Create a new autonav block and templates folder within the route blocks folder of the concrete5 install directory: your site > blocks > autonav > templates. If you are using some form of package, you can add the autonav block within the packages folder: your site > packages > blocks > autonav > templates.
    2. Copy the autonav breadcrumbs.php template that comes with the default concrete5 install.  This can be found within the concrete directory: your site > concrete > blocks > autonav > templates > breadcrumbs.php.  Paste the file into the newly created autonav template folder from step 1.
    3. Rename the newly copied file to breadcrumbs_md.php (md for microdata). Update the PHP code with the breadcrumbs microdata meta data – see below:
<?php defined('C5_EXECUTE') or die("Access Denied.");
$navItems = $controller->getNavItems(true);
echo '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
for ($i = 0; $i < count($navItems); $i++) {
	$ni = $navItems[$i];
	if ($i > 0) {
		echo ' <span class="ccm-autonav-breadcrumb-sep">&gt;</span> ';
	}

	if ($ni->isCurrent) {
		echo $ni->name;
	} else {
		echo '<a itemprop="url" href="' . $ni->url . '" target="' . $ni->target . '"> 
		 <span itemprop="title">' . $ni->name . '</span></a>';
	}
}
echo '</div>';
  1. Within the Concrete5 front-end, create a new autonav block where you would like the breadcrumbs to appear.  Select the new custom template just created within the dropdown: breadcrumbs md

You should now have breadcrumbs full of microdata goodness within Concrete5.

Leave a Reply

Your email address will not be published. Required fields are marked *