Open Graph Preview
Preview how your Open Graph tags look on Twitter, Facebook, LinkedIn, and Discord. Generate and copy OG meta tags.
This Open Graph preview tool shows exactly how your page will appear when shared on Twitter, Facebook, LinkedIn, and Discord. Enter your OG tag values, see live previews for each platform, and copy the generated HTML meta tags with one click.
About Open Graph Preview
Open Graph Tags Explained
Open Graph (OG) tags are HTML meta tags that control how a URL appears when shared on social media. Facebook created the protocol in 2010, and it has since been adopted by virtually every platform that shows link previews.
| Tag | Purpose | Best Practice |
|---|---|---|
| og:title | The headline shown in the link preview | Under 60 characters; clear and compelling |
| og:description | Summary text below the title | Under 155 characters; describe what the page offers |
| og:image | The preview image URL | 1200 x 630 px; absolute URL; under 5 MB |
| og:url | The canonical URL of the page | Full URL including https:// |
| og:site_name | Your website's name | Short brand name, not the full page title |
| og:type | Content type (website, article, product) | "website" for homepages, "article" for blog posts |
Twitter Card Tags
Twitter uses its own card tags alongside Open Graph. If Twitter-specific tags are present, they take priority; otherwise Twitter falls back to OG tags.
| Tag | Purpose | Values |
|---|---|---|
| twitter:card | Card type (controls layout) | "summary" (small image), "summary_large_image" (large image) |
| twitter:title | Title override for Twitter | Same rules as og:title |
| twitter:description | Description override | Same rules as og:description |
| twitter:image | Image override | Same rules as og:image |
How Each Platform Renders Link Previews
| Platform | Image Display | Title Length Shown | Description Length Shown |
|---|---|---|---|
| Twitter/X | Large image above text (summary_large_image) or small square (summary) | ~70 characters | ~200 characters |
| Large image above text | ~88 characters | ~300 characters on desktop, less on mobile | |
| Large image above text | ~120 characters | ~200 characters | |
| Discord | Image to the right (or large if wide enough) | ~256 characters | ~350 characters |
| Slack | Image below text | Full title shown | ~300 characters |
| iMessage | Large image with title overlay | ~2 lines | URL only |
OG Image Best Practices
| Guideline | Recommendation | Why |
|---|---|---|
| Dimensions | 1200 x 630 pixels | 1.91:1 ratio works across all platforms |
| File size | Under 1 MB (max 5 MB) | Large files may not load in time for preview generation |
| Format | JPEG or PNG | Universally supported; avoid WebP for OG images |
| Text in image | Keep text centered and large | Some platforms crop the edges; text must be readable at small sizes |
| URL | Use absolute URLs (https://) | Relative URLs will not resolve when scraped by platform crawlers |
Common OG Tag Mistakes
| Mistake | Result | Fix |
|---|---|---|
| Missing og:image | No image in link preview (or platform picks a random page image) | Always include og:image with an absolute URL |
| Relative image URL | Image fails to load in previews | Use full URL starting with https:// |
| Image too small | Blurry or cropped preview | Minimum 600 x 315 px; recommended 1200 x 630 px |
| Title too long | Truncated with ellipsis on most platforms | Keep under 60 characters |
| Cached old preview | Updated tags but platforms show old data | Use platform debugging tools to clear cache |
Generated Meta Tags
The tool generates the complete set of Open Graph and Twitter Card HTML meta tags based on your input. Copy them with one click and paste into your page's head section. The output follows current best practices including og:type, og:url, and twitter:card.
Worked example: a blog post titled "How Compound Interest Works" with a 1200x630 hero image at https://example.com/og/compound.jpg would generate og:title, og:description, og:type=website, og:url, og:image, og:site_name, plus the matching twitter:card=summary_large_image, twitter:title, twitter:description, and twitter:image. Pasting that block into the document's <head> is enough for Facebook, LinkedIn, Twitter/X, Discord, Slack, and iMessage to produce a rich preview.
Why Previews Cache (and How to Force a Refresh)
Platforms scrape your page once and cache the result for 24-48 hours, so updated OG tags do not appear immediately. Each major platform offers a debugger that re-scrapes on demand:
| Platform | Debugger URL | What It Does |
|---|---|---|
| developers.facebook.com/tools/debug | Re-scrapes the URL, shows exactly which tags were detected, lists errors and warnings | |
| linkedin.com/post-inspector | Shows the preview card LinkedIn will render, re-scrapes on refresh | |
| Twitter/X | cards-dev.twitter.com/validator (deprecated) - now inside Ads/Publish tools | Historically the Card Validator; since 2023 Twitter auto-refreshes cache when the URL is tweeted |
| Discord | No public debugger | Cache clears automatically after roughly 24 hours; append a query string (?v=2) to force a new scrape |
| Slack | No public debugger | Type /unfurl https://... in a channel to force Slack to re-scrape the URL |
What Is a Good OG Image Aspect Ratio?
Stick to 1.91:1 at 1200x630 pixels - this single ratio now renders cleanly across every major platform. LinkedIn documentation cites 1200x627, Twitter/X supports 2:1 and 16:9, and Facebook has settled on 1.91:1, so 1200x630 splits the difference without cropping on any of them. Square 1:1 images still work but produce a smaller "summary card" layout on Twitter and reduce click-through on Facebook feeds where the large-image treatment wins attention. Avoid tall portrait ratios: they get centre-cropped to a thin strip.
| Aspect Ratio | Pixel Size | Where It Works | Where It Breaks |
|---|---|---|---|
| 1.91:1 | 1200 x 630 | Facebook, LinkedIn, Slack, iMessage, Discord (large) | Slight crop on Twitter 16:9 card |
| 16:9 | 1200 x 675 | Twitter/X large card, YouTube embeds | Minor top/bottom crop on Facebook |
| 2:1 | 1200 x 600 | Twitter/X (official spec) | Letterboxed on Facebook and LinkedIn |
| 1:1 | 1200 x 1200 | LinkedIn feed, Discord small | Falls back to summary card on Twitter |
| 4:5 | 1080 x 1350 | None for link previews | Heavy cropping on every platform |
Open Graph, Schema.org, and Twitter Cards - Which Does What?
Open Graph controls social previews; Twitter Cards override OG on Twitter/X when present; Schema.org JSON-LD powers Google search snippets and rich results. They are complementary, not competitors. A complete head section ships all three: OG for Facebook/LinkedIn/Discord/Slack, Twitter Card tags for X, and JSON-LD for Google. The Twitter Card spec (developer.x.com) documents summary, summary_large_image, player, and app card types; summary_large_image is the modern default. If you omit Twitter-specific tags, Twitter falls back to the OG equivalents - useful for keeping the head section small.
Common OG Tag Mistakes That Break Previews
Most broken previews trace back to three issues: a missing or relative og:image URL, an image hosted behind authentication (private CDN, draft CMS URL), or a caching problem where the platform still holds an older scrape. Absolute HTTPS URLs and a warm cache fix 90% of cases. The remaining 10% usually involve image file size over 5 MB, unusual formats like AVIF that not every scraper supports, or a Content Security Policy that blocks the platform's crawler. For Facebook and LinkedIn, stick to JPEG or PNG under 1 MB if possible - WebP works on most platforms but has historically been unreliable on iMessage.
How to Test OG Tags Before Publishing
Use the previews on this page to sanity-check wording, length, and image composition. Then deploy the page to a staging URL accessible over HTTPS and run it through Facebook's Sharing Debugger and LinkedIn's Post Inspector - both will flag missing required tags, image resolution issues, and cache problems. For Twitter/X, simply paste the link into a draft tweet to see the live card preview. Keep a staging environment available for this step: once a URL is scraped by these platforms, the cache persists for roughly 24-48 hours, so fixing an error and re-testing often means waiting overnight. For generating full HTML head meta tags beyond just OG, the meta tag generator covers title, description, robots, viewport, and more. For creating social media post mockups, the tweet mockup generator and Instagram post mockup build realistic post screenshots. All tools run in your browser with no data sent anywhere.
Writing OG Titles and Descriptions That Get Clicks
Treat OG copy like an ad headline, not a page title. The feed gives you less than a second of attention and platforms crop aggressively - Twitter shows roughly 70 characters, Facebook around 88, and LinkedIn up to 120 before ellipsis. Lead with the value or the hook, not the brand name. "How compound interest turns 200 a month into 500k" wins against "Compound Interest Explained - Acme Finance Blog". Keep og:description concrete: name the specific benefit, number, or finding rather than teasing it. Sentence case reads more naturally on mobile than Title Case. Emojis render on every major platform but can look spammy; one well-placed emoji in the title often outperforms none or several.
Troubleshooting Broken Previews
| Symptom | Likely Cause | Quick Fix |
|---|---|---|
| Preview shows old title or image | Platform cache is stale (24-48 hour TTL) | Run the platform's debugger to force a re-scrape, or append ?v=2 to the URL |
| No image appears in preview | Relative og:image URL, or image behind auth | Use an absolute HTTPS URL on a public CDN |
| Image is cropped awkwardly | Wrong aspect ratio or important content near edges | Resize to 1200x630 and keep key text within the centre 1000x500 safe zone |
| Preview loads without description | Missing og:description or exceeds platform length | Add og:description under 155 characters |
| Emoji or special character turns into ? | Character encoding mismatch in the HTML | Serve the page as UTF-8 and HTML-encode quotes inside attribute values |
| LinkedIn shows no preview at all | LinkedIn refuses to scrape URLs that 301-redirect | Link directly to the final URL, not a short-link wrapper |
| Discord shows text-only link | Page blocks user agents that include "Discordbot" | Whitelist Discordbot in robots.txt or firewall rules |
Sources
Frequently Asked Questions
What are Open Graph tags?
Open Graph (OG) tags are HTML meta tags that control how your page appears when shared on social media. They set the title, description, image, and other properties shown in link previews.
Which platforms does this preview?
You can preview how your link would look when shared on Twitter/X, Facebook, LinkedIn, and Discord. Each platform renders link previews slightly differently.
Does this tool fetch data from my URL?
No. You manually enter the og:title, og:description, og:image URL, and og:site_name. The tool only shows a visual preview and generates the corresponding HTML meta tags.
What image size should I use for OG images?
The recommended size is 1200x630 pixels for best results across platforms. Facebook and LinkedIn prefer this ratio, while Twitter works well with it too.
Can I copy the generated meta tags?
Yes. The tool generates the complete set of og and twitter meta tags and provides a one-click copy button to paste them into your HTML head section.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/og-preview/" title="Open Graph Preview - Free Online Tool">Try Open Graph Preview on ToolboxKit.io</a>