Fix Breadcrumbs Markup on Joomla site

breadcrumbs_error_small.png

You may have noticed that Google Search Console recently added a New Structured Data Report for Breadcrumbs in order to allow users to evaluate whether their breadcrumb markup has been implemented correctly.

Twitter lit up with posts and pictures like this one:

{source}<blockquote class=”twitter-tweet”><p lang=”en” dir=”ltr”>Thanks Google Search Console, I think I got your point ๐Ÿ˜๐Ÿ™‹๐Ÿปโ€โ™€๏ธ๐Ÿ˜… <a href=”https://t.co/xndAFcclWy”>pic.twitter.com/xndAFcclWy</a></p>&mdash; Aleyda Solis (@aleyda) <a href=”https://twitter.com/aleyda/status/1175032969414828032?ref_src=twsrc%5Etfw”>September 20, 2019</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>{/source}

The default Joomla breadcrumbs do not put a link on the last breadcrumb, and that is causing the validation issue. The dilemma is that you do not want a link that simply goes to itself or that confuses users.

The solution is to go to template code and make an override for mod_breadcrumbs
You can accomplish this in less than 5 minutes by following the video at the bottom

Around line 56, find

<?php if (($key !== $penult_item_key) || $show_last) : ?>       <span class="divider">           <?php echo $separator; ?>       </span> <?php endif; ?> 

And replace with

<?php if (($key !== $penult_item_key) || $show_last) : ?>      <link itemprop="item" href="<?php echo $item->link; ?>">       <span class="divider">           <?php echo $separator; ?>       </span> <?php endif; ?> 

Around line 65, find

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">         <span itemprop="name">       <?php echo $item->name; ?>         </span>         <meta itemprop="position" content="<?php echo $key + 1; ?>"> </li> 

And replace with

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active"> <link itemprop="item" href="<?php echo $item->link; ?>">         <span itemprop="name">       <?php echo $item->name; ?>         </span>         <meta itemprop="position" content="<?php echo $key + 1; ?>"> </li> 

Here is a short video of how to create the template overrides:

{source}<iframe src=”https://share.getcloudapp.com/rRuErrKL?embed=true” width=”575″ height=”400″ style=”border:none” frameborder=”0″ allowtransparency=”true” allowfullscreen=”true”>              </iframe>{/source}

About YellowWebMonkey

YellowWebMonkey Web design offers reliable website design, SEO and digital marketing services for Joomla, WordPress and Shopify sites. We strive to be a one-stop shop for all your web needs.

Recent Posts

Follow Us