How to fix missing meta description on Gatsby

Write and add a unique meta description (120–160 characters) to every page that is missing one, so Google can display an accurate, compelling snippet in search results.

Steps for Gatsby

  1. Create a reusable `<Seo>` component at `src/components/Seo.jsx` that uses Gatsby's built-in Head API (Gatsby ≥ 4.19) to inject a `<meta name='description'>` tag. Accept a `description` prop and enforce a 120–160 character window with a runtime warning in development.
  2. Export the `<Seo>` component from every page file (and page template) as a named export called `Head` — Gatsby's Head API requires this exact export name at the *page* level so the tag is server-rendered into the `<head>`.
  3. For static pages (`src/pages/*.jsx`), pass a hard-coded, unique description string directly to the `<Seo>` component via the `Head` export.
  4. For dynamic template pages (`src/templates/*.jsx`) that are built from GraphQL data (products, collections, blog posts, etc.), add a `description` field to the page's `graphql` query (e.g. `product.seo.description || product.description`), receive it in `pageContext` or the query `data` prop, and forward it to the `<Seo>` component in the `Head` export.
  5. Add a `siteMetadata.defaultDescription` fallback in `gatsby-config.js` and query it with `useStaticQuery` inside `<Seo>` so pages that omit the prop still render a non-empty description rather than nothing.
  6. Run `gatsby build && gatsby serve` and inspect the rendered HTML (`view-source:`) to confirm `<meta name='description' content='…'>` appears in the static markup of every page, not just after client-side hydration.
Official Gatsby documentation ↗

What is missing meta description?

A meta description is a short HTML tag placed in the `<head>` of a webpage that summarizes what the page is about. It is not visible on the page itself, but search engines read it and often display it as the two or three lines of grey text shown beneath your page title in Google search results. Think of it as a free 160-character advertisement for every page on your store — it tells shoppers exactly what they'll find before they click.

When a meta description is missing, Google writes one for you by pulling random text from the page — often a navigation label, footer copyright notice, or mid-sentence fragment that makes no sense out of context. A compelling, keyword-rich description written by you can meaningfully increase click-through rate (CTR) from search results, driving more organic traffic to your store without spending a cent more on ads. Higher CTR also sends a positive engagement signal that can lift your rankings over time. For product and category pages especially, a strong description highlighting your unique selling points (free shipping, best price, reviews) is one of the easiest conversion levers you have in SEO.

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

Not sure if your Gatsby store has this?

Run a free SEOLZ scan — we’ll find missing meta description and every other issue across your whole site.

Scan my site free

Fix missing meta description on another platform