Meta tag preview for Chrome
Chrome extension · v1.0.0
You wrote the meta tags. The card still looks wrong. This shows you which tag every part of the preview came from.
It's not on the Chrome Web Store yet - the listing is in review. The install link turns up here when it clears, and there is nothing to click until then.
What it asks for
- activeTab
- Reads the head of the one tab you clicked the icon on. The click is the grant, it covers that tab only, and it lapses when you navigate away.
- scripting
- The mechanism that does the reading: one function, injected on that click, returning the markup inside document.head, the page title and the lang attribute. It runs once and returns.
What it doesn't
- No host permissions and no <all_urls>, so it has no standing access to any site.
- No static content script. Nothing runs on a page until you point the extension at it.
- No storage of any kind. The markup sits in the popup's memory and goes when the popup closes.
This one is a Chrome extension rather than something to type into on this page. Click the icon on any page and it reads that page's head tags, then draws the three previews that actually matter: a Google result, a LinkedIn feed card, and a WhatsApp chat preview.
The card is wrong because a field resolved somewhere you didn't expect
Every platform walks its own ordered list of tags and takes the first one with a value in it. When a share card looks wrong it's almost never because a tag is missing outright - it's because the field resolved further down the list than you thought, and picked up a title you wrote for something else. So the extension prints the resolution for every field on every surface: description came from og:description, because the meta description is missing. The cause is visible instead of guessed at, which is the difference between fixing it and changing tags until it looks right.
Three surfaces, drawn honestly
- Google: favicon, site name, breadcrumb URL, the blue title link and the snippet, truncated where a real result truncates, ellipsis included, so you can see exactly where the cut lands.
- LinkedIn: the feed card - image on top, bold title, domain underneath. LinkedIn reads og:description and then doesn't display it in the card, and this preview doesn't pretend otherwise.
- WhatsApp: the compact chat preview, with the small square thumbnail that crops your wide og:image in a way nobody plans for.
What it flags
Alongside the previews it lists what's broken and what to do about it: a missing og:image, a title past the point where Google cuts, a description too short to earn a click, a missing canonical, a noindex you didn't mean to ship, a missing twitter:card, an og:url that disagrees with your canonical. Each one comes with a one-line fix rather than a severity badge.
Then it writes the corrected tags
One button copies a paste-ready block of head tags. Your existing values are carried through exactly as you wrote them - it never invents copy, and where a human has to write something it leaves a TODO comment instead of filler, because filler is the thing that gets published by accident and sits there for a year.
What it reads, and what it keeps
Two permissions, both on the click: activeTab, which grants access to that one tab, and scripting, which is how the head gets read. It has no host permissions and no storage - there's no history of pages you looked at, because there's nowhere to put one. The one request it makes is the preview image itself, loaded straight from wherever the page says it lives with no referrer attached, which is the same request the page makes when it renders its own image. On chrome:// pages, the Web Store and PDFs, Chrome blocks injection entirely, and the popup says why rather than spinning.
FAQ
Why does my link preview show the wrong title?
Usually because the platform resolved the field from a different tag than you assumed - og:title missing, so it fell back to the page title, or a plugin wrote its own. The extension prints which tag each field came from, so you can see the fallback instead of guessing at it.
Does LinkedIn use og:description?
It reads it, but the feed card doesn't display it - the card shows the image, the title and the domain. The preview here matches that behaviour, which is why the LinkedIn card looks emptier than you'd expect.
What size should an og:image be?
1200x630 is the reliable one. The extension reports the dimensions the page declares rather than measuring the file, and says so when they're absent - and the WhatsApp preview shows what a small square crop does to a wide image.
Does it work on a staging site or behind a login?
Yes. It reads the page you're actually looking at, logged in and rendered, rather than fetching the URL from somewhere else. That's the main reason to use an extension instead of a paste-a-URL checker.
Does it store the pages I check?
No. It has no storage permission at all. The head markup is read into the popup, used to draw the previews, and gone when the popup closes.