Developer Tools
Preview Open Graph and Twitter Card Tags
Transform pasted text with the open graph previewer and copy the cleaned output.
Direct Answer
Use the Open Graph Previewer when you have added og:title, og:image, and related tags to a page and want to check roughly how the shared link card will look before posting it.
Required and recommended Open Graph properties
The Open Graph spec marks a small set of properties as required, but a usable share card needs a few more filled in.
- og:title - the headline shown on the card
- og:type - the kind of content, most commonly 'website' or 'article'
- og:image - the preview image, ideally 1200x630
- og:url - the canonical URL the share should point to
- og:description - shown as supporting text below the title
Why a live share sometimes looks different from your preview
A preview built from the tags you paste in isn't guaranteed to match what a real platform shows, because platforms scrape the live page themselves and cache what they find.
- Facebook and LinkedIn cache scraped tag data by URL until you force a rescrape
- the platform's crawler must be able to fetch the page - staging, localhost, or auth-gated pages will fail to scrape
- an image that's too small or the wrong aspect ratio may be rejected or cropped differently per platform
- Twitter Card tags are read separately from Open Graph tags and can override the card shown on X
How to Use Open Graph Previewer
- Paste or type your content into the input box.
- The transformed result appears instantly in the result panel below.
- Click Copy result to copy the output to your clipboard.
- Download .txt saves the transformed text as a file.
- Reset clears everything and lets you start over.
Reference
| Feature | Details |
|---|---|
| Purpose | Transform pasted text into a cleaner or different format. |
| Input | Text, lines, lists, or copied content. |
| Result | Transformed text ready to copy or download. |
| Best for | Cleanup, formatting, list preparation, and copy-paste workflows. |
| Category | Developer Tools |
| Works on | Desktop, tablet, and mobile browsers |
Useful Related Tools
Frequently Asked Questions
Which Open Graph tags are actually required?
The spec marks og:title, og:type, og:image, and og:url as required properties. og:description is not technically required but is recommended, since without it most platforms fall back to the page's meta description or omit supporting text entirely.
What image size should og:image be?
1200x630 pixels (roughly a 1.91:1 ratio) is the commonly recommended size for Facebook and LinkedIn, giving a large, non-cropped preview. Images below about 200x200 may be rejected or shown only as a small thumbnail.
Does X (Twitter) use Open Graph tags?
X reads its own Twitter Card tags (twitter:card, twitter:title, twitter:image, twitter:description) but falls back to the equivalent Open Graph tags for any that are missing, except for twitter:card itself, which has no Open Graph equivalent and determines the card layout.
Why hasn't my Facebook preview updated after I changed og:image?
Facebook caches the Open Graph data it scrapes for a given URL and won't refetch it automatically. You need to run the URL through Facebook's Sharing Debugger and trigger a rescrape before the new tags will show up in shares.
Why does LinkedIn keep showing an old preview?
LinkedIn caches scraped page data similarly to Facebook. Resubmitting the URL through LinkedIn's Post Inspector forces it to refetch the page and pick up updated Open Graph tags.
Why does the preview in this tool look different from the real platform's preview?
This tool renders a preview from the tags and page you give it, but the actual platform's crawler independently fetches the live URL. If that page is behind login, on localhost, on a staging domain with noindex, or blocked by robots.txt, the real platform's crawler gets a different result than what you see here, often falling back to a generic card.
What's the difference between the summary and summary_large_image Twitter Card types?
summary shows a small square-ish thumbnail alongside the title and description, while summary_large_image shows a full-width image above the text. The best image dimensions differ between the two, so the card type should match the image you're providing.
Can og:title differ from the page's title tag?
Yes, intentionally. The title tag is written for search engines and the browser tab, while og:title is written for a social share headline - it can be shorter, more casual, or framed differently to encourage clicks in a feed.