When your Next.js Site Reports: Title tag Missing

I got an unexpected message from the Ahrefs website monitoring for one of my pages deployed using the Next.js + Tailwind template:

Title tag missing or empty: 4 URLs

I remember fixing all the tags a while ago, so I was quite puzzled.

In dev, everything looked fine, and it took me a while to uncover what was going on.

So I thought I share what I found here in case it helps someone facing the same issue.

What happened in my case is that I added a variable to the title tag declaration in the next/head component:

Previously:

<title>Frequently Asked Questions</title>

Now:

<title>Frequently Asked Questions - {appConfig.brand.title}</title>

This for some reasons resulted in Next.js, when doing a static export (output: 'export'), leaving the title blank.

The easiest way to see this is to go to your affected site and use the 'Show page source' option of your web browser.

Thankfully, there is an easy fix.

Fix by using template literals:

<title>{`Frequently Asked Questions - ${appConfig.brand.title}`}</title>

With this fix, the title tag for my site again contained the correct value.

Not sure why this is how it is – but I'm sure there is a good reason 🤔

And hoped this saved you some time!

If so, why not stop by my totally free Starter Project Builder Goldstack and consider it for your next project using Next.js 🤗