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 though. 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 }}{% if addBrandToTitle %} | Simon Cox{% endif %}</title>
This picks up the title data in 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.
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 it doesn't matter if the are they 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 I can see what's going on if when return to the page, and set up a conditional in the 11ty template:
<h1>{% if h1 %}{{h1}}{% else %}{{ title }}{% endif %}</h1>
{{ content | safe }}
If there is a h1 as a frontmatter data field it will be input into the h1 tag or else if there isn't one then it defaults to 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!
Previous short: Creating Cloudflare redirects
