Missing og description

Moderate effort

Found on 78% of audited stores.

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

What it is

The og:description tag is a small piece of HTML code placed in the `<head>` of your page that tells social networks — Facebook, Pinterest, LinkedIn, X (Twitter), WhatsApp, and others — what text to show beneath your page title when someone shares your link. It is part of the Open Graph protocol, a standard created so websites can control exactly how their content appears in social previews. Without it, social platforms will either grab random text from your page or show nothing at all, resulting in ugly, unhelpful link previews. It is separate from (but related to) your regular HTML meta description.

Why it matters

When a customer or influencer shares your product or collection page on social media, the preview card is often the first impression a potential buyer sees — before they even visit your store. A missing og:description means the platform guesses what to show, often pulling in irrelevant text like navigation labels, price fragments, or nothing at all, which dramatically reduces click-through rates. Rich, controlled social previews directly drive referral traffic and conversions, especially for product launches, promotions, and influencer marketing. There is also an indirect SEO benefit: higher engagement signals from social traffic can reinforce the authority of your pages in search rankings.

How to fix it

  1. Identify every page type that lacks an og:description — home page, product pages, collection/category pages, blog posts, and landing pages.
  2. Write a concise, compelling description of 100–160 characters that summarises the page's unique value proposition, including a key benefit or keyword naturally.
  3. Add the tag inside the <head> element of each page template: <meta property="og:description" content="Your description here.">
  4. For dynamic pages (products, categories), use your platform's templating variables to auto-populate the og:description from the product description or a custom meta field, so every page gets a unique value automatically.
  5. Also add or verify the companion tags og:title, og:image, og:url, and og:type on the same pages to complete a full Open Graph block.
  6. Validate your implementation using Facebook's Sharing Debugger (developers.facebook.com/tools/debug) or LinkedIn's Post Inspector to confirm the tag is read correctly and the preview looks as intended.

Fix it on your platform

Pick your platform for the exact steps.

How to fix missing og description on Shopify
  1. In your Shopify Admin, go to Online Store → Themes → click Actions → Edit code.
  2. Open theme/layout/theme.liquid (or your active layout file).
  3. Locate the <head> section and find any existing Open Graph block (search for 'og:').
  4. If your theme already has an OG block, ensure it includes: <meta property="og:description" content="{{ page_description | escape }}">. Shopify's page_description variable pulls from the 'Description' field of each page, product, or collection.
  5. If there is no OG block, add the full block (see code snippet below) just before </head>.
  6. For product pages specifically, open sections/product-template.liquid (or product-form.liquid in Dawn) and verify the same og:description tag is present in any schema/head overrides.
  7. Save the file, then test a product URL in Facebook's Sharing Debugger.
Full Shopify guide →Official Shopify docs ↗
How to fix missing og description on Shopify Plus
  1. Follow the same Shopify steps above; Shopify Plus uses the same theme architecture.
  2. If you use a custom storefront (Hydrogen/Headless), add og:description in the <Meta> component of each route's loader — see the Headless / Custom entry below.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix missing og description on WooCommerce
  1. Install the free Yoast SEO plugin (Plugins → Add New → search 'Yoast SEO') or RankMath SEO if not already installed.
  2. For Yoast: go to each product's edit screen, scroll to the Yoast SEO meta box, click the 'Social' tab (Facebook icon), and enter your og:description in the 'Facebook description' field. For a site-wide template, go to Yoast SEO → Search Appearance → Content Types → Products and set a dynamic template using variables like %%excerpt%%.
  3. For RankMath: edit a product, find the RankMath panel → Edit Snippet → Social tab, and fill in the description. Set bulk defaults under RankMath → Titles & Meta → Products.
  4. Without a plugin, open your child theme's header.php (Appearance → Theme File Editor) and add the tag manually inside <head>, using <?php echo esc_attr(get_the_excerpt()); ?> as the content source.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix missing og description on BigCommerce
  1. Go to Storefront → Script Manager and create a new script scoped to 'All Pages' and placed in the <head>.
  2. Alternatively, edit your Stencil theme locally: open templates/layout/base.html (or product.html for product pages) and add <meta property="og:description" content="{{model.description | strip_html | truncate: 160}}"> inside <head>.
  3. For the native Open Graph support built into Stencil, open config.json in your theme and verify 'open_graph' features are enabled; BigCommerce auto-generates some OG tags, but og:description may need explicit template output.
  4. Upload the updated theme via the BigCommerce Theme Editor or Stencil CLI (stencil push), then validate with Facebook Sharing Debugger.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix missing og description on Wix
  1. Open your site in the Wix Editor.
  2. For standard pages: click the page in the Pages menu → the three-dot menu → SEO Basics. Scroll down to the 'Social Share' section and fill in the 'Description' field — Wix uses this as og:description.
  3. For dynamic product pages in Wix Stores: go to the Store Manager → Products → edit a product → scroll to 'SEO & Social Media' (or 'Advanced SEO') → fill in the social description field.
  4. For Wix Studio advanced users: use Velo (Dev Mode) to set custom meta tags programmatically with wixSeo.setMetaTags() in the page's onReady handler.
  5. Publish your site and validate the tag using Facebook Sharing Debugger.
Full Wix guide →Official Wix docs ↗
How to fix missing og description on Wix Studio
  1. In Wix Studio, select a page in the left panel and open its SEO settings via the page menu.
  2. Under 'Social Share', enter a custom description — this becomes the og:description.
  3. For dynamic collection pages, use the dataset binding or Velo code (wixSeo.setMetaTags) to set og:description dynamically from item fields.
  4. Publish and test with Facebook's Sharing Debugger.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix missing og description on Squarespace
  1. For standard pages: go to Pages → hover the page → click the gear icon (Settings) → SEO tab → fill in 'SEO Description'. Squarespace uses this value as og:description.
  2. For product pages: open the product in the Commerce panel → click the gear icon → SEO → enter the SEO Description.
  3. For blog posts: open the post editor → click the gear icon → SEO → enter the SEO Description.
  4. If you need finer control, go to Settings → Advanced → Code Injection → Header and add the tag manually (note: this applies site-wide and cannot be page-specific from this location).
  5. Validate by sharing a page URL on Facebook or using the Sharing Debugger.
Full Squarespace guide →Official Squarespace docs ↗
How to fix missing og description on Webflow
  1. Open your project in the Webflow Designer.
  2. For static pages: click the page in the Pages panel → the settings cog → scroll to 'Open Graph Settings' → fill in the 'OG Description' field.
  3. For CMS Collection pages (products, blog posts): open the Collection settings → go to the template page → open Page Settings → bind the OG Description field to a CMS field (e.g., the product's short description or excerpt field) using the dynamic binding toggle.
  4. Publish the site and verify with Facebook's Sharing Debugger or LinkedIn Post Inspector.
Full Webflow guide →Official Webflow docs ↗
How to fix missing og description on Adobe Commerce (Magento)
  1. In the Admin panel, go to Stores → Configuration → Catalog → Catalog → Product Fields Auto-generation.
  2. For per-product OG tags, install an SEO extension such as Mageplaza SEO or Mageworx SEO Suite, which adds Open Graph fields to each product and category edit screen.
  3. Without an extension, edit your theme's layout XML: create (or modify) Magento_Catalog/layout/catalog_product_view.xml in your custom theme, add a block for custom head meta, and in the corresponding .phtml template output <meta property="og:description" content="<?= $escaper->escapeHtmlAttr($product->getShortDescription()) ?>">.
  4. Clear cache (System → Cache Management → Flush Magento Cache) and verify with Facebook Sharing Debugger.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix missing og description on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the theme file structure and extension approach are identical.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix missing og description on PrestaShop
  1. Install the free 'SEO Expert' or 'Facebook Open Graph Tags' module from PrestaShop Addons, or use a comprehensive SEO module.
  2. Alternatively, edit your active theme's header.tpl file (located under themes/[your-theme]/templates/_partials/head.tpl) and add: <meta property="og:description" content="{$page.meta.description|escape:'html':'UTF-8'}">.
  3. Clear the Smarty cache in Advanced Parameters → Performance → Clear Cache.
  4. Verify with Facebook Sharing Debugger.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix missing og description on Headless / Custom (I build in code)
  1. In a Next.js app (App Router): in your page.tsx, export a generateMetadata() function that returns { openGraph: { description: 'Your description' } }.
  2. In a Next.js app (Pages Router): use the next/head component and add <meta property="og:description" content={description} /> inside <Head>.
  3. In a Nuxt.js app: use useHead() or useSeoMeta() composable with the ogDescription key.
  4. In an Astro site: use the <meta property="og:description"> tag inside your base layout's <head>, passing the value as a prop from each page's frontmatter.
  5. Ensure your CMS or data layer provides a dedicated 'og_description' or 'social_description' field per content type so editors can customise it independently of the body copy.
  6. Validate with Facebook Sharing Debugger after deployment.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix missing og description on OpenCart
  1. Admin → Catalog → Products → select a product → click the 'SEO' tab (or 'Data' tab depending on version) → fill in 'Meta Tag Description'.
  2. OpenCart's default Storefront themes render og:description from this value. Check catalog/view/theme/[your-theme]/template/common/head.twig (or head.tpl in older versions) for the og:description meta tag.
  3. If missing from the template, add: {% if description %}<meta property="og:description" content="{{ description }}">{% endif %} inside the <head> block.
  4. For categories: Catalog → Categories → select category → fill in 'Meta Tag Description'.
  5. Install an SEO extension from the OpenCart marketplace (search 'Open Graph') for a no-code solution.
  6. Validate with Facebook Sharing Debugger after saving.
Full OpenCart guide →Official OpenCart docs ↗
How to fix missing og description on Next.js
  1. Decide which router you use: App Router (app/) uses `generateMetadata` / a static `metadata` export; Pages Router (pages/) uses the `<Head>` component from `next/head`. Apply the matching fix below.
  2. App Router — open every page file (e.g. `app/page.tsx`, `app/products/[slug]/page.tsx`) and export a `generateMetadata` async function that reads the page-specific description from your CMS/API and returns it under `openGraph.description`. Fall back to a site-wide default stored in a shared constant so no page is ever left empty.
  3. Pages Router — import `Head` from `next/head` in every page component (e.g. `pages/index.tsx`, `pages/products/[slug].tsx`) and add `<meta property='og:description' content={description} />` inside it, sourcing the value from `getStaticProps` / `getServerSideProps`.
  4. Create a shared helper `lib/seo.ts` that exports a `buildOgDescription(raw?: string): string` function. It trims HTML tags, truncates to ≤ 155 characters, and returns the site-wide fallback when `raw` is falsy — import this everywhere so the format is consistent.
  5. Add `NEXT_PUBLIC_SITE_DESCRIPTION` to your `.env.local` (and your CI/CD environment variables) as the site-wide fallback description; reference it inside the shared helper.
  6. After deploying, validate each key URL with the [Open Graph debugger](https://developers.facebook.com/tools/debug/) or `curl -s <url> | grep og:description` to confirm the tag is present and populated.
Full Next.js guide →Official Next.js docs ↗
How to fix missing og description on Nuxt.js
  1. Set a site-wide fallback og:description in nuxt.config.ts under app.head.meta so every page has a baseline Open Graph description even before page-level overrides are applied.
  2. On each page component (e.g. pages/index.vue, pages/products/[slug].vue), call useSeoMeta() inside <script setup> and pass ogDescription with a value derived from the page's dynamic data (product description, category blurb, CMS field, etc.).
  3. Fetch the page-specific description from your headless backend (e.g. Shopify Storefront API, Contentful, Sanity) before passing it to useSeoMeta(), using useAsyncData() or useFetch() so the tag is available during SSR.
  4. For a shared layout pattern, create a composable (e.g. composables/useSeoDefaults.ts) that accepts a description string, applies truncation to ≤ 160 characters, and calls useSeoMeta() — then reuse it across every page.
  5. Verify the tag is rendered server-side by running `nuxi build && nuxi preview` and inspecting the raw HTML with `curl` or browser DevTools → View Page Source; confirm <meta property="og:description" …> is present in the initial HTML payload.
  6. Optionally audit all routes with a Lighthouse CI or a crawl script to assert no page returns a missing og:description, and add it to your CI pipeline.
Full Nuxt.js guide →Official Nuxt.js docs ↗
How to fix missing og description on Gatsby
  1. Create (or open) a reusable SEO component at `src/components/Seo.jsx`. This component will use Gatsby's built-in Head API (Gatsby 4.19+) to inject tags into `<head>` — no extra library needed.
  2. Accept a `description` prop (plus `title`, `image`, `pathname`) in the component and render an `og:description` `<meta>` tag alongside the standard `description` tag so both are always in sync.
  3. In every page file (e.g. `src/pages/index.jsx`, `src/pages/products/{Product.handle}.jsx`, template files in `src/templates/`) export a named `Head` function that renders `<Seo>` with the page-specific description pulled from your GraphQL page query or CMS data.
  4. For dynamic pages (product, collection, blog templates), wire the `description` prop to the real content field from your GraphQL query — e.g. `data.product.seo.description || data.product.description` — so every URL gets a unique, non-empty value.
  5. Run `gatsby develop` and inspect the HTML source (`view-source:http://localhost:8000/`) or the Elements panel to confirm both `<meta name='description'>` and `<meta property='og:description'>` are present with the correct value on every route.
  6. Optionally add a fallback `siteMetadata.description` in `gatsby-config.js` and fetch it with a `useStaticQuery` hook inside the Seo component so pages that forget to pass a `description` prop never ship an empty tag.
Full Gatsby guide →Official Gatsby docs ↗
How to fix missing og description on Elementor
  1. In your WordPress dashboard, go to Templates → Theme Builder (or Pages, if editing a standalone page) and open the page/template you want to fix in the Elementor editor.
  2. Click the hamburger menu (☰) in the top-left corner of the Elementor editor panel, then select 'Page Settings' (the gear/cog icon at the bottom of the left panel).
  3. In the Page Settings panel, click the 'Social' tab. Locate the 'Description' field under the Open Graph section and type a compelling, accurate summary of the page (aim for 120–160 characters).
  4. If the Social tab or Open Graph fields are not visible, ensure you have an SEO plugin installed (e.g. Yoast SEO or Rank Math) — Elementor surfaces OG fields through these plugins. Open the plugin's meta box (below the editor or in its sidebar panel), navigate to its 'Social' or 'Facebook/Open Graph' tab, and enter the og:description there.
  5. For site-wide coverage via a Theme Builder template (e.g. Single Post or Page template), use a dynamic tag in the og:description field: click the dynamic icon (the ⚡ symbol next to the Description field) and select 'Post Excerpt' or 'Post Custom Field' to auto-populate the tag for every page using that template.
  6. Click 'Update' (or 'Publish') to save your changes, then validate the tag is present by pasting the page URL into the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) and confirming that 'og:description' appears in the scraped tags.
Full Elementor guide →Official Elementor docs ↗
How to fix missing og description on Next.js (Headless)
  1. Identify whether your project uses the App Router (`app/`) or Pages Router (`pages/`). The fix differs slightly between them — both approaches are covered in the snippet below.
  2. App Router: Open (or create) the `generateMetadata` export in every `app/**/page.tsx` (and `app/layout.tsx` for site-wide defaults). Add an `openGraph.description` field that is populated from your page/product data fetched at build or request time.
  3. Pages Router: In every `pages/*/.tsx` file, import `next/head` and add a `<meta property='og:description' content={description} />` tag inside the `<Head>` component, using the page's fetched data for the value.
  4. Create a shared `getSeoDescription(text: string, maxLen = 160)` utility in `lib/seo.ts` that trims raw copy to a safe length, strips HTML tags, and falls back to a site-wide default — then call it from every page's metadata logic.
  5. For dynamic routes (e.g. `app/products/[slug]/page.tsx`), fetch the product/collection description inside `generateMetadata` and pass it through `getSeoDescription` before assigning it to `openGraph.description`.
  6. Run `npx next build` and inspect the rendered HTML (`<meta property='og:description'>`) or use the Open Graph debugger (https://developers.facebook.com/tools/debug/) to confirm the tag appears on every page type.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix missing og description on Remix
  1. In your Remix project, locate the route file(s) missing the tag (e.g. app/routes/products.$handle.tsx, app/routes/index.tsx, etc.). Every route that renders a full page needs its own meta export.
  2. Add or update the `meta` export function in each route file. Use the `MetaFunction` type and return an array of descriptor objects — include one with `{ property: 'og:description', content: '...' }`. Example: ```ts import type { MetaFunction } from '@remix-run/node'; export const meta: MetaFunction<typeof loader> = ({ data }) => [ { title: data?.product?.title ?? 'Store' }, { name: 'description', content: data?.product?.description ?? '' }, { property: 'og:description', content: data?.product?.description ?? '' }, ]; ```
  3. Pull the description text from your `loader` via the `data` argument so the content is dynamic and page-specific (e.g. product description, collection description, or a static string for fixed pages like /about). Never hard-code the same string across all routes.
  4. For a site-wide fallback, update app/root.tsx's `meta` export to include a default `og:description` so that any route without its own meta export still emits the tag.
  5. Run `npm run dev` (or `yarn dev`) and inspect the `<head>` of each page type in browser DevTools to confirm `<meta property="og:description" content="...">` is present and contains the correct, page-specific text.
  6. Deploy the changes and validate using the LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) or Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) to confirm social platforms read the new tag correctly.
Full Remix guide →Official Remix docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find missing og description — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Missing og description?

The og:description tag is a small piece of HTML code placed in the `<head>` of your page that tells social networks — Facebook, Pinterest, LinkedIn, X (Twitter), WhatsApp, and others — what text to show beneath your page title when someone shares your link. It is part of the Open Graph protocol, a standard created so websites can control exactly how their content appears in social previews. Without it, social platforms will either grab random text from your page or show nothing at all, resulting in ugly, unhelpful link previews. It is separate from (but related to) your regular HTML meta description.

Why does missing og description matter?

When a customer or influencer shares your product or collection page on social media, the preview card is often the first impression a potential buyer sees — before they even visit your store. A missing og:description means the platform guesses what to show, often pulling in irrelevant text like navigation labels, price fragments, or nothing at all, which dramatically reduces click-through rates. Rich, controlled social previews directly drive referral traffic and conversions, especially for product launches, promotions, and influencer marketing. There is also an indirect SEO benefit: higher engagement signals from social traffic can reinforce the authority of your pages in search rankings.

How do I fix missing og description?

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

Authoritative references

Related SEO issues