← Back to Blog

Open Graph Tags: Fix Broken Social Media Previews Once and For All

·6 min read

You share a link on Facebook, LinkedIn, or Twitter — and the preview looks completely wrong. Wrong image, missing title, or just a blank gray box. It happens because your page is missing Open Graph tags, or the ones you have are broken.

Here's exactly how Open Graph works, what tags you need, and how to fix the most common problems.

What Are Open Graph Tags?

Open Graph (OG) tags are meta tags in your page's <head> section that tell social platforms what to display when someone shares your URL. Facebook created the protocol in 2010, and now every major platform uses it — LinkedIn, Discord, Slack, iMessage, WhatsApp, and more.

Without OG tags, platforms try to guess what to show. They'll grab whatever image and text they can find, which usually looks terrible. With the right tags, you control exactly what appears.

Here are the four required tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page" />
<meta property="og:image" content="https://yoursite.com/images/share-image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

That's the minimum. Add those four, and your link previews will work on every platform.

Twitter Cards: The Other Half

Twitter (X) uses its own set of meta tags alongside Open Graph. The good news: Twitter falls back to OG tags when its own tags are missing. So if you already have og:title and og:description, Twitter will use those.

The tags you should add for Twitter specifically:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description" />
<meta name="twitter:image" content="https://yoursite.com/images/share-image.jpg" />

The twitter:card value matters most. Your two options:

  • summary — small square image with text to the right. Good for articles and general pages.
  • summary_large_image — full-width image above the text. Better for visual content, product pages, and anything where the image sells the click.

Most sites should default to summary_large_image. It takes up more space in the feed and gets more clicks.

The Image Is Where Most People Get It Wrong

The og:image tag causes 90% of broken previews. Here's what trips people up:

Use an absolute URL. Not /images/hero.jpg — the full https://yoursite.com/images/hero.jpg. Social platforms fetch your image from their own servers. They can't resolve relative paths.

Size matters. Facebook recommends 1200×630 pixels. LinkedIn works best at 1200×627. Twitter wants at least 800×418 for summary_large_image. The safe universal size is 1200×630 — it works everywhere.

File size limit. Keep images under 5MB. Facebook will timeout on anything larger. Aim for 200-500KB — compress with WebP or optimized JPEG.

HTTPS required. Most platforms won't load images over plain HTTP anymore. If your image URL starts with http://, that's probably why the preview is blank.

No SVGs. Social platforms don't render SVG images in previews. Use PNG or JPEG.

Quick Checklist for og:image

  1. Absolute URL with https://
  2. 1200×630 pixels
  3. Under 5MB (ideally under 500KB)
  4. PNG or JPEG format
  5. Actually accessible (not behind auth, not 404ing)

Common Problems and Fixes

"My preview shows the old image/title"

Social platforms cache aggressively. Facebook caches your OG data for up to 30 days. After updating your tags, you need to force a re-scrape:

  • Facebook: Paste your URL into the Sharing Debugger and click "Scrape Again"
  • Twitter: Use the Card Validator to trigger a fresh fetch
  • LinkedIn: Add ?v=2 (or any query param) to the end of your URL when sharing — it treats it as a new URL

Or use our Open Graph Preview Tool to check what platforms will see before you share.

"The preview works on Facebook but not Twitter"

Check if your og:image is over 5MB. Twitter has a stricter timeout than Facebook. Also verify the image dimensions — Twitter's minimum for summary_large_image is 300×157, but under 800×418 it might fall back to summary (the small card).

"No preview shows at all"

Three things to check:

  1. View your page source. The OG tags must be in the initial HTML, not injected by JavaScript. Social platform crawlers don't execute JS — they parse raw HTML only.
  2. Check for duplicate tags. Two og:image tags will confuse some platforms. Keep exactly one of each.
  3. Server-side rendering. If you're using React, Vue, or another SPA framework, make sure the meta tags are rendered on the server. Client-side-only meta tags are invisible to social crawlers.

"Preview works on desktop but not mobile"

Some apps (especially LinkedIn and Slack) have different caching behavior on mobile. Clear the app cache or wait 24 hours. The tags themselves work the same — it's a caching issue.

Beyond the Basics: Extra OG Tags Worth Adding

Once you have the four required tags working, these are worth adding:

<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

og:type helps platforms categorize your content. Common values: website (default for homepages), article (blog posts), product (e-commerce). For articles, you can also add:

<meta property="article:published_time" content="2026-03-05T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/about" />

These don't affect the visual preview much, but they feed into how platforms index and recommend your content.

How to Test Your Tags

Don't share a link and hope for the best. Test first:

  1. Open Graph Preview Tool — See exactly how your URL will appear on Facebook, Twitter, and LinkedIn before sharing. Catches missing tags, broken images, and truncated descriptions instantly.
  2. View page source — Ctrl+U in your browser, search for og:. Make sure the tags are there and the values look right.
  3. Platform debuggers — Facebook's Sharing Debugger and Twitter's Card Validator show you exactly what their crawlers see.

Your meta tags and Open Graph tags work together. The <title> and <meta name="description"> handle Google search results, while og:title and og:description handle social platforms. They can be different — and often should be, since what works in a search result (keyword-focused) isn't always what works in a social feed (curiosity-driven).

Framework-Specific Setup

Next.js

Next.js 14+ makes this straightforward with the Metadata API:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Description here',
    images: ['https://yoursite.com/og-image.jpg'],
  },
  twitter: {
    card: 'summary_large_image',
  },
};

WordPress

Use a plugin like Yoast SEO or Rank Math — they add OG tags automatically and let you customize per-page. If you don't want a plugin, add the tags manually in your theme's header.php or use wp_head action.

Static HTML

Just add the meta tags directly in your <head>. No framework magic needed — it's just HTML.

The 2-Minute Version

  1. Add the four required OG tags: og:title, og:description, og:image, og:url
  2. Add twitter:card set to summary_large_image
  3. Use a 1200×630 image, JPEG or PNG, under 500KB, served over HTTPS
  4. Test with the Open Graph Preview Tool before sharing
  5. After updating tags, force a re-scrape on each platform

That's it. Five minutes of work, and every link you share will look exactly how you want it to.

Ready to try it?

Preview how your URL will look when shared on Facebook, Twitter, and LinkedIn. Generate Open Graph and Twitter Card meta tags instantly.

👁️ Open Graph Preview Tool — Free Online Tool

Get notified about new SEO tools

More free tools coming soon — keyword research, sitemap generator, and more.