How to fix meta description too long on Gatsby

Steps for Gatsby

1. Locate every page/template file that sets a meta description — common locations are `src/pages/.jsx`, `src/templates/.jsx`, and a shared `src/components/Seo.jsx` (or `Seo.js`) component.
2. Create or update a `truncateDescription` utility function (e.g. in `src/utils/seo.js`) that hard-caps the description at 155 characters on the last full word, keeping it within the 150–160 Google display window.
3. In your shared `<Seo>` component (Gatsby Head API export or `react-helmet`), pass every description through `truncateDescription` before injecting it into the `<meta name='description'>` tag.
4. If you use the *Gatsby Head API* (Gatsby ≥ 4.19), export a named `Head` function from each page/template and apply the utility there. If you still use `react-helmet`, apply it inside the `<Helmet>` block.
5. For pages driven by GraphQL (e.g. product/collection templates), ensure the raw `description` field pulled from your CMS/commerce API is also passed through the same utility so truncation is consistent across all dynamic routes.
6. Run `gatsby build && gatsby serve` and verify with a `<meta>` inspector or the Google Rich Results Test that no description exceeds 160 characters.

What is meta description too long?

A meta description is the short paragraph of text that appears beneath your page title in Google search results (the "snippet"). It is written in your page's HTML and is meant to entice searchers to click your link. Google recommends keeping it under roughly 160 characters — including spaces and punctuation. When it is longer than that, Google truncates it mid-sentence and replaces the end with an ellipsis (…), which can make your listing look incomplete or unprofessional. Note that Google may also rewrite your description entirely if it decides another passage on the page is more relevant, but providing a well-crafted, correctly-sized description gives you the best chance of controlling what shoppers see.

Your meta description is your free advertising copy in search results — it is often the deciding factor in whether a shopper clicks your link or a competitor's. A truncated description cuts off your call to action, hides key selling points (such as a store location, a brand name, or a promotion), and signals a lack of attention to detail that can erode trust before the visitor even lands on your site. Pages with compelling, complete meta descriptions consistently achieve higher click-through rates (CTR), and higher CTR sends a positive engagement signal that can reinforce your rankings over time. For multilingual and multibyte character sets (Japanese, Chinese, Korean, Arabic, etc.) the character budget can effectively be even shorter because each character is wider — aim for 70–80 characters to be safe, or test rendered pixel width with Google's Rich Results tools.

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