Open Graph Preview

Q: Does this include an Open Graph generator?

Yes. Use the Generate Tags mode to create Open Graph meta tags and X/Twitter card tags, then copy or download them for your page head section.

Q: What is the best Open Graph size?

A common best practice is a 1.91:1 OG image (often exported around 1200×630) so it crops well across platforms. Keep the image readable on mobile and use an absolute HTTPS URL.

Q: Open Graph React: why is my preview wrong?

If OG tags are injected client-side, some crawlers may miss them. Prefer server-side rendering (SSR) or pre-rendering for OG tags, then verify your final HTML with an Open Graph Preview.

🔎 Open Graph Preview

Paste a link (like a YouTube URL) to instantly show the social preview image + card details. Works fully in the browser.

Paste a URL

This mode is optimized for YouTube links (instant thumbnail). For other websites, browsers may block reading the HTML due to CORS.

Working…

Disclaimer: This Open Graph Preview is a best-effort viewer. Social platforms can cache, crop, or rewrite previews. No promises are made whatsoever.

og:title	—
og:description	—
og:image	—
og:url	—
og:site_name	—
og:type	—
twitter:card	—

Title (og:title)

Aim for a title that still makes sense when truncated on mobile.

Site name (og:site_name)

Optional, but it helps branding in previews.

Description (og:description)

Keep it simple. One benefit + one detail is usually enough.

Canonical page URL (og:url)

Use the final public URL (HTTPS). Avoid UTM parameters here if possible.

Type (og:type)

Most pages are fine with website.

Image URL (og:image)

Best practice: 1.91:1 aspect ratio. Common export: 1200×630.

X / Twitter card

If you want the big image card, choose summary_large_image.

Optional: og:image:width

Helps some crawlers render faster when you include size.

Optional: og:image:height

Match your actual image dimensions.

More tools you might need

Open Graph Preview: paste a link and instantly see the social image

When a link preview looks wrong, people skip it. The fastest fix is to check what your URL is actually sending to social platforms—especially the preview image. This Open Graph Preview tool lets you paste a URL (like a YouTube link) and immediately see a card-style preview image plus the key fields that drive social sharing: title, description, and image. If your site tags need work, you can switch to the generator and create clean meta tags you can paste into your page.

Table of Contents

How to Use (Step by Step) Why Use This Tool / Key Features Common Use Cases Technical Background (Practical) Tips & Best Practices FAQ

How to Use Open Graph Preview — Step by Step

Paste your URL: drop any link into the input box (example: a YouTube video URL).
Tap “Show Social Preview”: the tool tries to load the Open Graph data and the preview image.
Switch platforms: tap Facebook / LinkedIn / X / Discord to see different preview trims.
Fix tags if needed: jump to “Generate Tags” to build correct meta tags and copy them into your site.

Why Use This Tool / Key Features

Instant preview image: paste a link and immediately see the social preview card image.
YouTube-optimized: reliable thumbnail + title extraction for YouTube URLs.
Quick OG checks: highlights missing or risky fields like missing og:image.
Platform toggles: preview trims that mimic how different apps can display the same data.
Tag generator included: build Open Graph + X/Twitter tags in seconds.
Offline-friendly UI: no installs, no accounts, mobile-first controls.

Common Use Cases

Sharing a YouTube video: confirm the thumbnail looks right before posting to Facebook or LinkedIn.
Fixing “no thumbnail” previews: quickly see if your URL provides an image field at all.
Testing marketing links: verify the title/description read clean and clickable on mobile.
QA for new pages: generate tags for a new landing page, then preview what your share card could look like.

Technical Background (Practical): why link previews sometimes fail

Open Graph (often written as OpenGraph) is a set of meta tags that tell social platforms what to display when a link is shared: the title, description, and image. The official spec is described by the Open Graph protocol. Open Graph protocol (official).

One important limitation: a browser tool can’t always fetch and read arbitrary website HTML because of security rules (CORS). That’s why this URL-based Open Graph checker is most reliable with providers that expose safe metadata endpoints (like YouTube), while some websites may require server-side scraping or platform debuggers to see what Facebook/LinkedIn actually cached.

Tips & Best Practices (for better previews)

1) Use a consistent OG image size

Stick to a clean 1.91:1 image (many teams export around 1200×630). It reduces weird crops and makes your previews look consistent across apps.

2) Always use absolute HTTPS image URLs

Relative paths can break previews. Use full URLs like https://example.com/og.jpg. If you’re converting images for OG, try Ultimate Image Converter.

3) Write a description that sounds human

Your og:description should read like a short promise, not a keyword list. One benefit + one detail is usually the sweet spot.

4) Clean your markup before publishing

Broken HTML can cause tags to be skipped. If you’re editing templates, run your snippet through HTML Formatter and preview it with Preview HTML code online.

5) If the preview is “stuck,” refresh the cache

Platforms cache link previews. After you update tags on a live page, force a re-scrape with Facebook Sharing Debugger or LinkedIn Post Inspector.

FAQ

What is an Open Graph checker?

An Open Graph checker reads (or reconstructs) the title, description, and image used for social sharing cards. This page also includes an Open Graph Preview card so you can see the result visually.

Is there an Open Graph preview extension?

Yes, extensions exist. This tool is a simple alternative: paste your URL and get a quick preview, then switch to the generator if your tags need fixing.

Does this include an Open Graph generator?

Yes. Open the “Generate Tags” tab, fill in your URL, title, description, and image, then copy the meta tags into your page.

Is this an Open Graph validator online?

It’s a client-side validator for what the tool can safely read in a browser. Some websites block cross-origin reads, so a fully universal “URL scraper” validator typically needs a backend.

What is an Open Graph Debugger?

An Open Graph Debugger is an official platform tool that re-scrapes a live URL and shows what the platform sees. Facebook Sharing Debugger and LinkedIn Post Inspector are the most commonly used.

What is the best Open Graph size?

Many teams choose a 1.91:1 image (often around 1200×630). Keep text large and simple so it stays readable on mobile previews.

Open Graph React: why is my preview wrong?

If your OG tags are injected client-side, crawlers may not execute your JavaScript. The safer approach is server-side rendering (SSR) or pre-rendering so the tags exist in the initial HTML.

Wrap-up

If your share card looks wrong, the fastest move is to check the image and key fields from the URL. Use this Open Graph Preview to paste a link (especially YouTube) and instantly see how your preview might appear, then generate clean tags if you need a fix. Bookmark it, share it with your team, and save time on social preview troubleshooting.