Breadcrumbs

Tuesday, 6 August 2024

Many years ago, when I was a bright eyed university student, I really enjoyed writing essays. All the research I had to do, then all the planning I did to structure the essay, then writing it all out at 1 AM the morning it was due, was all fun to me. Stressful, but fun.

And though I don't write essays at all these days, one thing I did learn from my experience was the importance of letting your audience know where you are going, and where you have been. A great introduction will outline the content. As the reader progresses, they will be reminded of previous paragraphs, and will be directed to the next by the text itself. I think this part of essay writing is so critical (and it's why I spent so much time planning my writing before smashing it out).

Web scrapers are the same, funnily enough. That's why I've implemented breadcrumbs in the footer of this blog. Not only do these make the website more accessible to humans, but also improves the ability of bots to scrape and index the page.

Breadcrumbs can be implemented as structure data, such as JSON-LD, or they can be implemented as part of the HTML code. I prefer the latter since it's also accessible to the actual people who visit the site.

How I implemented breadcrumbs in 11ty

There is a navigation plugin for 11ty, but it required more front matter data than I could be bothered implementing at the moment. Perhaps, if the content of this blog expands in variety, I may go back and use it, but for now, I devised my own solution:

    
    {% if page.url == '/' %}
    {% elseif '/posts' in page.url %}
        <span class="caret">›</span>
        <a href="/posts/">Posts</a>
        <span class="caret">›</span>
        <a href="{{ page.url }}">{{ title }}</a>
    {% else %}
        <span class="caret">›</span>
        <a href="{{ page.url }}">{{ title }}</a>
    {% endif %}

I just check what page it is when building using the URL structure (page.url) - the home page gets nothing, blog posts get extra crumbs, and the other pages just get one crumb. For my simple bog, it works as intended.

In the future, if I want to customise the breadcrumbs e.g. there is a page that the typical user path to the page is diferent to the URL structure, then I could add something to the front matter of that page and update my code to work with it.

To learn more about breadcrumbs read: How to add breadcumbs | Google Search Central Documentation