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 |
Common Ways People Search for This
People do not always know the exact tool name. These are plain-language searches this page is designed to answer:
- how do i open graph previewer
- help me open graph previewer
- easy way to open graph previewer
- simple way to open graph previewer
- website that can open graph previewer
- app that can open graph previewer
- tool that can open graph previewer
- free website to open graph previewer
A Focused Open Graph Previewer Alternative
People looking for alternatives to JSONLint, Code Beautify, FreeFormatter, Browserling often want a simpler workflow. This open graph previewer focuses on the task first: clear inputs, a visible result, useful related tools, free access, and no account requirement.
- Puts the tool input and result near the top of the page
- Free to use with no account or payment step
- Includes focused explanations and related tools
- Designed to avoid misleading download buttons and forced interstitials
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.
Does og:description need to match the meta description?
No. Meta description appears in search result snippets, og:description appears on the share card, and platforms often truncate og:description more aggressively, so a shorter, standalone version usually works better than reusing the SEO description verbatim.
Why isn't my image showing up in the preview at all?
Common causes are using a relative image path instead of an absolute URL, the image sitting behind authentication, an unsupported or unusual content type, or the image path being blocked by robots.txt so the platform's crawler can't fetch it.
Do I need to set og:url?
Yes, if the page is reachable through more than one URL variant, such as with and without a trailing slash or with tracking parameters. og:url tells platforms which URL to treat as canonical for share counts and caching, preventing engagement from splitting across variants.
What happens if og:image is missing entirely?
Most platforms fall back to the first suitable image found elsewhere on the page, or show a plain text card with no image at all, which typically gets far less engagement in a social feed.
Is there a strict character limit for og:title and og:description?
The spec doesn't enforce one, but platforms visually truncate long text - roughly 60-90 characters for a title and up to around 200 characters for a description, varying by platform and card layout.