Search tools...
SEO Tools

OG Preview Tester Guide: Preview Open Graph Tags for Social Media (2026)

Test how your website link appears when shared on Twitter/X, Facebook, LinkedIn, and WhatsApp — fix OG tags before publishing.

8 min readUpdated April 9, 2026SEO, Social Media, Developer, Meta Tags

An OG preview tester shows you exactly how your webpage link will appear when shared on social media — the title, description, and image that Twitter/X, Facebook, LinkedIn, and WhatsApp display. If your OG tags are missing or misconfigured, your links look broken, generic, or unprofessional.

This guide explains what Open Graph tags are, the essential tags you must include, how to debug common issues, and how to optimize your previews for maximum click-through rates.

Free Tool

Preview Your Social Media Cards

Enter your OG tags and see exactly how your link will appear on Twitter, Facebook, LinkedIn, and WhatsApp.

Open OG Preview Tester ->

What Are Open Graph (OG) Tags?

Open Graph tags are HTML meta tags in your page's <head> that control how your link appears when shared on social media. Without them, platforms try to guess the title and image — usually getting it wrong.

Essential OG Tags

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Brief description of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
TagPurposeCharacter Limit
og:titleHeadline shown on the card60-70 characters
og:descriptionSummary text below the title155-160 characters
og:imagePreview image (most important)1200x630px recommended
og:urlCanonical URL of the pageFull URL
og:typeContent type (website, article)website or article
og:image Is Everything

Links with an OG image get 2-3x more clicks than links without one. This is the single most impactful tag. Always include a high-quality image.

Twitter/X Card Tags

Twitter/X uses its own set of meta tags in addition to (or instead of) Open Graph:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your Description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Twitter Card Types

Card TypeAppearanceWhen to Use
summarySmall square image + textArticles, blog posts
summary_large_imageLarge banner image + textLanding pages, featured content
playerEmbedded video/audioVideo/podcast pages
Use summary_large_image

For most pages, summary_large_image gets the most engagement. The large image dominates the feed and drives clicks. Use "summary" only for pages where the text content matters more than the visual.

OG Image Specifications

The OG image is the most visible element of your social share. Get it right:

PlatformRecommended SizeMin SizeAspect RatioMax File Size
Facebook1200 x 630 px600 x 315 px1.91:18 MB
Twitter/X1200 x 628 px300 x 157 px1.91:15 MB
LinkedIn1200 x 627 px200 x 200 px1.91:15 MB
WhatsApp1200 x 630 px300 x 200 px1.91:15 MB

Best practice: Use 1200 x 630 pixels for all platforms. This single size works across Facebook, Twitter, LinkedIn, and WhatsApp.

  • Use JPEG for photos (smaller file size) and PNG for graphics/text
  • Keep important content in the center — platforms may crop edges
  • Include your brand logo or domain name on the image
  • Use high-contrast text if adding text overlay to the image

Common OG Tag Issues and Fixes

These are the most frequent problems developers face with OG tags:

IssueCauseFix
No image showingog:image missing or relative URLUse absolute URL (https://...)
Wrong imageSocial platform cached old imagePurge cache (see below)
Image cropped badlyWrong aspect ratioUse 1200x630px, center content
Title too long, truncatedog:title exceeds 70 charsKeep under 60-65 characters
Description missingog:description not setAdd meta tag with 155 chars
WhatsApp not updatingAggressive cachingChange og:image URL (add ?v=2)
Cache Purging

Facebook: developers.facebook.com/tools/debug (click "Scrape Again"). Twitter: cards-dev.twitter.com/validator. LinkedIn: linkedin.com/post-inspector. WhatsApp: no official tool — change the image URL to force refresh.

Complete OG Tag Checklist

Use this checklist before publishing any page:

  • og:title — Under 65 chars, compelling, includes primary keyword
  • og:description — Under 155 chars, summarizes the page value, includes CTA verb
  • og:image — 1200x630px, absolute URL, under 5MB, descriptive alt text
  • og:url — Canonical URL of the page
  • og:type — "website" for homepages, "article" for blog posts
  • twitter:card — "summary_large_image" for most pages
  • twitter:title — Can differ from og:title for Twitter-specific messaging
  • twitter:image — Can differ from og:image if needed

Run the OG Preview Tester after setting these tags to verify everything renders correctly across all platforms.

How to Use the Tool (Step by Step)

  1. 1

    Enter Your OG Tags

    Paste your og:title, og:description, og:image URL, and other meta tag values into the tool.

  2. 2

    Preview Across Platforms

    See how your link will appear on Twitter/X, Facebook, LinkedIn, and WhatsApp — all at once.

  3. 3

    Identify Issues

    Check for truncated titles, missing images, wrong aspect ratios, or blank descriptions.

  4. 4

    Fix and Re-Test

    Update your OG tags in your HTML, then re-test to confirm the fix.

Frequently Asked Questions

What are Open Graph tags?+

HTML meta tags that control how your link appears when shared on social media. They define the title, description, and image shown on the social card.

What is the ideal OG image size?+

1200 x 630 pixels with a 1.91:1 aspect ratio. This size works across Facebook, Twitter, LinkedIn, and WhatsApp. Keep the file under 5MB.

Why is my OG image not showing?+

Most common causes: (1) og:image URL is relative instead of absolute, (2) image URL returns a 404, (3) social platform cached an old version. Use absolute URLs and purge the platform cache.

How do I update a cached OG image on Facebook?+

Go to developers.facebook.com/tools/debug, enter your URL, and click "Scrape Again". For WhatsApp, append a version query parameter to the image URL (e.g., ?v=2).

Do I need both OG tags and Twitter cards?+

Twitter falls back to OG tags if twitter: tags are missing. But for best results, include both — Twitter card tags let you customize the Twitter preview independently.

What is the difference between og:type website and article?+

Use "website" for homepages and landing pages. Use "article" for blog posts and news articles — it enables additional tags like article:published_time and article:author.

How long should og:title and og:description be?+

og:title: under 65 characters. og:description: under 155 characters. Both get truncated beyond these limits on most platforms.

Is this OG preview tester free and private?+

Yes. All preview rendering happens in your browser. Your URLs and meta tag data are not sent to any server.

Free — No Signup Required

Preview Your Social Media Cards

Enter your OG tags and see exactly how your link will appear on Twitter, Facebook, LinkedIn, and WhatsApp.

Open OG Preview Tester ->

Related Guides