Open Graph Preview
See exactly how your page will look when shared on Facebook and Twitter. Fill in your OG fields and get the correct meta tags to copy into your <head> — instantly, in the browser.
Open Graph Fields
OG Title will appear here
OG description will appear here…
Generated Meta Tags
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
How to Use the Open Graph Preview Tool
Fill in the fields on the left — at minimum an OG Title and OG Description — then switch between the Facebook and Twitter / X tabs to see how your link preview will look on each platform. Once you are happy, copy the generated meta tags and paste them inside the <head> of your HTML.
What Is the Open Graph Protocol?
Open Graph is a metadata standard introduced by Facebook in 2010 and now supported by virtually every social network, messaging app, and link aggregator. When someone pastes your URL into Facebook, LinkedIn, Slack, iMessage, or Twitter, those platforms send a crawler to fetch your page and read the og: meta tags. Without OG tags, platforms fall back to guessing — often picking the wrong image, a truncated heading, or no description at all. With proper OG tags, every share of your content looks polished and intentional.
Field-by-Field Guide
| Field | Optimal Length | Notes |
|---|---|---|
| og:title | 50–60 chars | Can differ from your HTML title tag — tailor it for social sharing |
| og:description | 120–155 chars | Write a compelling one-liner; do not just copy the meta description |
| og:image | 1200×630 px | Use an absolute URL; HTTPS required for most platforms |
| og:type | — | Set to 'website' for pages, 'article' for blog posts |
| og:url | — | Canonical URL; prevents duplicate sharing counts across URL variants |
| og:site_name | — | Shown above the title on Facebook; brand name or publication name |
| twitter:card | — | Use 'summary_large_image' for full-width image cards |
Image Best Practices
Use 1200×630 px for Facebook
This is the canonical recommended size. It renders at full width in feed posts and looks sharp on retina displays.
Use 1200×675 px for Twitter
Twitter summary_large_image cards crop to 16:9. A 1200×675 image fits perfectly without cropping.
Always use HTTPS
Insecure HTTP image URLs are blocked by most platforms. Ensure your image is hosted on HTTPS.
Keep images under 8 MB
Facebook and Twitter enforce file size limits. JPEG at 80–85% quality keeps files small without visible quality loss.
Avoid text-heavy images
Social platforms may crop your image on mobile. Text near the edges often gets cut off — keep key visuals centered.
Use absolute URLs
Relative paths like /og-image.jpg do not work. Always provide the full URL including https:// and your domain.
How to Add These Tags to Your Site
Paste the generated tags inside the <head> section of your HTML. In Next.js, use the built-in metadata export — the framework writes the tags automatically. In WordPress, plugins like Yoast SEO or Rank Mathmanage OG tags through a UI. For static HTML or other frameworks, paste directly into your template's head section. After deploying, use the platform-specific cache-clearing tools described in the FAQ below to refresh the preview.
Frequently Asked Questions
What is the Open Graph protocol?
Open Graph (OG) is a metadata protocol created by Facebook that lets you control how your web pages appear when shared on social networks. By adding og:title, og:description, og:image, and og:type meta tags to your page's <head>, you tell Facebook, LinkedIn, Slack, and other platforms exactly which title, description, and image to display in link preview cards — regardless of the page's actual heading structure.
What is the recommended Open Graph image size?
Facebook and most platforms recommend 1200×630 pixels (roughly 1.91:1 ratio) for og:image. This renders well on high-DPI displays without cropping. For Twitter summary_large_image cards, a 16:9 ratio (e.g. 1200×675 px) works best. Keep images under 8 MB and use JPEG or PNG format. Avoid embedding critical text inside the image, as platforms may crop it on smaller viewports.
How many characters should og:title and og:description be?
Facebook displays og:title up to approximately 60 characters and og:description up to 155 characters before truncating. Twitter trims og:title at around 55–70 characters and og:description at roughly 125 characters in card previews. To be safe, keep og:title under 60 characters and og:description under 120 characters so both platforms show the full text without cutting off mid-sentence.
Do Open Graph tags help SEO?
Open Graph tags do not directly influence Google's ranking algorithms — Google primarily uses the title tag and meta description for search results. However, OG tags indirectly benefit SEO by improving social sharing: a compelling og:title and a high-quality og:image lead to more clicks and shares, which can drive traffic and earn natural backlinks. Complete OG data also helps Slack, iMessage, WhatsApp, and Discord render rich previews, broadening your content's reach.
Why does my social preview still show old content after updating my tags?
Social networks cache link previews aggressively. After updating your OG tags, you need to manually clear the cache for each platform: use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), Twitter's Card Validator (cards-dev.twitter.com/validator), or LinkedIn's Post Inspector (linkedin.com/post-inspector). Enter your URL and click 'Scrape Again' or 'Refresh'. The new preview will propagate within a few hours for most platforms.
Related Tools
Want Your Content to Perform on Every Platform?
Our SEO experts can audit your entire on-page setup — meta tags, social sharing, structured data, and more — and deliver a custom growth roadmap.
Get a Free SEO Audit