How to fix title too long on Gatsby

Steps for Gatsby

1. Identify every page/template file that sets a <title> — check both the modern Gatsby Head API exports (export function Head()) and any legacy react-helmet <Helmet> components across src/pages/, src/templates/, and shared layout/SEO components (e.g. src/components/Seo.jsx).
2. Create (or update) a shared utility helper — e.g. src/utils/truncateTitle.js — that enforces a ≤60-character hard limit, preserving the most meaningful part of the title (typically the product/page name) and appending a short brand suffix only when space allows.
3. In every page/template that uses the Gatsby Head API, import the helper and pass the truncated string to the <title> tag and the og:title <meta> tag inside the exported Head() function.
4. For any remaining legacy react-helmet usage, apply the same helper inside the <Helmet> component's title prop and the og:title meta content prop.
5. For programmatic pages (gatsby-node.js / gatsby-config.js), ensure the pageContext or GraphQL data feeding titles is also passed through the truncator so SSR-rendered HTML is already correct at build time.
6. Run gatsby build && gatsby serve and use browser DevTools → Elements to verify <title> is ≤60 chars on product, collection, blog, and home pages; also confirm og:title matches.

What is title too long?

Every web page has a title tag — a short line of HTML that tells search engines and browsers what the page is about. It's the large blue (or purple) clickable headline you see in Google search results. When your title is too long, Google cuts it off mid-sentence and adds "…" at the end. Google's practical display limit is roughly 600 pixels wide, which corresponds to about 50–60 characters in a typical font. Keeping titles within that range ensures shoppers and Google see your full intended message.

A truncated title in search results looks incomplete and unprofessional, which directly reduces click-through rates — and fewer clicks means less organic traffic and revenue, even if you rank well. Google also uses the title as a primary signal for what the page is about; an overstuffed, cut-off title can dilute your target keywords and make it harder to rank for any single term. In some cases, Google will silently rewrite a title it considers too long or spammy, replacing it with text of its own choosing that may not align with your brand or target keywords at all. Fixing title length is a quick win that immediately improves both your rankings and the first impression shoppers have of your store.

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