Open Graph is a protocol originally designed by Facebook in 2010 that lets a page tell social platforms how to display it when shared. The og:title, og:description, og:image, og:url, og:type, and og:site_name meta tags define the card. When someone shares the URL on Facebook, LinkedIn, Slack, Discord, or any other OG-aware platform, the platform fetches the URL, parses the og:* tags, and renders a rich card with the title, description, and image.

What is a Twitter Card?

Twitter Card is Twitter's equivalent of Open Graph, with its own meta tag namespace: twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator. There are four card types: summary (small thumbnail), summary_large_image (large image above text), app (for mobile apps), and player (for video/audio). If a page has both og:* and twitter:* tags, Twitter prefers its own tags; otherwise it falls back to og:*.

Why do Slack, Discord, and LinkedIn look different?

Each platform has its own card layout and its own preference for which fields to use. Slack renders a large title with a side image and source favicon. Discord renders a wide image above the title. LinkedIn uses a smaller card similar to Facebook. Facebook itself has the most aggressive image caching — once it crawls an og:image, it caches it for days and rarely re-fetches. Twitter caches more aggressively than Slack. SiteTrace shows you exactly what each platform would render, side by side.

My page has og:image but the image doesn't show up — why?

Three common causes. One: the og:image URL is relative (e.g. /og.png) instead of absolute (https://example.com/og.png) — most platforms refuse to resolve relative URLs. Two: the image is too small (Facebook requires 1200x630 minimum for high-quality cards). Three: the image is hosted on a different origin without proper CORS or with a hotlink-protection rule — the platform fetches the image server-side, so any access control blocks the platform too. SiteTrace shows the resolved image URL and its dimensions so you can debug.

How do I cache-bust an og:image?

Change the og:image URL — even by adding a query string (og.png?v=2) — to force Facebook, Twitter, and Slack to re-fetch. They cache by URL and key, so any change is a cache miss. If you've already shipped an updated image, bump the URL in your meta tag, redeploy, then use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) and Twitter Card Validator (cards-dev.twitter.com/validator) to force a re-scrape.

Is this tool different from the meta-tag generators?

Most meta-tag generators are formatters — they help you write the og:* tags. SiteTrace reads them back and shows you how each platform will render them. The two are complementary: use a generator to create the tags, deploy them, then use SiteTrace to confirm what the platforms actually see. Note that SiteTrace parses static HTML only — pages that inject og:* tags with JavaScript (most single-page apps) will not show those tags here.

Why is the preview image sometimes blank?

Because the platform could not load the og:image. Either the URL is wrong, the image is blocked by access control, or the image is in a format the platform doesn't support (some platforms don't accept WebP, AVIF, or SVG). The SiteTrace result panel shows the resolved image URL and a preview — if the preview is broken in the panel, the platforms will also fail to render it.

Open Graph / Twitter Card

See exactly how your link looks on every platform

Paste a URL. SiteTrace reads the og:* and twitter:* meta tags and shows you the live preview for Twitter, Slack, LinkedIn, Discord, and Facebook — side by side. No signup.

last updated 2026-10-05 · built by edy appenzeller · open source

Open Graph, Twitter Cards, and link unfurls: a complete guide

Every time you paste a URL into Slack, Discord, Twitter, LinkedIn, Facebook, or any messaging app with link previews enabled, the app reads a set of meta tags from the page and renders a card. The protocol is Open Graph (og:*), originally designed by Facebook in 2010. Twitter has its own namespace. Slack, LinkedIn, Discord, and others all implement Open Graph with their own preferences. If your meta tags are missing, broken, or incomplete, your link looks like raw text — no title, no image, no description, nothing to make anyone want to open it.

The minimum viable set

Every modern page should have, at minimum:

<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://...">
<meta property="og:url" content="https://...">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="https://...">

Most platforms fall back to og:* if twitter:* is missing, so the og:* set is the most important. Twitter-specific tags only override the equivalent og:* tag on Twitter.

Image requirements per platform

Different platforms want different image sizes. Get this wrong and your image gets cropped, letterboxed, or rejected.

Facebook / LinkedIn: 1200x630 minimum for high-quality cards; smaller images render but Facebook explicitly downgrades them in the feed. The card displays at a 1.91:1 aspect ratio.
Twitter (summary_large_image): 1200x628 to 1200x675. Twitter crops intelligently but the safe zone is the center 1200x600.
Twitter (summary): 144x144 minimum, square. Used for cards that don't have a large image.
Slack: 500x260 minimum for the side thumbnail. Larger images are still rendered as the same fixed-size square.
Discord: 400x225 minimum, renders up to ~400px. Wide images get cropped from the sides.

The safest single-image strategy: produce a 1200x630 image for Facebook/LinkedIn/Twitter, and accept that Slack/Discord will downscale to their preferred aspect ratio.

Title and description limits

Each platform truncates at different lengths. Aim for the shortest to ensure nothing is cut off:

Title: keep under 70 characters for Twitter; under 60 for LinkedIn. The safe limit is 60.
Description: keep under 200 characters for Twitter; under 155 for Google search snippets. The safe limit is 155.

Why the image doesn't show up

Four common reasons an og:image renders as a blank box:

Relative URL. og:image content="/og.png" will not resolve on most platforms. Use a full absolute URL: https://example.com/og.png.
Wrong size. 200x200 will be too small for Facebook's high-quality card and may be ignored.
Hotlink-protected. If your CDN refuses requests without a Referer header, the platforms' servers (which send their own Referer or none) will get a 403.
Unsupported format. Some platforms don't render WebP, AVIF, or SVG. JPG and PNG are the safe choices.

Caching and how to force a re-scrape

Facebook caches og:image URLs for days. Twitter caches for a week. Slack caches for hours. When you change the image but the URL is the same, the platform shows the cached old image.

Two fixes:

Change the URL. Even a query string change is enough: og.png?v=2. The platform sees a new URL and re-fetches.
Use the platform's debugger. Facebook has a Sharing Debugger (developers.facebook.com/tools/debug/), Twitter has a Card Validator (cards-dev.twitter.com/validator). Paste your URL and click "Scrape Again" or "Preview Card". This forces an immediate re-fetch.

Single-page apps and dynamic meta tags

SiteTrace parses static HTML only. If your app injects og:* tags with JavaScript (every React, Vue, Svelte, or Angular SPA does this), the initial server response has empty og:* tags and the platform sees a blank card.

Three fixes:

Server-side render the og:* tags (Next.js with getServerSideProps, SvelteKit with load functions, Nuxt with useAsyncData).
Use a meta-tag service that renders a pre-rendered snapshot for the platform's crawler (e.g. Prerender.io, prerender.cloudflare.com).
Use Cloudflare Workers to inject og:* tags at the edge before the response reaches the platform's crawler (works for any framework, no SSR required).

Related SiteTrace tools: Security Headers Checker, SEO Checker, /check.

Use the API directly

The preview endpoint is also a JSON API. Free, no signup.

curl "https://api.sitetrace.it.com/api/preview?url=https://example.com" \
  -H "X-API-Key: $SITETRACE_KEY"

Returns { title, description, image, og, twitter }. The same endpoint powers this page — the form just renders the result for 5 platforms.