Write the Tags, Watch the Cards

Fill in the fields on the left and every platform's card redraws on the right. The tag block at the bottom is ready to paste into the head of the page.

The card

Title (og:title), up to 60 characters shows everywhere Description (og:description), one or two sentences Page URL (og:url) Image URL (og:image), absolute https, 1200 by 630 works everywhere

Image width Image height Image alt (og:image:alt)

Site name (og:site_name) Type (og:type)

X and extras

summary_large_imageWide card with the image on top. Wants a 2:1 image. summarySmall card with a square thumbnail on the left.

Site account (twitter:site) Author account (twitter:creator)

theme-color (Discord's side bar) Also emit a meta descriptionSearch engines and iMessage read it. Same text as og:description unless you edit the output. Add og:image:secure_urlOnly needed if og:image is an http:// URL and an https:// copy exists.

<head> tags

What Each Platform Reads

Facebook, LinkedIn, Slack, Discord and iMessage read the Open Graph tags: og:title, og:description, og:image, og:url and og:site_name. X reads twitter:card to decide the layout and then twitter:title, twitter:description and twitter:image, falling back to the og:* tags when those are absent, which is why the generator only emits twitter:card, twitter:site and twitter:creator by default: repeating the title and description under both prefixes is noise. Google ignores all of it and reads the title element and the meta description, so the generator can emit that too.

The image is where previews go wrong. Use an absolute https URL, a JPEG, PNG or WebP (never SVG), 1200 by 630 pixels, under a megabyte, and declare og:image:width and og:image:height so Facebook renders the first share correctly instead of showing a text-only card until its crawler has fetched the file. The guide has the full rules and the cache refresh tools; the checker confirms the live page sends what you pasted.