How to fix missing og title on Gatsby

Steps for Gatsby

1. Install or confirm `gatsby-plugin-react-helmet` and `react-helmet` are present, OR use Gatsby's built-in Head API (Gatsby ≥ v4.19) — prefer the Head API as it requires no extra dependencies.
2. For every page component (e.g. `src/pages/index.jsx`, `src/pages/product.jsx`, `src/templates/product-template.jsx`, etc.), export a named `Head` component from the same file. This is the Gatsby Head API entry point.
3. Inside the `Head` export, render a `<meta property='og:title' content={...} />` tag. Pull the title value from the page's `pageContext`, a GraphQL `data` prop, or a site-wide constant — whichever is already used for the HTML `<title>` tag, so both stay in sync.
4. Create (or update) a reusable `src/components/Seo.jsx` component that accepts a `title` prop and renders both `<title>`, `<meta name='title'>`, and `<meta property='og:title'>` together. Export it and use it inside every page's `Head` export to keep the logic DRY.
5. For pages built from GraphQL + `createPage` (templates), ensure the `pageContext` or the page-level GraphQL query already fetches the product/collection/article title, then pass it as the `title` prop to the `<Seo>` component inside `Head`.
6. Validate the fix by running `gatsby build && gatsby serve`, then inspecting the rendered HTML `<head>` for `<meta property="og:title">` — also paste a page URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to confirm the tag is read correctly.

What is missing og title?

The og:title tag is a small piece of HTML code — part of the Open Graph protocol — that tells social networks and messaging apps what title to display when someone shares a link to your store. Without it, platforms like Facebook, LinkedIn, Pinterest, and WhatsApp either guess a title (often pulling something ugly or irrelevant) or show no title at all. It lives in the <head> section of your page and looks like: <meta property="og:title" content="Your Page Title Here" />. It does not affect your visible page content — it only controls how your link previews appear when shared.

Every time a customer, blogger, or influencer shares a link to your store or product page, the og:title is the headline of that shared post — it's what makes someone stop scrolling and click. Missing or broken og:title tags mean your shared links look unfinished, unprofessional, or just plain wrong, which directly reduces click-through rates from social media. For ecommerce stores, social sharing is a significant free-traffic channel: a product shared on Facebook or Pinterest with a compelling, accurate title can drive meaningful revenue. Additionally, some search tools and third-party indexers use Open Graph data as a secondary signal for content relevance, so having it set correctly supports a consistent, trustworthy brand presence across the web.

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