Skip to main content

Open Graph Preview Tool (Facebook & Twitter Link Preview)

Enter a URL, title, description, and image to see how a share card could look. Fetch works when CORS allows; otherwise paste values from your CMS or HTML. Copy ready-made Open Graph and Twitter meta snippets in one click.

Page & tags

Fetch only works when the target allows browser CORS (many production sites do not). You can always paste values from your HTML or CMS.

Facebook-style share card

SmartFlexa — Free Online Tools preview

smartflexa.com

SmartFlexa — Free Online Tools

Format JSON, compress images, generate meta tags, and more. Fast utilities that run in your browser.

X (Twitter) summary card

SmartFlexa — Free Online Tools preview

smartflexa.com

SmartFlexa — Free Online Tools

Format JSON, compress images, generate meta tags, and more. Fast utilities that run in your browser.

Previews are approximations; platforms apply their own cropping, caching, and dark mode.

What is Open Graph?

Open Graph is a vocabulary of meta tags—usually declared with property="og:*"—that tells social apps how to render a link. Instead of guessing from random on-page text, crawlers read a predictable contract: the human-readable title, a short description, a canonical URL, an image, and a content type such as article or website. The protocol began with Facebook but is now the de facto baseline for Slack, LinkedIn, iMessage, and many other clients that unfurl URLs.

Twitter (now X) adds parallel twitter:* fields and a twitter:card mode such as summary_large_image. When both sets exist, platforms pick the most specific data they trust. Missing tags do not always produce an error—they produce a bland preview, which is worse for marketing because users scroll past without clicking.

Why social previews matter

Organic shares, paid campaigns, and internal Slack announcements all compete for attention inside infinite feeds. A crisp image and a clear title communicate credibility before the page loads. Conversely, truncated titles, pixelated crops, or mismatched descriptions signal neglect and increase bounce rates even when the underlying article is excellent. Treat previews as part of the product surface, not as an afterthought buried in the head element.

Previews also reinforce brand: consistent typography in images, recognizable color bars, and accurate domain labels help audiences trust that the link is authentic. After major launches, marketing and engineering should review the same SmartFlexa mockup so copy changes in the CMS do not drift from what engineers ship in metadata.

How to optimize sharing

Start with an image sized for large cards—roughly 1.91:1 aspect ratio—and compress it so mobile networks fetch it quickly. Use absolute HTTPS URLs, not root-relative paths, because crawlers resolve them differently across environments. Keep titles under roughly sixty visible characters where possible and front-load the value proposition; descriptions should expand on the title without repeating it verbatim.

Align Open Graph text with the on-page H1 and opening paragraph so visitors see a coherent story after they click. When you change pricing, dates, or legal claims, update both body copy and meta tags in the same release. Use each platform’s cache debugger after deploys, and pair this preview with SmartFlexa’s Meta Tag Generator when you need the full HTML block, plus Sitemap Generator and Robots.txt Generator so crawlers can reach the URLs you intend to share.

Finally, remember that previews are cached. A perfect local test does not guarantee instant updates in production feeds—plan buffer time for re-scraping and communicate that to stakeholders when rebranding or renaming products.

Technical checklist before you share

Confirm that og:url matches the canonical users should bookmark, that images return 200 without redirects to unrelated hosts, and that TLS certificates cover both apex and www if you advertise both. Avoid blocking Facebook or Twitter user agents in WAF rules when marketing depends on those scrapers. If you rely on JavaScript to inject tags, remember many crawlers still prefer the first HTML payload—mirror critical tags server-side when possible.

Document the owner for each field (brand, growth, localization) so translations do not silently overwrite English-only og:title strings. When campaigns end, roll back temporary og:image artwork to evergreen brand imagery to prevent outdated promos from resurfacing in old Slack threads.

Frequently asked questions

What is Open Graph?
It is a family of meta tags that describe how a URL should look when shared, especially og:title, og:description, and og:image.
How do I preview a link on Facebook?
Model your fields here, then use Meta’s Sharing Debugger after go-live to scrape the live URL and refresh cached previews.
How do I fix a broken link preview?
Fix invalid image URLs, add missing og tags in the server-rendered HTML, avoid blocking crawlers, and clear platform caches after corrections.
What is og:image?
The Open Graph property that points to the preview image; it should be absolute, reachable, and appropriately large for social crops.
How can I improve social sharing?
Match titles and images to campaign intent, test on mobile, export consistent meta snippets, and monitor engagement when you iterate copy.