~/TechPurAI
~/tools/og-meta-preview
AI Search & LLM Visibility

OG / Meta Tag Preview Tool

Before a link is shared, most social platforms and chat apps fetch the target page and read its Open Graph and Twitter Card meta tags to build a preview card — the title, description, and image shown alongside the link. This tool fetches those same tags and renders the resulting card, so you can check what a shared link will actually look like before it's posted anywhere.

Why this matters beyond just curiosity

A missing or wrong og:image is one of the most common, and most visible, launch-day content bugs — a shared blog post or product page showing a broken image icon, a stale title, or no preview at all looks unpolished in a way that's easy to miss just by looking at the rendered page itself, since none of these tags are invisible in normal browsing and there's no obvious symptom on the page to prompt a check. A page can pass every other SEO and technical review and still embarrass a marketing team the moment it's actually posted to LinkedIn or shared in a Slack channel, purely because nobody previewed the share card before it went out.

Open Graph versus Twitter Card tags: two overlapping but distinct systems

Open Graph, originally introduced by Facebook, is the more broadly adopted standard — og:title, og:description, og:image, and og:site_name are read by Facebook, LinkedIn, Slack, Discord, and the majority of other platforms that build a link preview. X/Twitter maintains its own separate but overlapping Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image), which give slightly finer control over how a card renders specifically on that platform — a summary_large_image card, for instance, shows a large, prominent image rather than a small thumbnail. Critically, X/Twitter falls back to reading the equivalent Open Graph tags for any Twitter-specific tag that's missing, which is why most pages get away with setting Open Graph tags as the primary, complete set and adding only the twitter:card type tag on top, rather than fully duplicating every field under both namespaces.

What this tool actually fetches

Only the target page's HTML <head> — no scripts run, no cookies or credentials are sent, and nothing is stored. The server-side request that fetches the page is deliberately restricted to public web addresses: it resolves the target's DNS itself and rejects private, loopback, and link-local IP ranges (including cloud metadata endpoints), re-validates on every redirect hop, and enforces a response-size cap and a strict timeout — the same restriction real link-preview systems enforce for their own security, applied here specifically so this tool can't be turned into a way to probe internal network addresses.

Why platform previews can still differ from what this tool shows

Even with correct, well-formed tags, a specific platform's actual rendered preview can vary slightly from any generic preview tool, this one included — image crop ratios, character truncation limits, and exactly which fallback tags get consulted are all platform-specific implementation details that aren't part of any single unified spec, and each platform is free to interpret the same tags with its own visual treatment. Treat this tool's preview as a strong, reliable indicator of whether the underlying tags are present and well-formed, and use each platform's own official debugging tool (Facebook's Sharing Debugger, LinkedIn's Post Inspector) for a final pixel-accurate check before something genuinely high-stakes goes out.

The AI-SEO angle: these tags are increasingly read by more than social platforms

Open Graph tags were originally built for social sharing, but the underlying idea — a concise, author-written summary distinct from the raw page content — has become useful well beyond that original purpose. A growing number of AI systems that fetch a page to summarize or cite it draw on the same og:title and og:description fields, since they're a readily available, pre-written condensation of the page's content that's often more concise and purpose-built than trying to summarize the full body text from scratch. That means a clear, accurate, well-written og:description isn't purely a social-media nicety anymore — it's one more surface where deliberate, careful writing can shape how a page gets represented when an AI system encounters it, alongside the title tag, meta description, and structured data covered by this site's other SEO tools.

Why the fallback behavior matters when tags are missing entirely

A page with no Open Graph tags at all doesn't necessarily produce a blank or broken preview — most platforms fall back to guessing from whatever's available: the page's <title> tag standing in for og:title, the first meaningful paragraph or a meta description standing in for og:description, and sometimes the largest or first image found in the page's markup standing in for og:image. This fallback behavior is inconsistent across platforms and genuinely unpredictable — one platform's guess at an image might be a small icon buried in a sidebar, while another correctly finds a genuinely relevant hero image, purely due to differences in each platform's own heuristics. Relying on fallback behavior instead of setting explicit Open Graph tags means giving up control over exactly the part of a shared link most likely to determine whether someone actually clicks it, which is precisely the reason every page meant to be shared deserves its own deliberately written tags rather than trusting a platform to guess well.

A quick pre-publish checklist

Every page worth sharing deserves at minimum: an og:title distinct enough to stand alone outside the context of the page it came from, an og:description that reads as a genuine, compelling summary rather than a truncated first sentence of body copy, an og:image sized appropriately (roughly a 1.91:1 aspect ratio is the most broadly compatible choice across platforms), and an og:site_name so the source is identifiable at a glance even before a reader clicks through. None of these are difficult to set correctly, but all of them are easy to forget precisely because they're invisible until the moment a real share reveals whether they were done right.

Different platforms cache previews differently

Facebook, LinkedIn, and Slack each cache a link's preview the first time it's shared, and don't always re-fetch it when the page's tags later change — if you've fixed an og:image and a platform still shows the old one, that platform's own cache-busting/re-scrape tool (not this one) is usually what's needed to force a refresh on their end.

Frequently asked questions

Why does this need a server, when most tools on this site run entirely in the browser?

Browsers block a webpage's JavaScript from fetching another site's HTML directly — that's the same-origin policy, and it applies here even though the goal is just reading public meta tags. Reading arbitrary pages requires a server-side request, which is why this is one of a small number of tools on this site with a backend component instead of running purely client-side.

What are Open Graph and Twitter Card tags, exactly?

They're <meta> tags in a page's <head> that tell platforms like Facebook, LinkedIn, Slack, and X/Twitter what to show when a link is shared — a title, description, and image distinct from what's visible on the page itself. Open Graph (og:title, og:description, og:image, og:site_name) is the more widely supported standard; Twitter Card tags (twitter:card, twitter:image) are a similar but separate set X/Twitter also reads, falling back to Open Graph tags where its own aren't present.

Why would a page's actual title differ from what shows up when it's shared?

The browser tab and search results typically use the <title> tag and a meta description, while social platforms specifically look for og:title and og:description first. A page can — and often should — set these independently: a slightly punchier, share-optimized title and description than the more literal one used for the tab and search snippet.

What does it mean if og:image doesn't show up in the preview?

Either the page genuinely has no og:image tag (many platforms will then fall back to guessing an image from the page content, with inconsistent results), or the image URL it points to is broken, blocked, or requires authentication to load — worth checking directly in a browser tab if the preview here comes back empty.

Do AI systems and answer engines read these same tags?

Often, yes, at least in part — many AI systems that fetch and summarize a page for a chat response or an AI-generated search result draw on the same og:title, og:description, and structured metadata that social platforms use, since it's a readily available, pre-summarized description of the page the site's own author wrote. A clear, accurate og:description isn't just a social-sharing nicety anymore; it's one more surface where a concise, well-written summary can shape how an AI system represents your page when it's cited or summarized.