Write SEO, Open Graph and X card tags with every value escaped for an attribute, checked against the protocol, and the cut shown per platform.
Initializing in your browser…
Paste a page head and see the card each platform actually gets: the title cut at its own limit, the image measured, and what the protocol says is missing.
Build a Subresource Integrity attribute, with more than one hash if you want, and check an existing one against the file it is meant to pin.
Create favicons from text, emojis, or images with all device sizes (16x16 to 512x512), background/text color customization, border radius control, and batch download
You are adding social tags to a review page. The title has a straight quote and an ampersand in it, which is what a product review title usually has.
What you type
Title The 24" Monitor Review & Buyer’s Guide og:image /images/social.png og:type blog og:url (left empty)
What comes out, and what a parser makes of it
<meta property="og:title"
content="The 24" Monitor Review & Buyer’s Guide">
Read back with the browser's own parser:
"The 24" Monitor Review & Buyer’s Guide" what was typed
The same title written straight into the attribute:
<meta property="og:title" content="The 24" Monitor Review & ...">
reads back as "The 24" six characters
[error] A required Open Graph property is missing: og:url
[error] "blog" is not an Open Graph type
[error] og:image will not load
This is a relative URL. A crawler has no base to resolve it
against, so the share shows nothing at all.
[warning] No og:image:alt
Where the title gets cut, per platform:
Google 60 X 70 Facebook 88 LinkedIn 119
Slack 120 Discord not at allThe six characters are the finding. A meta tag puts your title inside a double-quoted HTML attribute, so the straight quote in 24" ends that attribute, and everything after it is parsed as further attributes rather than as part of the title. The tag looks present in the page source, validates, and gives a crawler the word "The 24". A deliberately hostile value goes further and closes the element, which is how a page title becomes markup.
The ampersand is quieter and worse. Written raw it usually parses back correctly, so it seems harmless, until someone escapes it once themselves: a title stored as Save 50% &amp; more comes back out of a parser as Save 50% & more, and the data has changed with nothing to show for it. Escaping every value on the way out is what makes both cases go away, and the project tests check that against Chrome's own HTML parser rather than against a regular expression, over a corpus that includes a quote, a bare ampersand, angle brackets, an already-escaped ampersand, an attribute breakout, an emoji and a flag.
The three errors are each from a document. og:type has twelve values in the Open Graph protocol and "blog" is not one of them, so a consumer ignores it and treats the page as a website. og:url is one of the four properties the protocol calls required, and leaving it out means a share resolves to whatever URL the sharer happened to be on, so one page shared from a tracking link, a search result and a redirect becomes three objects with three separate like counts. And a relative og:image is the failure that produces no error anywhere: the tag is valid, the markup is fine, and the share has no picture, because the crawler fetching that URL has no page to resolve it against.
The six cut lengths are what a limit looks like when it is shown rather than described. They are what each platform documents, and the page says so: nothing running in a browser can see what Facebook renders. What is measured is where the string ends.
Fill in the form and get meta tags with every value escaped for an attribute, so a title with a quote or an ampersand in it survives a parser unchanged. Each value is then checked against the Open Graph protocol and the X card documentation, the image is fetched and measured, and every platform shows where it cuts your title rather than describing a limit.
The first is escaping, and it is the one that quietly corrupts data. A meta tag puts your title inside a double-quoted HTML attribute, so a straight quote in it ends the attribute and everything after becomes new attributes: a title like The 24" Monitor Review comes back out of a parser as The 24, and a deliberately hostile value can close the tag and open a script element. A bare ampersand is subtler. Tips & Tricks parses back as Tips & Tricks and looks fine, but a title someone has already escaped once, Save 50% &amp; more, comes back as Save 50% & more, and the data has silently changed. Every value here goes out through the same escaper the HTML Entity Encoder uses, and the tests put the generated markup through the browser's own HTML parser and compare what comes back against what was typed, on a corpus that includes a quote, a bare ampersand, angle brackets, an already-escaped ampersand, an attribute breakout, an emoji and a flag.
The second is the vocabulary. The Open Graph protocol names four properties as required for every page: og:title, og:type, og:image and og:url, and it lists twelve object types. "blog" and "product" are not among them, and this tool used to offer both. og:url is the one people leave out and it is the one that costs most: without it a share resolves to whatever URL the sharer happened to be on, so the same page shared from a tracking link, from a search result and after a redirect becomes three different objects with their own like counts. The X card documentation defines exactly four card types, and the player and app cards need fields beyond what any tag generator writes, which is said here rather than left to be discovered.
The third is the image, which is where most shares actually fail. og:image must be an absolute URL with a scheme: a relative one is valid HTML, produces a tag that looks right, and shows nothing at all, because a crawler has no page to resolve it against. That is an error here rather than a note. Beyond the URL, the file itself is fetched from this page and measured: Facebook will not use an image under 200 by 200 pixels at all, and it crops to 1.91:1 while X crops summary_large_image to 2:1, so a square image loses its sides and a 4:1 banner loses its top and bottom. The measured size, the measured ratio and what will be cropped are all reported from the file rather than from what you believe about it, and a declared og:image:width that disagrees with the file is called out.
One distinction is kept explicit throughout. The escaping is measured: the browser's parser settles what the markup means and there is no room for opinion. The truncation lengths are not measured, because nothing running in your browser can see what Facebook renders. They are what each platform documents, each is shown with its source, and what the page does with them is show the cut rather than assert that it happens. Six platforms are previewed and they do not agree: a 200 character title is cut at 60 for Google, 70 for X, 88 for Facebook, 119 for LinkedIn, 120 for Slack, and not at all for Discord.
What you type stays in your browser. Only the settings, the og:type, the card type, the robots directive and the two toggles, go into the share link, so a title and a description never reach the address bar, the history or a link shared from here.
Product names and headlines are full of both. The escaping here means the tag says what you typed rather than half of it.
Almost always a relative og:image or an image under 200 by 200. Both are reported here, with the file measured rather than assumed.
Six platforms, six different limits. The previews show the cut rather than telling you a number to count against.
Paste its head into the Open Graph Preview, which reads the tags with the browser's parser and runs the same checks.
Because a meta tag puts it inside a double-quoted attribute, and an unescaped quote ends that attribute. Everything after it becomes new attributes, so a parser reads only the part before the quote. Every value here is escaped, and the tests check that against the browser's own parser.
The Open Graph protocol lists it as one of four required properties, and it matters more than it looks. Without it a share resolves to whatever URL the sharer was on, so the same page shared from a tracking link, a search result and a redirect becomes three separate objects with their own counts.
The two usual causes are a relative og:image, which a crawler cannot resolve because it has no page context, and an image under 200 by 200 pixels, which Facebook will not use at all. Both are checked here, and the image is fetched and measured rather than taken on trust.
1200 by 630 is the recommendation, which is 1.91:1. Facebook crops to that ratio and X crops summary_large_image to 2:1, so a square image loses its sides. The page reports the measured ratio and says which edges will go.
No. The protocol defines twelve: website, article, book, profile, four music types and four video types. Anything else is ignored and a consumer treats the page as a website.
From each platform's own documentation, and each preview names its source. They are not measured, because a page in your browser cannot see what Facebook renders. What is measured is the cut, which is shown rather than described.
X falls back to the Open Graph tags when the twitter: ones are absent, so you only need a twitter: tag where you want something different. This tool writes one only when you set it, rather than duplicating og:image as twitter:image for no reason.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.