How to preview your Open Graph tags
Open Graph tags decide the picture, title and description that appear when someone shares your page. This tool builds the link cards from the tags you type, so you can fix them before the page is live.
- Fill og:title, og:description, og:url, og:site_name and og:image. Already have the tags? Open "Paste meta tags or page source" and press Fill the form.
- Pick og:type and twitter:card. summary_large_image shows a wide picture on X, while summary shows a small square thumbnail.
- Press Choose image file to see your own picture in the cards. It stays on your device.
- Read the Checks list, then compare the X, Facebook, LinkedIn and Slack previews.
- Press Copy meta tags and paste them into the head of the page.
What the checks are based on
The Open Graph protocol requires four properties: og:title, og:type, og:image and og:url. Meta recommends images of at least 1200 by 630 pixels, with 600 by 315 as the minimum for a large card, a shape close to 1.91 to 1, and a file under 8 MB (Meta sharing images). X asks for a 2 to 1 picture of at least 300 by 157 pixels for summary_large_image. LinkedIn suggests 1200 by 627. The 60 and 160 character guides for title and description are common rules of thumb, not published limits, because each platform cuts text at its own point.
Worked example
With the starting inputs (the "10 best free productivity tools" title, no image yet) the Checks list says the title is 44 characters, the description is 140 characters, og:url is a full address (example.com), no og:image is set, and summary_large_image needs a picture. The Your meta tags box shows:
<meta property="og:type" content="website"> <meta property="og:title" content="The 10 best free productivity tools for 2026"> <meta property="og:description" content="Stop juggling six different apps. We tested every tool worth using and rounded up the ten that actually save time without breaking the bank."> <meta property="og:url" content="https://example.com/best-productivity-tools"> <meta property="og:site_name" content="Example Blog"> <meta name="twitter:card" content="summary_large_image">
Add an og:image address and the og:image line appears, and the last warning disappears. Quotes and ampersands in your text are escaped for you, so a title like Tom & Jerry is safe to paste.
Limits to know about
- The tool never loads your URL, so it cannot show what a platform actually scraped. After publishing, test the live page with the Facebook Sharing Debugger and the LinkedIn Post Inspector.
- Pictures hosted elsewhere cannot load on this page, so the cards use a sample made from your title unless you choose a file. The og:image address you type still goes into the tags.
- Card layouts are approximations. Platforms redesign them often, and text is cut at different points.
- To write a full set of tags from scratch, use the meta tag generator. For the small tab icon, see the favicon generator, and to shape the cover picture use the image resizer.
Frequently asked questions
Why does my old image still show after I change the tags?
Platforms cache link previews for days or weeks. Re-scrape the URL with the Facebook Sharing Debugger or the LinkedIn Post Inspector, then share the link again.
Do I need both og: and twitter: tags?
Not for the title, description or image, because X falls back to the og: versions. You do need twitter:card, which has no Open Graph equivalent and decides between the large and small card.
What size should an og:image be?
Use 1200 by 630 pixels, a 1.91 to 1 shape, as a JPG or PNG under 5 MB. Keep the important part near the center, because X crops to 2 to 1 and other apps trim the edges.
Can this preview a live URL?
No. A web page cannot read another site's tags, so you type or paste them. Use the platform debuggers to see what they fetched from a published page.
Sources: ogp.me; Meta for Developers, sharing images; X developer docs, Summary Card with Large Image.