Open Graph Preview & Generator
Preview how your page looks when shared on Facebook and Twitter. Generate Open Graph and Twitter Card meta tags with live preview.
<meta property="og:type" content="website" /> <!-- Twitter Card -->
What is Open Graph Preview?
An Open Graph preview tool shows you exactly how your webpage will appear when shared on social media platforms like Facebook, LinkedIn, Twitter, and messaging apps. When someone shares a URL, these platforms read Open Graph meta tags (og:title, og:description, og:image) to generate the link preview card. A compelling preview dramatically increases click-through rates — posts with rich previews get 3-5× more engagement than plain URLs. This tool lets you preview and generate the correct meta tags before deploying.
How It Works
Enter your page's title, description, and image URL. The tool renders previews showing how the link will appear on Facebook, Twitter, and LinkedIn — each platform has slightly different card dimensions and text truncation rules. It also generates the complete set of Open Graph and Twitter Card meta tags ready to paste into your HTML head. You can see how title length, description length, and image aspect ratio affect the final appearance across platforms.
Common Use Cases
- •Previewing how blog posts and articles will appear when shared on social media
- •Optimizing og:image dimensions and content for maximum visual impact in link previews
- •Testing title and description length to ensure they don't get truncated on any platform
- •Generating complete OG and Twitter Card meta tags for new pages before deployment
- •Debugging why shared links show incorrect or missing preview information
- •A/B testing different titles and descriptions to see which generates more compelling previews
Frequently Asked Questions
What are Open Graph tags?▼
Meta tags that control how your page appears when shared on social media platforms like Facebook, Twitter, and LinkedIn.
What image size should I use for social sharing?▼
1200 × 630 pixels, a 1.91:1 ratio, is the safe choice across Facebook, LinkedIn and Twitter/X large cards. Keep the file under about 5 MB, use PNG or JPEG, and avoid putting essential text near the edges since platforms crop differently.
Which Open Graph tags are required?▼
Four carry the preview: `og:title`, `og:description`, `og:image` and `og:url`. Add `og:type` (usually `website` or `article`) and, for images, `og:image:width` and `og:image:height` so the platform can reserve layout space before the image loads.
Do I need separate Twitter Card tags?▼
Not usually. Twitter/X falls back to Open Graph tags when its own are absent, so the only one worth adding explicitly is `twitter:card` to choose between `summary` and `summary_large_image`. Duplicating everything else adds maintenance for no gain.
Why is the old image still showing after I updated the page?▼
Platforms cache aggressively. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-scrape. As a last resort, change the image filename or add a query string, since a new URL sidesteps the cache entirely.
Must og:image be an absolute URL?▼
Yes. Relative paths fail, because the crawler has no page context to resolve them against. Use the full `https://` URL, and make sure the image is not blocked in robots.txt or behind authentication.
Further Reading
Related Tools
More from SEO Tools:
Meta Tag Generator
Generate meta tags for your website with live Google search preview. Create title, description, keywords, robots, and viewport meta tags.
Schema Markup Generator
Generate JSON-LD schema markup for Article, Product, FAQ, LocalBusiness, and Organization types. Improve your search results.
Slug Generator
Generate clean, SEO-friendly URL slugs from text. Options for separator, lowercase, stop word removal, and max length.