Open Graph Previewer
Draft the title, description and image for a shared link and watch a Facebook-style card update as you type.
Runs in your browser. Nothing you enter is uploaded.
What it does
This previewer draws the card Facebook shows when someone pastes your URL: a 1.91:1 image area, the domain in capitals, a bold title and a two-line description. The card is built from the five fields you fill in, and below it the tool prints the og:type, og:title, og:description, og:url, og:site_name and og:image tags that would produce it.
Use it while writing share copy for a launch, a newsletter link or a client page, before the page is live or before you edit the template. It differs from the Open Graph Generator, which outputs og tags with an editable og:type and no visual. Here the card preview is the point, og:site_name is included, and og:type is fixed to website.
How to use it
- 1
Enter the headline in Title and the share text in Description.
- 2
Fill in Site name and URL. The card header shows the URL hostname in capitals, or the site name if the URL cannot be parsed.
- 3
Paste a full image address into Image URL (optional) to load it into the preview frame.
- 4
Edit the copy until the Facebook preview reads well within two lines of title and two of description.
- 5
Click Copy meta tags and paste the block into the page head.
What you get
A live Facebook-style link card and a block of five or six Open Graph meta tags (og:image appears only when you supply an image URL), with quotes, ampersands and angle brackets escaped.
When to use it
- Spotting clipped headlines
- The card stops the title and the description after two lines each, so you can see where a long headline gets cut before anyone shares it.
- Testing an OG image crop
- An image URL fills a 1.91:1 frame with center cropping, which shows whether text near the top or bottom of a square or tall graphic gets lost.
- Writing tags before launch
- Nothing is requested from the URL you enter, so you can preview and copy tags for a staging or unpublished address.
- Seeing the no-image fallback
- Leave the image field empty and the card shows a grey 'No image URL provided' panel, a reminder of how plain a link looks without og:image.
Example
Input
Title: Spring Menu Tasting Night Description: Six courses, one seating, April 18. Book a table before Friday. Site name: Olive & Rye URL: https://oliveandrye.com/events/spring-tasting Image URL: https://oliveandrye.com/img/spring-og.jpg
Output
<meta property="og:type" content="website"> <meta property="og:title" content="Spring Menu Tasting Night"> <meta property="og:description" content="Six courses, one seating, April 18. Book a table before Friday."> <meta property="og:url" content="https://oliveandrye.com/events/spring-tasting"> <meta property="og:site_name" content="Olive & Rye"> <meta property="og:image" content="https://oliveandrye.com/img/spring-og.jpg">
The ampersand in the site name is escaped so the attribute stays valid, and the card header reads OLIVEANDRYE.COM.
Tips
- Use an absolute https image URL. A relative path like /img/og.jpg will not load in the preview and is not reliably read by social crawlers either.
- Keep text and logos in the middle of the image, because the 1.91:1 frame crops anything outside that shape.
- Put the reason to click in the first line of the description, since the card stops after two lines.
- After publishing, run the live URL through Facebook's Sharing Debugger so it replaces any cached older card.
Questions
Does the previewer read Open Graph tags from my live page?
No. It never requests your URL. The card and tags come only from the fields you type, so confirm the published page with a platform debugger once it is live.
How is this different from the Open Graph Generator?
The generator writes og tags with an editable og:type and shows no visual. This previewer draws a Facebook-style card as you type, adds og:site_name, fixes og:type to website and leaves og:image out when the image field is empty.
Why does my image look cut off in the Facebook preview?
The frame uses a 1.91:1 ratio, the shape of a 1200 x 630 image, and fills it with center cropping. Square and portrait images lose their top and bottom edges.
Will LinkedIn show the same card as this preview?
LinkedIn reads the same og:title, og:description and og:image tags, so the tags you copy apply there too. Its card layout is different, though, and this tool only draws the Facebook-style version.