Irsah in Designs


Add Breadcrumb Rich Snippets to concrete5 Websites




In this tutorial, we will use concrete5 breadcrumbs block by Denis Vlasov of SmartWebProjects aka swp_breadcrumbs block for your rich snippets breadcrumb search results in SERP's. It is a simple procedure which you can add/edit your current concrete5 web pages global area, and install add on SWP breadcrumb block from concrete5 Marketplace.

As you know, concrete5 gives us the ability to overwrite existing files/folders for your concrete5 installations. It gives us that edge in making minor to major modifications to our website's web pages with ease.

Why breadcrumbs rich snippets? Well, you can find what is breadcrumbs and it's ability in search result pages here. In our case, additional links generated in web search result pages (SERP's) could be a plus point for your concrete5 web pages, so why not have  a go!

Tutorial Installing Breadcrumb Rich Snippet for concrete5 Themes/Websites

SWP Breadcrumbs Block

A simple yet workable add-on by SimpleWebProject and can be downloaded/install for free from concrete5 Marketplace Add On section. Download and install the breadcrumb block here from concrete5 Marketplace/Add-On.

Assuming you have access to your host/server via FTP and you have a Global Area aka SiteWide Setting Area for your web pages, you can continue through. If you have installed the block from Marketplace, you can look through your domain folders/files which will look like this:

publichtml(your-domain)/packages/swp_breadcrumbs/blocks/swp_breadcrumbs/

> Copy the

view.php

file in that folder.

> Make a new folder in your blocks folder like so:-

publichtml(your-domain)/blocks/swp_breadcrumbs/templates/breadcrumbs_snippets/

> Paste the

view.php

file in your new block folder and will look like this:-

publichtml(your-domain)/blocks/swp_breadcrumbs/templates/breadcrumbs_snippets/view.php

> Now go to the copied

view.php

file, open to edit in your favourite editor ie. MS WordPad, Crimson Editor etc. You can also download the same file to your PC, which ever suits your workflow best.

> Copy the below set of PHP code into the file and overwrite existing PHP code:-

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>

<div class="swp-breadcrumbs">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title"><a href="<?php echo $homePageLink; ?>" itemprop="url"><?php echo SITE; ?></a></span>
</span>
<?php
$sublevels = $this->controller->getSubLevels();
if (!empty($sublevels)) {
foreach($sublevels as $p) {
echo ' <span class="delim" swp-breadcrumbs>'. htmlspecialchars($delimiter) . '</span>'; echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
if ($p["link"] !== false) {
echo '<span class="swp-breadcrumbs-level" itemprop="title"><a href="'. $p["link"] .'" itemprop="url">'; } else {
echo '<strong></span>';
}
echo $p["title"]; if ($p["link"] !== false) {
echo '</a></span>';
} else {
echo '</strong></span>';
} echo '</span>';
}
}
?>
</div>

> Click save and your custom template codes is finished.

Concrete5 Front End - Your Web Pages

The great thiing about concrete5, you do not have to go to your dashboard for editing your web pages. If you have instlalled correcty, and we know you would, now go to any web pages which you want to install your breadcrumbs.

Search engines can detect your breadcrumbs rich snippets anywhere in your body of your webpages, headers and footers. Either way, while signed up for editing your concrete5 webpage:-

> Click Edit and find the global area aka SiteWide "Your-Page-Area" in edit mode.

> Click the area prefered > Add Block > find Breadcrumbs block

> Fill in the desired delimeter ie "/" or ">" which ever you prefer.

Click save and automatically a breadcrumb trail will be generated in your SiteWide "Your-Page-Area".

Now for the breadcrumb rich snippets > while still in edit mode > click above the breadcrumb area and go to > Templates > (Drop Down Menu) > Breadcrumb Snippets > click Save.

Again, automatically concrete5 breadcrumbs block was overwritten and uses your new custom template for your breadcrumbs with rich snippets codes.

Now style to your website's layout ie. padding, margin, color etc. using > Click Breadcrumbs area > Design.

Checking Breadcrumbs modification with Google Rich Snippet Tool

If you have not verified your website with Google Webmaster Tools, please do so. If you have already open an account, which is free though, you can test your breadcrumbs at Rich Snippet Testing Tool.

Copy a page URL from your website, preferably sub-pages under a page in your website and paste the URL at the Preview box section > click Preview.

Google will generate a excerpt for that web page URL and you will notice a trailing breadcrumb trail for your website underneath your search engine result (in green), which means success.

Note: In order for your breadcrumb to be generated on all your website web pages, it is essential to add your modified breadcrumb template view block in a "sitewide setting area" aka "global area" in your website pages.

You can opt for breadcrumb layering as explained here in the general mark up HTML code using Microdata or RDFa format. This tutorial will give you a head start in implementing the secondary breadcrumb trail in search engines, depending on the complexity of your website web pages files.

Happy modifications and making a brand new breadcrumbs link trails for your concrete5 website pages in search engine results.