Sanity check/review? Breadcrumbs

Developer help
1

Here’s what I’ve done for breadcrumbs based on the hints from @DavidDarnes

post.hbs and page.hbs includes a {{> breadcrumbs.hbs}}

breadcrumbs.hbs:

<nav class="breadcrumb">
    <ul class="breadcrumbs">
        <li class="breadcrumb-item"><a href="/">Home</a><span>&gt;</span></li>
        {{#primary_tag}}
            <li class="breadcrumb-item"><a href="{{url}}">{{name}}</a><span>&gt;</span></li>
        {{/primary_tag}}
        <li class="breadcrumb-item breadcrumb-item-current"><a href="{{url}}">{{title}}</a></li>
    </ul>
</nav>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
      {{#if primary_tag}}
        {
            "@type": "ListItem",
            "position": 1,
            "name": "{{primary_tag.name}}",
            "item": "{{primary_tag.url}}"
        },
      {{else}}
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Posts",
            "item": "{{@site.url}}"
        },      
      {{/if}}
        {
            "@type": "ListItem",
            "position": 2,
            "name": "{{title}}",
            "item": "{{url absolute="true"}}"            
        }
      ]
    }
</script>

I only use the primary_tag as I have a routes.yaml entry specifically for primary tag.
The end result being something like: “Home > Blogs > Today I Made Breadcrumbs”

How’s it look? Is there a better way to generate the ld+json? I don’t know where the other schema objects come from in Ghost. What generates those?

2

This looks good to me! However you’ll need to replace the existing {{ghost_head}} helper so you can replace the JSON LD metadata.

1 Like
3

I wish I knew how to implement this as well but I’m so confused, especially cause I don’t have that much experience but is this inserted into a new file called breadcrumbs.hbs? And then you reference that in this file? I wish someone would do a simple tutorial about how to setup breadcrumbs on Ghost haha

1 Like
4

Same here. I’m very confused and no idea where this code is supposed to go :confounded: