Open Graph tags

Meta tags that tell Slack, iMessage, and X what title, blurb, and picture to show when someone pastes your link.

the thing that makes links preview nicelywhy does my link show blankog tagsopen graf tagssocial preview meta tagslink preview settingsthe code that sets the title and picture when you share a pagemeta tags for sharing

See it

Live demo coming soon

What it is

Open Graph is a set of meta tags in your page head that hand every app a ready-made summary of the page: og:title, og:description, og:image, og:url, og:type, og:site_name. Facebook invented the protocol in 2010 and everyone else adopted it, so those same six tags now drive previews in Slack, iMessage, WhatsApp, LinkedIn, Discord, and X. Without them, apps fall back to guessing from your <title> and the first image they find, which is how you end up with a blank grey card.

Reach for them on anything meant to be shared: marketing pages, blog posts, docs, product pages, and especially anything with a share button. Set og:url to the canonical absolute URL, keep og:title punchy (it can differ from the SEO title tag, and often should), and add twitter:card = summary_large_image so X renders the big version instead of a thumbnail.

Two gotchas. Image URLs must be absolute (https://example.com/og.png, never /og.png) or most scrapers drop them silently. And previews are aggressively cached: after you fix the tags, the old card sticks around until you force a refresh through Facebook's Sharing Debugger, LinkedIn's Post Inspector, or by appending a cache-busting query string.

Ask AI for it

Add a complete set of Open Graph and Twitter Card meta tags to every page of this site. Include og:title, og:description, og:image (absolute https URL, 1200x630), og:image:alt, og:url (the canonical absolute URL), og:type, og:site_name, plus twitter:card set to summary_large_image and twitter:title / twitter:description / twitter:image. Drive the values from each page's real metadata instead of hardcoding one global card, and make sure nothing emits a relative image path.

You might have meant

open graph imageunfurltitle tagmeta description

Go deeper