DevBolt
Processed in your browser. Your data never leaves your device.

How do I preview Open Graph and Twitter Card meta tags?

Enter a URL or paste HTML containing meta tags to see how your page will look when shared on Facebook, Twitter/X, LinkedIn, and Slack. The tool validates required tags and flags missing or incorrect Open Graph and Twitter Card properties. Everything runs in your browser.

Preview Open Graph tags
Input
URL: https://devbolt.dev/tools/json-formatter
Output
og:title: JSON Formatter & Validator
og:description: Format, validate,
  and minify JSON — free, client-side
og:image: /og/json-formatter.png
og:type: website
Twitter card: summary_large_image
← Back to Tools

Open Graph Preview & Debugger

Preview how your links look on Facebook, Twitter/X, LinkedIn, and Slack. Debug missing or invalid meta tags.

Enter a URL to fetch and analyze its Open Graph and meta tags.Ctrl+Enter to analyze

OG

Enter a URL or paste HTML above to preview how your page looks when shared on social media.

Works with Facebook, Twitter/X, LinkedIn, Slack, Discord, and more.

Tips & Best Practices

Pro Tip

Test OG images at 1200x630px — that's the universal sweet spot

Facebook, LinkedIn, Twitter, and Slack all render OG images differently, but 1200x630px works well across all platforms. Keep important text in the center 60% of the image since platforms crop edges differently.

Common Pitfall

OG tags are cached aggressively by social platforms

Facebook and LinkedIn cache OG metadata for days to weeks. Changing your og:image or og:title won't update existing shares. Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to force a cache refresh after updating.

Real-World Example

og:description should be 55-200 characters for best display

Too short and platforms may fall back to page content. Too long and it gets truncated mid-sentence. Write a compelling 2-sentence summary: what the page is + why someone should click. This is your ad copy for social sharing.

Security Note

Sanitize user-generated content in dynamic OG tags

If your OG tags include user-submitted content (like post titles), ensure proper HTML entity encoding. Unescaped quotes or angle brackets in og:title/og:description can break the meta tag structure and enable XSS via social sharing previews.

Frequently Asked Questions

How do I preview my Open Graph tags before sharing?
Enter your page URL or paste the HTML head section into DevBolt's OG Preview tool. It extracts all Open Graph and Twitter Card meta tags and shows how your page will appear when shared on Facebook, Twitter, LinkedIn, and other platforms. The preview displays the title, description, image, and URL exactly as social media crawlers will render them. This lets you catch issues like truncated titles, missing images, or incorrect descriptions before sharing publicly.
Why does my shared link show the wrong image on social media?
Common causes include: the og:image URL is relative instead of absolute (must start with https://), the image is too small (minimum 200x200 for most platforms, recommended 1200x630), the image URL returns a 404 or redirect that the crawler cannot follow, the server blocks social media crawlers via robots.txt, or the platform has cached an old version of your tags. Use DevBolt's OG Preview to verify your tags, then use Facebook's Sharing Debugger or Twitter's Card Validator to clear their cache and re-scrape your page.
What are the recommended Open Graph image dimensions?
The recommended og:image size is 1200x630 pixels (1.91:1 aspect ratio) for optimal display across all major social platforms. Facebook recommends at least 600x315 pixels. Twitter summary_large_image cards use the same 1.91:1 ratio. LinkedIn displays images at a similar aspect ratio. For Twitter summary cards (smaller thumbnails), use 144x144 to 4096x4096 square images. Always include the og:image:width and og:image:height tags to help platforms render images without downloading them first. Keep file size under 5MB.

Related Inspect Tools

rwx

Chmod Calculator

Calculate Unix file permissions with an interactive permission matrix

$..

JSON Path Tester

Test JSONPath expressions against JSON data with real-time evaluation

A11

Color Contrast Checker

Check WCAG 2.1 color contrast ratios for AA and AAA accessibility compliance

JSV

JSON Schema Validator

Validate JSON data against JSON Schema (Draft 07) with detailed error reporting and schema generation