What is Open Graph Preview?

Open Graph Preview shows exactly how your URL will appear when shared on Facebook, Twitter, LinkedIn, and other social platforms. Enter your OG meta tag values and see a live mockup of the social share card before publishing.

The preview reads your og:title, og:description, og:image, og:site_name, and og:url and mocks up the actual layout each network uses. Facebook clips titles around 88 characters, Twitter's large image card needs a 2:1 ratio, and LinkedIn trims descriptions to about 200 characters before adding an ellipsis.

How to use

1. Enter your Open Graph tags: title, description, image URL, site name, and URL.
2. See real-time previews for Google Search, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord, and Pinterest card formats side by side.
3. Adjust your title length, description, and image dimensions until the preview looks perfect on all platforms.

When to use

• Before publishing a blog post or marketing page that will be shared on social.
• Auditing an existing site whose share previews look broken or show a blank image.
• Designing a new OG image template to confirm the title doesn't overlap the visual.

Result

Before sharing your new blog post on LinkedIn, check that the OG image isn't cropped awkwardly and the description reads well within Twitter's 200-character card limit.

FAQ

What size should my Open Graph image be?

1200x630 pixels is the safe default. Facebook and LinkedIn render it at 1.91:1, and Twitter's summary_large_image card uses the same ratio. Keep file size under 5 MB and use JPEG or PNG.

Why doesn't Facebook update my preview after I change the meta tags?

Facebook caches OG data for about 24 hours. Paste your URL into Meta's Sharing Debugger and click 'Scrape Again' to force a re-fetch. The same trick works for LinkedIn via its Post Inspector.

Do I need separate twitter:* tags if I already have og:* tags?

Twitter falls back to og:title, og:description, and og:image when twitter:* tags are missing, so a basic page works without them. Add twitter:card and twitter:image only when you want a different headline or image specifically for Twitter.

What's the difference between summary and summary_large_image on Twitter?

summary shows a small square thumbnail beside the text — good for news links and articles. summary_large_image puts a wide image above the text and works better for visual content like landing pages or videos.

Can I use an animated GIF as my og:image?

Networks accept the GIF but render only the first frame. Use a static PNG or JPEG with the key information visible in that single frame, or convert the loop into a short MP4 and reference it through og:video instead.

Related Tools