Open Graph Preview
The Open Graph Preview tool shows exactly how your page will look when shared on Facebook, Twitter, LinkedIn, Discord, and Slack. Enter your OG title, description, image URL, and other tags to see real-time previews for each platform. Includes SEO scoring, code generation for og tags, and visual mockups matching each platform's actual layout.
SEO Score
Preview
Generate Code
<meta property="og:title" content="My Amazing Website" /> <meta property="og:description" content="Discover the best tools, tips, and resources for web development and design." /> <meta property="og:url" content="https://example.com/my-page" /> <meta property="og:site_name" content="Example.com" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Amazing Website" /> <meta name="twitter:description" content="Discover the best tools, tips, and resources for web development and design." />
ご提案はありますか？
新しいツールのリクエストや改善提案をお待ちしています — Slackコミュニティにご参加ください！
What is an Open Graph Preview Tool?
An Open Graph preview tool lets you test and visualize how your web page will appear when shared on social media platforms before publishing. Open Graph protocol, created by Facebook, defines meta tags (og:title, og:description, og:image, og:url) that control link preview cards. Different platforms render these tags slightly differently. This tool shows accurate mockups for Facebook, Twitter/X, LinkedIn, Discord, and Slack so you can optimize your content for maximum engagement.
How to Use This Tool
- Enter your Open Graph title, description, and page URL
- Add an OG image URL (recommended: 1200x630px for optimal display)
- Set the site name, OG type, and locale for complete metadata
- Configure Twitter Card fields if you want a different appearance on Twitter/X
- Switch between platform previews (Google, Facebook, Twitter, LinkedIn, Discord, Slack) to verify appearance
Frequently Asked Questions
What is the recommended OG image size?
The recommended Open Graph image size is 1200x630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, LinkedIn, and Discord. For Twitter summary_large_image cards, the same dimensions work. Keep important content in the center since some platforms crop edges slightly.
Why does my shared link look different on each platform?
Each platform has its own link preview renderer with different rules. Facebook uses og: tags primarily, Twitter prefers twitter: tags (falling back to og:), and LinkedIn has its own caching system. Discord shows larger previews while Slack is more compact. This tool shows you each platform's actual rendering.
How do I force social platforms to update cached previews?
Facebook: use the Sharing Debugger tool to scrape new data. Twitter: use the Card Validator. LinkedIn: append a query parameter to the URL to bypass cache. Discord and Slack update caches automatically after some time. Most platforms cache previews for 24-72 hours.