Open Graph Preview
Preview
Facebook / LinkedIn
Twitter (Large Image)
What Is Open Graph?
Open Graph is a metadata protocol originally created by Facebook that lets a web page control how it appears when shared on social media. By placing a handful of <meta property="og:..."> tags in the <head> of your HTML, you tell platforms exactly which title, description, image, and URL to display in the share card, instead of leaving them to guess from your page content. Facebook, LinkedIn, Pinterest, Slack, Discord, and most messaging apps all read these tags, which makes Open Graph the closest thing the web has to a universal standard for social link previews.
Twitter, now X, uses a closely related set of twitter: meta tags but gracefully falls back to Open Graph values when its own tags are absent. That is why a single well-formed set of OG tags usually produces a good preview everywhere. The catch is that you cannot see the result until you actually share the link, and platforms aggressively cache what they fetch — so a typo or a missing image can sit live for days before you notice. Previewing the card before publishing saves you from broken or unflattering shares.
How to Use This Open Graph Preview Tool
Type your values into the five fields on the form: og:title, og:description, og:url, og:image URL, and og:site_name. As you type, the two preview cards update instantly — one rendering the Facebook/LinkedIn layout and one rendering the Twitter large-image card — using your real image URL and showing how each platform truncates long titles and descriptions. The character counters next to the title and description fields turn red when you exceed the recommended limits.
Watch the Recommendations panel below the previews: it flags missing or over-length fields, such as a title past 60 characters, a description past 200, or an absent image or URL. Adjust your inputs until the previews look right and the warnings clear, then transfer the final values into your page's meta tags. The image is loaded directly from the URL you provide, so it must be publicly reachable for the preview to render.
Real-World Use Cases
- Pre-launch checks — Verify a new landing page's share card looks polished before you announce it, avoiding embarrassing broken previews on launch day.
- Tuning titles and descriptions — See exactly where Facebook and Twitter cut off long text so you can rewrite copy that survives truncation.
- Validating image URLs — Confirm your
og:imageactually loads and is framed correctly at the platform's aspect ratio before publishing. - Comparing platforms side by side — Check the Facebook/LinkedIn card and the Twitter large-image card at once, since they crop and stack content differently.
- Briefing clients or writers — Show non-technical stakeholders a live mock-up of how a post will look when shared, without touching production code.
Tips for Better Social Previews
- Keep
og:titleunder about 60 characters; longer titles are truncated with an ellipsis on most platforms. - Aim for an
og:descriptionof roughly 2–4 sentences and under 200 characters so the full summary shows. - Use a 1200×630-pixel image for the sharpest large card; this 1.91:1 ratio is what Facebook and Twitter's large image format expect.
- Always set
og:image— links shared without an image get noticeably less engagement and render as a plain text card. - Use an absolute, publicly accessible image URL with no login or hotlink protection, or the platform's crawler will fail to fetch it.
Features
- Live dual previews — Facebook/LinkedIn and Twitter large-image cards update as you type.
- Real image rendering — pulls your actual
og:imageURL and shows a fallback message if it fails to load. - Platform-accurate truncation — title and description are clipped at each platform's display length.
- Character counters — live counts for title and description that highlight when you exceed recommended limits.
- Recommendations panel — automatic warnings for missing or over-length title, description, image, and URL.
- Domain display — derives and shows the domain from your URL the way the platforms do.
- 100% client-side — your data never leaves your browser.
Frequently Asked Questions
Why doesn't Facebook show my updated Open Graph image?
Facebook caches the data it scrapes from your page, so an update may not appear immediately. Run your URL through the Facebook Sharing Debugger and click "Scrape Again" to force it to re-fetch your tags and refresh the cached preview.
Can I use different images for Facebook and Twitter?
Yes. Set og:image for Facebook and LinkedIn, and a separate twitter:image for the Twitter card. If you only set og:image, Twitter falls back to it automatically, so a single image works fine unless you specifically want a different crop or design per platform.
Does this tool read the Open Graph tags from a live URL?
No. It does not fetch or scrape a remote page; you enter the values manually and it renders previews from what you type. This keeps the tool fully client-side and lets you preview pages that are not published yet, including drafts on your local machine.
What image size should I use for Open Graph?
1200×630 pixels is the recommended size for the large card used by Facebook, LinkedIn, and Twitter's summary_large_image. Facebook accepts images as small as 200×200, but smaller or oddly proportioned images may be cropped or shown as a small thumbnail instead of a full-width banner.
Why is my image showing "Image failed to load"?
The URL you entered could not be loaded in the browser. Common causes are a typo, a relative path instead of an absolute URL, a private or login-protected file, or hotlink protection that blocks external requests. Open the image URL directly in a new tab to confirm it is publicly reachable.
Is any of my data uploaded when I use this tool?
No. All preview rendering happens locally in your browser using JavaScript, and the only network request made is your browser loading the image URL you supply for the preview. The text you enter is never sent to or stored on any server.