FreeSEOTools.io
👁️
FreeContent & On-Page

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

0/60
0/155
No image

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.

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 Math manage 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