What are Open Graph meta tags?

Open Graph (OG) tags are HTML meta tags that control how a page appears when shared on social media. The og:title, og:description, and og:image properties define the title, text snippet, and thumbnail shown in link previews on Twitter/X, LinkedIn, Facebook, Discord, and other platforms.

How does the URL fetch work?

When you enter a URL, the tool fetches the page HTML via a public CORS proxy (AllOrigins) and extracts the meta tags. The fetch happens in your browser — no data is stored on any server. Some sites block cross-origin requests; for those you can paste the page source directly instead.

Which social networks are previewed?

The tool shows four preview cards: Twitter/X Card (summary_large_image layout), LinkedIn Share, Facebook Share, and Discord Embed. Each card respects the platform's own fallback rules — for example, Twitter uses twitter:title if present, falling back to og:title.

What does the OG Validator check?

The validator marks missing required fields (og:title, og:description) as errors and missing recommended fields (og:image, og:url) as warnings. All errors and warnings are shown with explanations so you know exactly what to fix.

Can I use the generated snippet directly in my site?

Yes. The "Copy Snippet" button copies valid HTML meta tags that you can paste into the of your HTML document, Next.js layout, or any other templating system. The snippet only includes fields that have a value.

Open Graph Preview Tool — Test OG Meta Tags for Social Media

What Is an Open Graph Preview Tool?

An Open Graph (OG) Preview Tool lets you see exactly how a webpage will look when it is shared on social media — before you post it. You enter a URL or paste your HTML, and the tool instantly shows preview cards for Twitter/X, LinkedIn, Facebook, and Discord. No browser extension, no account, no guessing.

Open Graph tags are HTML meta tags that live in the <head> of a webpage. They tell social platforms what title, description, and image to use when someone shares a link. Without them, platforms guess — and the result is usually a blank card, the wrong image, or a truncated headline.

How to Use This Tool

URL mode: Paste a full URL (e.g. https://example.com/blog/my-post) and click Fetch. The tool retrieves the page HTML via a CORS proxy and extracts all OG and Twitter meta tags automatically. Some sites block external fetches; for those, use Manual mode instead.

Manual mode: Enter the values directly — og:title, og:description, og:image URL, og:url, and og:site_name. Previews update in real time as you type. This is useful for testing tag values before you publish your page.

The Four Platform Previews

Platform	Card Style	Key Tags Used
Twitter / X	summary_large_image	twitter:title, twitter:description, twitter:image (falls back to OG)
LinkedIn	Horizontal thumbnail	og:title, og:description, og:image
Facebook	Full-width image	og:title, og:description, og:image, og:site_name
Discord	Embed with accent bar	og:title, og:description, og:image, og:site_name

Twitter and Discord fall back to the OG tags automatically if no twitter: tags are set — so a well-configured set of OG tags covers all four platforms.

OG Tag Validator

The validator checks for the most important OG tags:

og:title (required) — shown as the headline in all platform previews. Keep it under 60 characters to avoid truncation.
og:description (required) — the text snippet shown below the title. Aim for 100–150 characters.
og:image (strongly recommended) — the thumbnail. Recommended size: 1200 × 630 px (1.91:1 ratio). Use HTTPS, and keep files under 1 MB.
og:url (recommended) — the canonical URL for this page. Prevents duplicate sharing counters.

Missing required fields are highlighted in red; missing recommended fields in amber.

Copy the OG Snippet

Once you are satisfied with the preview, click Copy Snippet to copy a ready-to-paste block of HTML meta tags. Paste it into the <head> of your HTML, your CMS template, or your Next.js <Metadata> export. The snippet only includes tags that have a value.

Common OG Tag Problems

Wrong image displayed: Make sure og:image is an absolute URL with HTTPS. Relative paths (e.g. /images/hero.jpg) are not supported. If the image recently changed, clear the platform’s cache — LinkedIn, Facebook, and Twitter all have link debugger tools for this.

No preview at all: The page may be missing og:title and og:description entirely, or may be blocking robots with a noindex directive. Use this tool’s URL mode to quickly check what tags are actually served.

Title truncated: Twitter truncates og:title after about 70 characters. Facebook after around 60. Shorter, punchy titles work best across all platforms.

Discord shows the wrong site name: Discord uses og:site_name for the link source label. If it is missing, Discord shows the raw hostname. Set og:site_name to your brand name.

Privacy

Everything in this tool runs entirely in your browser. No data you enter — URLs, titles, descriptions, or images — is stored or sent to any backend. The optional URL fetch goes to a public CORS proxy (AllOrigins); only the URL you provide is sent, and only to retrieve the page HTML.

Open Graph Preview