How to fix missing title on Next.js (Headless)

Steps for Next.js (Headless)

1. Decide which router you are using: App Router (app/) uses `generateMetadata` or a static `metadata` export; Pages Router (pages/) uses the `<Head>` component from `next/head`.
2. For the App Router, open (or create) every `page.tsx` / `layout.tsx` that is missing a title. Export a `generateMetadata` function (for dynamic titles) or a `metadata` object (for static titles). The title must be 30–60 characters, unique per page, and descriptive.
3. Use the `template` field in a root `layout.tsx` `metadata` export so that every child page automatically appends your brand name — this prevents accidentally leaving a page untitled.
4. For the Pages Router, import `Head` from `next/head` inside each page component and render `<title>` inside it. For dynamic pages (e.g. `pages/products/[slug].tsx`) derive the title from fetched data in `getStaticProps` / `getServerSideProps`.
5. Run `next build` and check the build output or use a crawler (e.g. `npx source-map-explorer` or browser DevTools) to confirm every route's `<title>` is present, unique, and within the 30–60 character limit.
6. Add a CI lint rule or a Playwright/Cypress smoke test that asserts `document.title` is non-empty on every critical route to prevent regressions.

What is missing title?

A title tag is a short line of HTML — placed inside the `<head>` section of a page — that tells search engines and browsers what the page is about. It appears as the clickable blue headline in Google search results and as the label on a browser tab. Every page on your store should have exactly one title tag that accurately describes its specific content (e.g. "Men's Leather Wallets – BrandName" for a category page, or "Slim Bifold Leather Wallet | BrandName" for a product page). A missing title tag means the page has none at all.

The title tag is one of the strongest on-page SEO signals Google uses to understand and rank a page. Pages with no title tag are likely to rank lower, and Google will often auto-generate a title from random on-page text — which can look spammy or irrelevant in search results, destroying click-through rates. Lower rankings and poor-looking search snippets directly reduce organic traffic, which means fewer visitors and fewer sales. A well-crafted title tag also influences whether a shopper clicks your result over a competitor's, making it a direct conversion factor. Every day a page lacks a title tag is a day it underperforms in search.

See the complete Missing title guide for every platform and the full background.