Meta Tag Builder (OG + Twitter)

You paste a link into Slack or LinkedIn and it shows a bare URL, or an image that belongs to some other page. That happens when the meta tags platforms read before drawing the card are missing. Fill in title, description, image and URL, pick a twitter:card type, and the builder returns the nine Open Graph and Twitter tags ready to paste into your head, with a preview beside them showing how the text will wrap.

Values come out escaped: a title containing quotes or an angle bracket turns into HTML entities instead of breaking the content attribute. Two conventions catch people out. og:image has to be an absolute https URL, since a relative path will not resolve. And twitter:card set to summary_large_image is what produces the wide banner; summary gives you the small square thumbnail next to the text.

Paste the block inside head. Point og:url at the canonical, absolute version of the page, and host the image somewhere public with no login, at 1200 by 630 pixels. The preview frame shows the proportions and where text gets cut off; the image itself is worth checking in the platform's own debugger, which also clears the cached version after you publish. There is no copy button, so select the snippet by hand. Everything runs in your browser.