How to preview Open Graph cards before publishing

See the title, description, and image that Facebook, LinkedIn, and Slack will pull from your page — paste HTML or fill in OG fields manually.

A broken og:image or a truncated title shows up the moment someone shares your link. The Open Graph Preview renders an approximate link card from your page HTML so you can catch problems before they go live.

Paste-only limitation: the tool cannot fetch your URL. Browsers block cross-site HTML loading. Paste page source from View Source, or switch to Manual mode and type OG fields directly.

Try it — paste HTML or enter OG fields manually

Two input modes

  1. From HTML — paste your page source. The tool extracts og:* and twitter:* meta tags and builds the preview.
  2. Manual — fill in title, description, image URL, and site name without HTML. Useful when you are drafting tags before they are in a template.

What the preview shows

The card mimics the layout Facebook and LinkedIn use: large image on top, title below, description, and domain. Missing images show a placeholder. Truncated titles are visible so you can shorten them before publish.

Platforms may crop images differently or change fonts. Treat this as a sanity check, not a pixel-perfect Facebook debugger replacement.

Common issues it catches

  • Missing og:image — the share will look empty or pull a random on-page image.
  • Title too long — gets cut off mid-sentence in the card.
  • No og:description — platforms fall back to page text, often poorly.
  • Relative image URLs — may not resolve on social crawlers; use absolute URLs.

Related tools

Audit all meta tags with the Meta Tag Checker, or generate tags from scratch with the Meta Tag Generator.