About OpenGraph Image Debugger

Validate OpenGraph meta tags and preview how URLs appear when shared. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Verifying social previews before launching a marketing page
• Debugging why shared links show broken images on Slack
• QA-testing OpenGraph tags across multiple social platforms
• Ensuring blog posts display rich previews when shared on LinkedIn

Tips

• Paste any URL to preview its Twitter and Facebook cards
• Check for missing og:image dimensions that cause cropping
• Validate that og:title stays under 60 characters for best display

Fun Facts

• The OpenGraph protocol was introduced by Facebook in 2010 at their f8 developer conference, turning any web page into a 'rich object' in a social graph.
• Twitter Cards launched in 2012 as Twitter's own metadata standard, but most sites now include both OG and Twitter meta tags for full coverage.
• LinkedIn truncates og:title at 120 characters and og:description at 150, while Facebook allows up to 95 characters for titles in feed.

FAQ

Why wouldn't my OG image show?

Common reasons: relative URL instead of absolute, wrong dimensions (<200×200 fails on some), image not publicly accessible, or Facebook/Twitter cached the old version.

Does it force a cache refresh?

Can't from browser — use Facebook's Sharing Debugger (developers.facebook.com) or Twitter's Card Validator (cards-dev.twitter.com) to force-refresh their caches.

What's the minimum image size?

1200×630 for Facebook/LinkedIn (1.91:1). 1200×675 for Twitter (16:9). Smaller images get upscaled and look bad.

What if my image is dynamically generated?

OG images from Next.js's `opengraph-image.tsx` or similar work fine. Just ensure the URL is absolute and the endpoint is publicly cacheable.