How to Test Open Graph Tags — OG Image Preview Tool Guide

What is Open Graph?

Open Graph (OG) is a protocol created by Facebook that controls how web pages appear when shared on social media. When you share a URL on Facebook, LinkedIn, Slack, or WhatsApp, the platform reads OG tags to display a preview card.

Why your social shares might look wrong

If you've ever shared a link and seen the wrong image, a missing image, or incorrect text, it's because:

• Missing og:image tag
• Image wrong dimensions (not 1200×630px)
• Title or description too long
• HTTPS vs HTTP mismatch on image URL
• Cached old data from previous version

OG image specifications by platform

Use 1200×630px as your default — it works well everywhere.

How to test your OG tags for free

1. Go to OG Image Preview
2. Enter your page URL or paste the HTML source
3. View previews for Facebook, Twitter, and LinkedIn simultaneously
4. Check the issues checklist for missing or problematic tags
5. Fix issues and test again

Twitter Cards vs Open Graph

Twitter/X uses its own twitter: meta tags, but falls back to OG tags if Twitter tags are absent. For best results, include both:

<!-- Open Graph (works on most platforms) -->
<meta property="og:title" content="Page Title">
<meta property="og:image" content="https://yoursite.com/og.jpg">

<!-- Twitter/X specific -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:image" content="https://yoursite.com/og.jpg">

summary_large_image shows a full-width image card — much more clickable than the default small summary card.

Next.js Open Graph setup

In Next.js 14+ App Router, use the metadata export to generate OG tags automatically:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    images: [{ url: '/og/page.png', width: 1200, height: 630 }],
  },
}

Common OG issues and fixes

Missing og:image

Add to your HTML head:

<meta property="og:image" content="https://yoursite.com/og-image.jpg">

Image not showing (HTTPS required)

Make sure your og:image URL starts with https://, not http://

Wrong image appearing

Social platforms cache OG data. Force refresh using:

• Facebook: developers.facebook.com/tools/debug
• Twitter: cards-dev.twitter.com/validator
• LinkedIn: linkedin.com/post-inspector