What is Open Graph Preview & Tester?
Preview how your URL looks when shared on Facebook, X, LinkedIn, Slack & Discord. Fetch real OG tags and fix missing open graph metadata instantly.
OG Preview runs entirely in your browser using JavaScript (browser). Your data never leaves your device.
Free Open Graph Preview & Tester
See exactly how your link will appear when shared on Facebook, X/Twitter, LinkedIn, Slack, Discord, and iMessage — before you share it. Enter any URL to fetch its Open Graph and Twitter Card metadata server-side, then view side-by-side platform mockups styled to match each platform's actual link card appearance. A "Missing tags" checklist flags absent og:image, og:title, og:description, twitter:card, and twitter:image. No signup, no extension needed.
Frequently Asked Questions
What is Open Graph?+
Open Graph is a protocol originally created by Facebook that lets you control how your web page looks when shared on social media. By adding <meta property="og:title">, <meta property="og:description">, and <meta property="og:image"> tags to your HTML head, you tell Facebook, LinkedIn, Slack, and other platforms what title, description, and image to display in the link preview card.
What is a Twitter Card?+
Twitter Cards (now X Cards) are a set of meta tags similar to Open Graph but specific to X/Twitter. The key tags are twitter:card (which sets the card type — summary, summary_large_image, app, or player), twitter:title, twitter:description, and twitter:image. X checks for twitter:* tags first, and falls back to og:* tags if they are absent, so in practice you often only need Open Graph tags.
Why do different platforms show different previews for the same URL?+
Each platform has its own cache, image cropping rules, and card layout. Facebook and LinkedIn have their own scrapers and cache previews for hours or days. X uses Twitter's card crawler. Slack and Discord fetch cards in real time. Image aspect ratios vary — Facebook prefers 1.91:1, X prefers 2:1, LinkedIn prefers 1.91:1, and Slack/Discord display smaller thumbnails. This tool shows the expected appearance on each platform using their actual layout rules.
What is the recommended og:image size?+
The universally safe Open Graph image size is 1200×630 pixels (a 1.91:1 ratio). This renders correctly on Facebook, LinkedIn, and most other platforms. For X/Twitter with twitter:card set to "summary_large_image", a 1200×600 pixel image (2:1 ratio) works best. Always use an absolute URL (https://...) for og:image — relative paths are not supported.
How do I fix missing OG tags?+
Add the missing tags to your HTML <head> section. The minimum required tags are: <meta property="og:title">, <meta property="og:description">, <meta property="og:image">, and <meta property="og:url">. For Twitter, add <meta name="twitter:card" content="summary_large_image">. In Next.js, use the Metadata API with openGraph and twitter fields. In WordPress, use the Yoast SEO plugin's Social tab.
Why is my social preview cached and how do I force a refresh?+
Social platforms cache link previews to improve performance. Facebook and LinkedIn cache for 24–72 hours. To force a refresh: use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn's Post Inspector (linkedin.com/post-inspector), or X's Card Validator. After updating your OG tags and deploying, run each platform's debugger to scrape the fresh metadata.
Do Slack and Discord use Open Graph tags?+
Yes. Both Slack and Discord use Open Graph tags to generate link previews when you paste a URL into a conversation. Slack uses og:title, og:description, og:image, and og:site_name. Discord similarly reads og:title, og:description, and og:image. Both platforms also respect twitter:card and related tags. If your page is missing OG tags, both Slack and Discord will show a plain text link with no preview.
You might also like
Browse all 9 Marketing & SEO tools →Meta Description Generator
Generate SEO-optimized meta descriptions that boost click-through rate
Title Tag Generator
Generate SEO title tags with pixel-width preview — see exactly how they look in Google
SERP Snippet Preview
Preview exactly how your page looks in Google search results
Open Graph Tags: The Complete Guide
Open Graph protocol is a set of meta tags that control how your webpage appears when shared on social media platforms. Created by Facebook in 2010, the protocol has been adopted by LinkedIn, Twitter (now X), Slack, Discord, iMessage, and virtually every platform that generates link preview cards. Without Open Graph tags, platforms fall back to guessing — often picking the wrong title, a random image, or showing no image at all.
The five essential Open Graph tags
The minimum set of OG tags every page should have is: og:title (the headline shown in the preview card), og:description (the summary text under the title), og:image (the preview image — must be an absolute https:// URL), og:url (the canonical URL of the page), and og:type (typically “website” or “article”). Without these five, social platforms will either show a generic link with no visual or make unpredictable guesses about your content.
og:image specifications for each platform
Each platform has different image size recommendations. For maximum compatibility, use a 1200×630 pixel image (1.91:1 ratio) — this renders cleanly on Facebook, LinkedIn, and most other platforms. Twitter's “summary_large_image” card type works best with a 1200×600 pixel image (2:1). The minimum recommended size is 600×315 pixels — images smaller than this will not display on many platforms. Always use an absolute HTTPS URL for og:image; relative paths like /images/og.jpg will not work.
Twitter Cards vs Open Graph
Twitter Cards are X's own metadata system using twitter:* meta tags. X checks for twitter:card, twitter:title, twitter:description, and twitter:image first — but falls back to og:* tags if the twitter:* versions are absent. In practice, this means you can often omit twitter:* tags entirely if you have complete og:* tags, though adding <meta name="twitter:card" content="summary_large_image"> explicitly ensures X uses the large image format rather than the small thumbnail format.
How to implement Open Graph in Next.js
In Next.js 13+ App Router, use the Metadata API to set OG tags programmatically. In your page.tsx, export a metadata object with an openGraph field containing title, description, images, and url. For dynamic pages, export generateMetadata() to fetch data and build the metadata object at request time. This approach is type-safe, supports dynamic values, and automatically handles the <head> tag placement — no need to manually add meta tags.