How to fix title too short on Gatsby

Steps for Gatsby

1. Identify every page component (e.g. src/pages/.jsx, src/templates/.jsx) whose <title> is too short — run a quick audit with your browser DevTools or a crawl tool to list them.
2. Use Gatsby's built-in Head API (Gatsby 4+) — export a named `Head` function from the same page/template file. If you are on Gatsby 3 or earlier, use `react-helmet` via the `gatsby-plugin-react-helmet` package instead.
3. Craft a descriptive title string that is 50–60 characters: include the primary keyword, a value differentiator (e.g. 'Free Shipping', 'Official Store'), and the brand name, separated by a pipe or dash.
4. Pass dynamic values (product name, category name, etc.) from the page's `data` prop (GraphQL query result) into the title so every page gets a unique, keyword-rich string rather than a hard-coded fallback.
5. Add a 50–60 char `<meta name='description'>` in the same Head export so Google has a complete snippet to display alongside the title.
6. Run `gatsby build && gatsby serve` and verify the rendered `<title>` in View Source — confirm the character count is between 50 and 60.

What is title too short?

Every page on your store has a title tag — a short line of text that appears as the blue clickable headline in Google search results and as the tab label in a browser. When that title is too short (under about 30 characters), it typically means it's vague, generic, or missing key details like your product name, brand, or category. A title like "Hats" or "Shop Now" is technically valid HTML, but it tells neither Google nor shoppers what makes your page worth clicking. The sweet spot is roughly 30–60 characters: long enough to be descriptive, short enough to display without being cut off.

Your page title is one of the strongest on-page signals Google uses to understand and rank a page — a weak title means you could rank lower for the very terms your customers are searching. In search results, the title is the first thing a shopper reads before clicking; a short, uninformative title gets skipped for a competitor's more compelling one, directly costing you organic traffic and sales. Google may also rewrite an unhelpfully short title with its own text pulled from your page, which you can't control and which may not represent your product accurately. Fixing thin titles is a quick, high-leverage change that can improve both your rankings and your click-through rate.

See the complete Title too short guide for every platform and the full background.