Skip to main content
Toollyz

Search tools

Search for a command to run...

Open Graph Preview

Paste your page HTML and see exactly how it renders when shared on Facebook, X / Twitter and LinkedIn. Side-by-side preview cards plus a full SEO audit: og:* / twitter:* / canonical / viewport / theme-color with title and description length warnings. 100% offline.

What is the Open Graph Preview?

Open Graph Preview is a paste-in social-card validator. Give it the raw HTML of your page (just the `<head>` is enough), and it extracts every Open Graph (`og:*`), Twitter (`twitter:*`) and basic SEO meta tag, then renders three side-by-side preview cards that mimic Facebook / Meta share, X (Twitter) — both `summary_large_image` and `summary` cards — and LinkedIn share. Below the previews, a full audit lists every issue: missing required tags (`og:title`, `og:description`, `og:image`, `og:url`), title and description length warnings (over the recommended 30-60 / 50-200 chars), `og:image` relative URLs that won't resolve, unrecognised `twitter:card` values, missing canonical, missing `<title>`. Open Graph Preview is the offline alternative to the Facebook Sharing Debugger and X Card Validator — no need to deploy to test, no cache invalidation hassle.

How to use it

  1. Paste your page's HTML (the entire document or just `<head>` works).
  2. See three preview cards (Facebook, X/Twitter, LinkedIn) update live.
  3. Check the issues list for missing tags or length warnings.
  4. Inspect the 'all extracted meta' table for the full set of tags found.

Benefits

  • Three preview cards: Facebook share, X / Twitter (summary + summary_large_image variants), LinkedIn share.
  • Live extraction of og:* / twitter:* / title / description / canonical / viewport / theme-color / favicon / charset.
  • Length warnings: title 30-60 chars recommended, description 50-200 chars recommended.
  • Validates og:image is an absolute URL (relative paths won't resolve in share crawlers).
  • Validates twitter:card values against the spec (summary / summary_large_image / app / player).
  • Missing-canonical info hint.
  • Full meta table for the rest of your meta tags.
  • No deployment required — paste HTML, see how it'll look.
  • Runs 100% in your browser — Toollyz has no server.

Frequently asked questions

Why not just use the Facebook Sharing Debugger?

The Facebook Debugger requires your page to be deployed. This tool works on local drafts, staging environments, and anything you can paste — no need to publish to test.

What's the difference between og:* and twitter:* tags?

Open Graph (`og:*`) is the universal standard adopted by Facebook, LinkedIn, Slack, Discord and most other platforms. Twitter has its own `twitter:*` set that lets you override the OG values specifically for X. If `twitter:*` is missing, X falls back to the `og:*` equivalents.

What's the difference between summary and summary_large_image?

Twitter card variants. `summary` shows a small thumbnail on the left and text on the right. `summary_large_image` shows a large full-width image with text below — better for visual content. Pick based on your image quality and aspect ratio.

How big should og:image be?

Facebook recommends 1200×630 (1.91:1 aspect ratio), 8 MB max. Twitter recommends the same for `summary_large_image`. LinkedIn uses 1200×627. Stick to 1200×630 PNG/JPG and all three render cleanly.

Why does og:image need to be absolute?

Share crawlers (Facebook's bot, X's bot) don't run JavaScript and don't follow relative paths from the page they're scraping — they need a full https:// URL. Relative paths like `/og.png` will resolve to nothing.

What if my page has neither og:title nor twitter:title?

Share crawlers fall back to the `<title>` tag. We use the same fallback chain in our previews. Always set `og:title` explicitly though — it lets you tailor the share-card copy separately from the page title.

What's the recommended description length?

50-200 chars for `og:description`. Most platforms truncate at 200; under 50 looks empty. Stick to 100-150 for the sweet spot.

Why is og:url needed?

It's the canonical URL share crawlers report when users click the card. Without it, the URL displayed under the title may be missing or wrong. Always set it.

Does the preview show what the actual platforms will render?

Visually approximate. Each platform has its own renderer with its own quirks (Facebook trims long descriptions differently than X). Our previews use the standard recommended aspect ratios and typography, which is close enough for design decisions.

Does this work on an SPA?

Only if the SPA server-side-renders the meta tags. Share crawlers don't run JS, so client-side `<head>` mutations don't get picked up. Test the SSR HTML in this tool.

Is anything uploaded?

No. DOMParser-based extraction runs entirely in your browser.

Related tools

See all seo tools