Open Graph Preview Studio

Open Graph Preview Tool

Loading workspace...

How to preview OG tags from any URL

Paste an absolute https URL, run Fetch metadata, then review the merged title, description, image, and destination URL. Expand diagnostics to confirm status codes, final URL after redirects, and content type.

How Open Graph, Twitter Card, and fallback meta tags are chosen

For Facebook and LinkedIn-style previews we prefer Open Graph tags, then fall back to the title tag, meta description, canonical URL, and the first suitable body image when og:image is missing. For the X/Twitter-style preview we prefer twitter:title, twitter:description, and twitter:image when present, otherwise we fall back to Open Graph and then the same generic fallbacks.

Common metadata issues and how to fix them

Missing og:image is the most common share-quality issue—add a square or landscape image URL. Duplicate or conflicting tags, relative image URLs without a correct base, and long titles that get truncated are also frequent. Use the editor to test fixes before publishing.

How to export HTML meta tags or JSON

After a successful fetch (or after you fill required fields manually), use Copy HTML or Copy JSON, or download the .html and .json files. Values are escaped in the HTML snippet and the JSON includes source status for each supported field.

Fetch Open Graph and Twitter Card metadata from a public URL, preview Facebook, X/Twitter, and LinkedIn-style cards, override fields locally, and export HTML meta tags or JSON.

Frequently Asked Questions

Why do previews differ across Facebook, X, and LinkedIn?

Each platform reads tags in a slightly different order, applies its own cropping rules, and may cache older versions of your page. This studio shows consistent, local templates from your merged metadata so you can validate structure and copy—not pixel-perfect network renders.

Does this tool change my live website?

No. Fetched HTML is parsed for the current request only. Edits and exports stay in your browser (with optional URL query parameters for shareable overrides). Nothing is written back to your site.

What if my page blocks automated fetches?

Some sites return 403/401 to non-browser clients. This MVP only supports publicly fetchable HTML without authentication. Try a staging URL or relax bot rules temporarily if you control the server.