Free Tool
Open Graph Preview Tool
See exactly how a link will look on Facebook and X before you publish. Edit the tags live and copy the finished meta tags in one click.
X / Twitter
The Basics
What is Open Graph?
Open Graph is a small set of meta tags in a page's HTML that tell Facebook, X, and other platforms what to show when someone shares the link: a title, a description, and an image. Without them, each platform guesses using whatever it finds on the page, and the guess is often a random image or a truncated headline that hurts clicks.
og:titleThe headline shown on the shared card. Keep it short and specific.
og:descriptionThe short summary shown under the title on most platforms.
og:imageThe image shown on the card. It has the biggest effect on click-through rate of any tag.
og:urlThe canonical URL the card should point back to.
og:typeWhat kind of content the page is, for example website, article, or product.
Before You Ship
Get it right before you publish
Use an image that is 1200x630 pixels, a 1.91:1 ratio, so it fills the card on every platform without cropping.
Keep og:title under about 60 to 70 characters so it does not get cut off.
Keep og:description under about 155 to 160 characters for the same reason.
Always use an absolute image URL, such as https://yoursite.com/image.jpg, not a relative path. Platforms cannot resolve relative paths.
Mirror your og: tags into matching twitter: tags so X renders a full card instead of falling back to a blank one.
Set og:type to match the page: website for most pages, article for blog posts, product for product pages.
Why It Matters
Why preview before you share
Catch broken previews before your audience does
A missing image, an oversized title, a description that got cut mid-sentence: easy to miss in code, obvious the moment someone shares the link.
Improve click-through before you spend on ads
The preview card is often the first impression of your page. A clear title and a real image get more clicks than a blank gray box.
Iterate fast without redeploying
Edit a field and every preview card updates instantly. No pushing a change, waiting on a build, or clearing a platform's cache just to check one word.
Ship copy-ready tags in one click
Once the preview looks right, copy the full block of og: and twitter: meta tags and paste them straight into your page head.
Need More Than a Preview?
We build the SEO and web presence behind the tags.
If your links need more than a fix to og:title, our web development and SEO teams can rebuild the page behind them.
Book a Free Call →