Open Graph Preview

Paste your HTML head or meta tags and preview how links may appear when shared. Client-side only.

Paste meta tags / HTML

Detected values
Title:
Description:
Image:
URL:
Site name:
Type:
Twitter card:

Preview

Open Graph style
example.com
Share title preview
Share description preview.
Twitter card style
Twitter title preview
Twitter description preview.
example.com

Open Graph Previews: The Part of SEO People Forget

I've shipped a lot of pages where the on-page SEO was solid, the content was helpful, and the technical stuff was clean—and the share preview still looked terrible. It's one of those problems you don't notice until someone drops your link into Slack, iMessage, Discord, or a group chat and the preview shows a random image, an awkward headline, or a description that makes the page sound sketchy.

Open Graph tags are your chance to control that first impression. This tool is intentionally client-side and paste-based: you paste your head HTML or meta tags, and we extract the values so you can sanity-check what you're actually publishing. No crawling, no proxy, no surprise requests.

What platforms actually use

Most platforms will start with Open Graph. Twitter/X uses Twitter Card tags, but it often falls back to OG values if Twitter tags are missing. If you only remember one thing: make sure og:title, og:description, og:image, and og:url are correct and stable.

FieldBest practiceWhy it breaks
og:imageAbsolute URL, publicly accessible, consistent sizeHotlink blocked, 403, redirected too much, wrong dimensions
og:titleReadable, specific, not stuffedLooks spammy, mismatched with page content
og:descriptionOne clear sentence + a concrete outcomeGeneric boilerplate repeated site-wide
og:urlYour preferred canonical URLHTTP/HTTPS mismatch, trailing slash inconsistency

Caching is the real gotcha

Social crawlers cache previews aggressively. You can fix the tags and still see the old preview for a while. That's not you going crazy—it's the platform hanging onto the last fetch. When you're debugging, change one thing at a time and use the platform's debugger tools where available.

A workflow I trust

  1. Write the page title and visible H1 first, then mirror the intent in og:title.
  2. Pick one share image template and stick with it (it builds recognition).
  3. Use absolute image URLs and make sure they return 200 without cookies.
  4. Paste your tags here, preview them, then publish and re-test.

Clean previews won't magically change rankings, but they absolutely change how people perceive your link. If your page is worth building, it's worth making it look trustworthy when it's shared.