Draftcamp

Open Graph preview

See how a URL renders when shared, and which tag each platform actually falls back to

Enter a URL to see its card

We fetch the page, resolve the tags the way a platform does, and show you the card plus what is missing.

What a platform actually reads

When a link is pasted into Slack, LinkedIn, X or iMessage, that platform fetches the page and builds a card from its meta tags. It never runs your JavaScript and never sees your CSS - it reads the tags in the head and nothing else.

The fallback chain

Most platforms resolve in the same order, and this preview follows it:

  • Title - twitter:title, then og:title, then <title>
  • Description - twitter:description, then og:description, then the meta description
  • Image - twitter:image, then og:image, then nothing

Which is why duplicating every Open Graph tag as a Twitter tag is usually wasted work. The one genuinely worth setting separately is twitter:card, because it decides between the large image and the small thumbnail.

The three failures that account for most broken cards

  • A relative og:image. The crawler has no page context to resolve it against. Absolute HTTPS URL or nothing.
  • An unreachable image. Behind auth, blocked in robots.txt, or served from a host that refuses unknown user agents.
  • Aggressive caching. You fixed the tags and the old card persists for days. Facebook Sharing Debugger and LinkedIn Post Inspector force a re-scrape; X's cache just has to expire.

Not an SEO feature

None of these tags are ranking factors. They decide whether a link looks worth clicking when someone shares it - and a link that renders as a grey box with a bare URL gets shared, and clicked, measurably less.

To write the tags in the first place, use the meta tag generator instead.

Common questions

Why does my link show no image when shared?
Almost always because og:image is missing, is a relative path rather than an absolute HTTPS URL, or points at something the platform cannot fetch - behind auth, blocked by robots.txt, or too large. The crawler fetching your card has no page context, so relative paths cannot resolve.
What image size should I use?
1200 by 630 pixels, under about 5MB. Platforms crop differently, so keep text and faces away from the edges. Below 600 by 315 most platforms downgrade to the small square thumbnail regardless of your twitter:card setting.
I updated the tags but the old card still shows.
Platforms cache aggressively, often for days. Use Facebook Sharing Debugger and the LinkedIn Post Inspector to force a re-scrape. X has no public equivalent, so its cache has to expire on its own.
Do I need twitter: tags if I have Open Graph?
Mostly no - X falls back to Open Graph for title, description and image. The exception is twitter:card, which decides between the large image and the small thumbnail. That one changes the card materially and is worth setting explicitly.
Does any of this affect SEO?
Not directly. Open Graph tags are not ranking factors. They affect whether a shared link looks worth clicking, which affects traffic and the secondary signals that follow from it - and a link that renders as a bare grey box in Slack simply gets shared less.