How to fix missing og description on Remix

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

Steps for 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.
Official Remix documentation ↗

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.

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.

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

Not sure if your Remix store has this?

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

Scan my site free

Fix missing og description on another platform