Having a different title and h1 text using templating in 11ty
11ty templates set up
In my 11ty templates I generally use the same content for the title and the h1 tags. In the frontmatter I always have a title field as the title tag is actually the only required html tag in a html document, did you know that? So it makes sense to have the title tag as a requirement in my frontmatter.
With the h1 headings you can have as many a you like, technically, but I think this can be confusing to both humans and machines when trying to understand a page's content. The argument has long been that if you have a list of articles you can use the h1 tag for the articles title in that list.
My reply to that is that a page with a list of articles should have the article titles as h2s and only one h1 at the top of the page to let the user know what is on the page.
SEO practicalities for title and headings
There is absolutely nothing wrong with having the same title and h1 on a page as far as SEO goes and this is often the easiest to set up as you just repeat the frontmatter title as the h1.
Yes it is potentially not optimal, as having differing titles and h1's can cover more ground. This still will not mean overnight success and stardom for most sites. It could tip the balance in your favour in some cases though.
11ty templates title set up
Here is the title tag in my base template for the site:
<title>{{ title }} | Simon Cox</title>
This picks up the title data from the front matter and adds a pipe and Simon Cox to the end of it for the title. That's not best practice if you are concerned about title length in the search engine results pages - though that's becoming less of an issue these days for other reasons - so you shoudl consider if you need your brand on the end of your titles or not.
Here is my article template for the title and the h1:
<h1>{{ title }}</h1>
{{ content | safe }}
This picks up the title frontmatter data and inserts it into the h1 tag and then the rest of the content I have in the markdown file follows.
Optimising the h1 for seo
So having said that it doesn't matter if the title and the h1 are the same, there are indeed occasions where I don't want exactly the same title and h1 content. My favoured way of approaching this is to add h1 content in the frontmatter, usually the row after the title so that I can see what's going on when I return to the page to fix typos and rewrite the content as I realise my writing can be rubbish at times (like exactly now, to be extra meta about it).
---
title: Alternate main heading and title in 11ty templates
h1: Having a different title and h1 text using templating in 11ty
---
I have set up a conditional in the 11ty article template - note that I use nunjucks for my templates:
<h1>{% if h1 %}{{h1}}{% else %}{{ title }}{% endif %}</h1>
{{ content | safe }}
If there is a h1 frontmatter data entry then it will be input into the h1 tag. If there isn't one then the template defaults to using the title - simple and easy to manage.
This way if I want to add a different h1 then I can add it to the frontmatter, build and deploy.
If you look at the source code of this page you will find that the title and h1 are indeed different!
Next short: Sort ordering for your Fathom Analytics accounts
Previous short: Creating Cloudflare redirects
