Made a helper that generates a breadcrumb 🙂 where the tags are used for categories the page. Following the instruction to google https://developers.google.com/search/docs/advanced/structured-data/breadcrumb and generates one breadcrumb per tag.
module.exports = function (Handlebars) {
return {
// Helper that generates breadcrumb based on the tags.
breadcrumb: function(post) {
let jsonLDObjectArray = [];
// breadcrumb header
let breadcrumbObject = {};
breadcrumbObject['@context'] = 'https://schema.org';
breadcrumbObject['@type'] = 'BreadcrumbList';
breadcrumbObject['itemListElement'] = [];
// this, the post page
let thisPage = {};
thisPage['@type'] = 'ListItem';
thisPage['position'] = 2;
thisPage['name'] = post.title;
thisPage['item'] = post.url;
if (post.tags.length > 0) {
// generate one breadcrumb for each tag
for (tagIndex in post.tags) {
// the tag page
let tagPage = {};
tagPage['@type'] = 'ListItem';
tagPage['position'] = 1;
tagPage['name'] = post.tags[tagIndex].name;
tagPage['item'] = post.tags[tagIndex].url;
let breadcrumbObjectCopy = JSON.parse(JSON.stringify(breadcrumbObject));
breadcrumbObjectCopy['itemListElement'].push(tagPage);
breadcrumbObjectCopy['itemListElement'].push(thisPage);
jsonLDObjectArray.push(breadcrumbObjectCopy);
}
} else {
// if no tag put only this post in the breadcrumb.
thisPage['position'] = 1;
breadcrumbObject['itemListElement'].push(thisPage);
jsonLDObjectArray.push(breadcrumbObject);
}
var output = "<script type='application/ld+json'>";
output += JSON.stringify(jsonLDObjectArray);
output += "</script>";
return new Handlebars.SafeString(output);
}
};
};
//////////////////////////////////////////////////////////////////////
// in header.hbs
<head>
{{#is 'post'}}
{{#post}}
{{breadcrumb this}}
{{/post}}
{{/is}}
</head>
// in config.json
"renderer": {
...
"includeHandlebarsInHelpers": true,
//////////// Output::::
// post with no tag.
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Need some images for testing",
"item": "file:////Users/t/Publii/sites/publiitest/preview/need-some-images-for-testing.html"
}]
}]
</script>
// post with two tags.
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Background",
"item": "file:////Users/t/Publii/sites/publiitest/preview/tags/background/index.html"
}, {
"@type": "ListItem",
"position": 2,
"name": "Fixed background image",
"item": "file:////Users/t/Publii/sites/publiitest/preview/fixed-background-image.html"
}]
}, {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Git",
"item": "file:////Users/t/Publii/sites/publiitest/preview/tags/git/index.html"
}, {
"@type": "ListItem",
"position": 2,
"name": "Fixed background image",
"item": "file:////Users/t/Publii/sites/publiitest/preview/fixed-background-image.html"
}]
}]
</script>
Have not found out how to get the menu data, and if there is possible to make a helper that makes a breadcrumbs based on the menu hierarchy.
If someone want to use this or edit it, then just do it 🙂
Edit: and this is also based on https://github.com/GetPublii/Publii/blob/master/app/back-end/modules/render-html/handlebars/helpers/json-ld.js 🙂
