09. Breadcrumbs Microdata

DEPRECATED

This Craft CMS 2.x plugin is no longer supported, but it is fully functional, and you may continue to use it as you see fit. The license also allows you to fork it and make changes as needed for legacy support reasons.

The Craft CMS 3.x version of this plugin can be found here: craft-seomatic and can also be installed via the Craft Plugin Store in the Craft CP.

Breadcrumbs Microdata

SEOmatic will automatically generate Breadcrumbs JSON-LD microdata that is used by Google to display breadcrumbs on the SERP rich cards.

By default, SEOmatic will generate breadcrumbs automatically for Home (the name is configurable via breadcrumbsHomeName in config.json), and every element (category, entry, product, whatever) that has a URI matches the current URL segments.

Changing Breadcrumbs

If you want to do your own custom breadcrumbs, you can set them yourself in the breadcrumbs array in the seomaticMeta variable like this:

{% set myBreadcrumbs = {
	"Home": "http://nystudio107.dev/",
	"Books": "http://nystudio107.dev/books/",
	"Candide": "http://nystudio107.dev/books/candide",
} %}

{% set seomaticMeta = seomaticMeta | merge({'breadcrumbs': myBreadcrumbs }) %}

{% if seomaticMainEntityOfPage is defined and seomaticMainEntityOfPage.type == "WebPage" %}
    	{% set seomaticMainEntityOfPage = seomaticMainEntityOfPage | merge({'breadcrumbs': myBreadcrumbs }) %}
{% endif %}

Since this is just a Twig array, you can alter it as you see fit, and whatever changes you make will be reflected in the JSON-LD that SEOmatic renders via the {% hook 'seomaticRender' %} Because of the way that Twig handles arrays, you must include every field in the array when doing a set or merge, otherwise the fields you exclude will not exist.

You can change these breadcrumbs variables in your templates that extends your main layout.twig template, and due to the Twig rendering order, when {% hook 'seomaticRender' %} is called, they'll be populated in your rendered SEO Meta tags.

See the section Dynamic Twig SEO Meta for more information on how to manipulate SEOmatic variables via Twig.

SEOmatic also automatically strips HTML/PHP tags from the variables, and translates HTML entities to ensure that they are properly encoded.

Displaying Breadcrumbs on the Frontend

Should you wish to display the breadcrumbs in your front-end templates so that they are visible to the user, you can do that with code like this:

<ul class="crumbs">
    {% for crumbName, crumbUrl in seomaticMeta.breadcrumbs %}
        <li class="crumbs"><a href="{{ crumbUrl }}">{{ crumbName }}</a></li>
    {% endfor %}
</ul>