Open Graph Preview

Open Graph is a protocol Facebook introduced in 2010 to let any web page describe itself as a rich, structured object — a title, description, image and type — that any platform integrating the protocol can render as a preview card wherever the link is shared, rather than showing a bare blue hyperlink. It quickly became a de facto cross-platform standard: Facebook, LinkedIn, Slack, Discord, WhatsApp and most other link-preview systems read the same `og:` meta tags, which is why a single set of Open Graph tags typically covers the majority of platforms your content might be shared on, even ones that had nothing to do with Facebook's original design. Twitter (now X) built its own parallel `twitter:` tag namespace around the same time but, critically, falls back to reading standard Open Graph tags for any `twitter:` field you don't explicitly set — so in practice most pages only need to add one or two Twitter-specific tags (mainly `twitter:card`) on top of a complete Open Graph set, rather than duplicating everything. The core Open Graph tags are `og:title`, `og:description`, `og:image`, `og:url` and `og:type`. Unlike a page's own `<title>` and meta description, which are written primarily for search engines and can be fairly long, Open Graph fields are written for a much smaller, denser card format and are truncated more aggressively by each platform — which is why this tool's preview truncates the title to roughly 60 characters and the description to roughly 90-100 characters, mirroring the space most platforms actually render before cutting text off with an ellipsis. `og:type` (this tool defaults to "website", with "article" as the other common choice for blog posts and news content) affects which additional structured fields a platform expects and can influence how the card is laid out. `og:image` deserves particular care: platforms typically require a minimum resolution (Facebook recommends at least 1200×630px) to render a large, high-quality card instead of falling back to a small thumbnail or no image at all, and a missing or broken image URL is one of the most common reasons a shared link looks unexpectedly plain — this tool shows a grey placeholder card whenever the image field is empty, so you can see exactly what visitors will see if you forget to set one. `twitter:card` controls Twitter/X's card layout specifically: "summary" renders a small square thumbnail beside the text, while "summary_large_image" renders a full-width image above the text, which is the more visually prominent and generally preferred option for content where the image matters (most blog posts, products and articles). Twitter reads `og:title`, `og:description` and `og:image` automatically as fallbacks for the equivalent `twitter:` fields, so this tool only needs to ask for the card type on top of the shared Open Graph fields already entered. A properly configured Open Graph and Twitter Card setup is worth the small amount of markup it takes, because a share card is frequently the very first impression of a link a person sees, well before they decide whether to click through — a missing image, a truncated or auto-generated title, or a generic fallback description measurably suppresses click-through rate compared with a deliberately written, correctly sized card. Because platforms cache the scraped Open Graph data (sometimes for days), it's also worth knowing that updating these tags after a link has already been shared won't retroactively fix existing shared posts — each platform has its own debugging/cache-refresh tool (Facebook's Sharing Debugger, for instance) for forcing a re-scrape once you've corrected the tags.