Skip to main content
All fixes

SEO, schema, meta tags

Fix Missing Open Graph Tags: Add og:title, og:description, og:image

Without Open Graph tags, social platforms scrape the page and pick a random image. Add og:title, og:description, og:image, and og:url to control link previews.

What's happening

Open Graph (OG) is a metadata protocol Facebook published in 2010 and now used by every major chat and social platform: Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Bluesky, and Mastodon all parse OG tags to render link previews. The tags live in as elements.

Twitter (X) uses its own Twitter Card protocol but falls back to OG tags when Twitter-specific ones are missing. So a complete OG implementation gives you good previews on every major platform with one set of tags. The minimum viable set is og:title, og:description, og:image, og:url, and og:type.

Without OG tags, platforms guess: they grab the, the meta description, and the first reasonable they find on the page (often a logo or a tracking pixel). The result is generic, off-brand previews that significantly hurt CTR on shared links.

Why it matters

Social CTR collapses. Studies consistently show posts with rich link previews (large image, branded copy, clear value prop) outperform fallback previews by 2-3x on engagement. Without OG tags you ship the worst version of every shared link.

Brand recognition disappears in chat. When a user pastes your URL into Slack or Discord, the preview is the brand handshake. A page with no OG image renders as a small text-only card that no one notices in a busy channel.

Programmatic SEO and content marketing efforts get throttled. If you publish 100 articles per month and none have OG tags, every social distribution channel under-performs by default. The fix has compounding leverage.

Common causes

  • Framework's metadata API does not emit OG tags by default.
  • The CMS has separate fields for SEO meta and OG meta and only the SEO half was filled.
  • Programmatic pages do not derive OG tags from the entity data.
  • Engineering team treated OG as a marketing concern and skipped it during initial build.
  • OG tags only set client-side via JavaScript, so social crawlers (Facebook, Slack) miss them since they do not run JS.
  • A migration removed OG fields from the data model.

Detect this on your site

Run a quick scan with the OG Checker. The tool surfaces this exact issue with the records and context needed to apply the fix below.

Open OG Checker

How to fix it

  1. 1

    Audit current OG coverage

    Crawl the site and check for og:title, og:description, og:image, og:url, and og:type on every indexable URL. The OG Checker also previews how each URL renders on Facebook, LinkedIn, and Slack.

  2. 2

    Add the minimum viable OG set

    Every page needs og:title (matches or paraphrases ), og:description (matches or paraphrases meta description), og:image (1200x630 PNG/JPG, under 8MB), og:url (canonical URL), and og:type ('website' for landing pages, 'article' for blog posts).

  3. 3

    Generate per-page OG images

    For articles, use a server-side OG image generator (Vercel OG, Cloudinary, Bannerbear) that templates the headline + brand into a 1200x630 PNG at request time. For static pages, design a per-page image manually.

  4. 4

    Emit OG tags in SSR HTML

    Social crawlers do not execute JavaScript. OG tags must be present in the initial HTML response. If your framework sets them client-side, switch to server-rendered metadata (Next.js generateMetadata, Astro layouts, etc).

  5. 5

    Validate previews per platform

    Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn's Post Inspector, and the Twitter/X Card Validator. Each surfaces parsing errors and lets you re-scrape after fixing.

  6. 6

    Set Twitter Cards explicitly

    Add twitter:card=summary_large_image, twitter:title, twitter:description, twitter:image. Twitter's parser prefers Twitter-specific tags over OG fallbacks. summary_large_image is the format with the big preview image.

Example

<head>
  <meta property="og:title" content="Best Espresso Machines Under $500" />
  <meta property="og:description" content="Compare 12 espresso machines on extraction temperature, tank size, and warranty." />
  <meta property="og:image" content="https://example.com/og/espresso-roundup.png" />
  <meta property="og:url" content="https://example.com/espresso-machines-under-500" />
  <meta property="og:type" content="article" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Best Espresso Machines Under $500" />
  <meta name="twitter:description" content="Compare 12 espresso machines on extraction temperature, tank size, and warranty." />
  <meta name="twitter:image" content="https://example.com/og/espresso-roundup.png" />
</head>

Complete OG + Twitter Card metadata block

Frequently asked

No OG tags are not a direct ranking factor. They control link previews on social platforms and chat apps which affects social CTR and traffic — both of which can indirectly impact rankings via engagement signals.

1200x630 pixels with a 1.91:1 aspect ratio is the standard. Facebook and LinkedIn render this size cleanly. Smaller images (under 600 pixels wide) render as tiny thumbnails. Maximum file size is 8 MB.

Yes but per-page OG images dramatically outperform a single brand image. Generated OG images that include the article headline lift social CTR by 30-60% in most A/B tests we have seen.

Related fixes

SEO, schema, meta tags

Fix Missing og:image: Add a 1200x630 Preview Image

SEO, schema, meta tags

Fix og:image Too Small: Use 1200x630 for Full-Width Previews

SEO, schema, meta tags

Fix Missing Twitter Card Tags: Add summary_large_image

SEO, schema, meta tags

Fix Missing Meta Description: Write One Per Indexable Page