Placard · the card a link becomes
What your link looks like
when somebody shares it.
Paste a link into a feed, a chat or a message and what appears is a
card: a picture, a title, a line of description, the site’s
name. None of it is chosen by the app. It is read from tags the page
carries for exactly that purpose — the Open Graph
og: set and the twitter: set — and a
picture that the app fetches, measures and crops. Type an address and
this does the same: reads the tags, fetches the picture, and draws the
card in three generic shapes.
Then it says what would go wrong. A picture that is SVG, too small, the wrong shape or served over plain http; an address written relative where an absolute one is required; a missing width, height or alt text. The page is read by a guarded relay on this site that reaches the public internet only, and the picture is shown to you from where it lives.
og: and twitter: tags, read from the page · the picture fetched and measured, never assumed · 1.91:1 and 1200×630 checked · three generic card shapes, no one platform’s
Check
One link, read the way a card-reader reads it.
The relay fetches the page (the first megabyte of it, which is always enough to reach the tags), follows up to five redirects, and hands back the tags; then it fetches the picture the tags name and hands back its type, its weight and its size in pixels.
The page
waiting for an address
Enter checks it too. The address goes to this site’s relay in the body of a request, is not logged; the answers are kept two minutes, locked with the address as their key, then deleted on the relay’s next call.
Nothing checked yet. The page’s own answer lands here — its final address, its status and its title — and the card is drawn below.
The previews
Three shapes a card is drawn in.
Not any one app’s design — the three shapes nearly every reader uses: a large-image card that crops the picture to 1.91:1, a summary card that crops it to a square beside the words, and the unfurl a chat draws under a message. The picture is cropped the way each shape crops it, so what you see cut here is what gets cut there.
Check a link above and its card is drawn here, three ways.
The checks
What a reader will trip on.
Each check says what was found and why it matters, in the order that matters: first what breaks the card, then what weakens it, then what is merely worth knowing. Nothing is scored.
The picture
The picture the tags name, measured: its type, its weight, its size in pixels and its shape, with the 1.91:1 crop marked on it.
The checks
Check a link and the list fills in here.
The tags
Every tag the card is made of.
Every og: and twitter: tag the page carries,
with the title, description and canonical address that stand in when
they are missing, and the icons the page names. A tag found outside
<head> is marked: some readers stop looking at the
end of the head.
Tags and icons
Method
What is fetched, by whom, and what is kept.
The page and the picture
Your browser cannot read another site’s page from script,
so the page is read by the relay that serves
Headers, headers/headers-relay.php,
on this site’s server. It fetches the address with a GET,
follows up to five redirects by hand — each one checked
again — reads at most the first megabyte, and parses the
<title>, <meta>,
<link> and <base> tags out
of it itself: scripts, styles, comments and SVG are skipped, so a
tag written inside a script is never mistaken for the page’s
own. Only the tags come back, never the page.
Then it fetches the picture the tags name (at most 8 MB) and hands back three things: the type the server declared, the type the bytes actually are, and the size — in bytes and in pixels. Never the picture itself.
What the relay refuses
Anything but http and https; any port but 80 and 443; addresses with a user name or password; IP addresses in any spelling; the special-use names (localhost, .local, .internal, .test and kin); and any name whose DNS answers include a private, loopback, link-local or otherwise non-public address — for the page, for every redirect, and for the picture. The full list, and how the vetted address is pinned for the connection, is on the Headers method.
The checks
The rules are the Open Graph protocol’s (ogp.me): absolute URLs, og:image with its width, height and alt. The numbers are the ones the big readers publish and broadly agree on: a 1.91:1 picture, 1200×630 recommended, 600×315 the floor for the large card, 200×200 the floor for any, and pictures over 5 MB skipped by several. SVG is refused by most of them. The ratio is judged within 3%, and the crop the large card makes is measured and drawn. These are the common ground, stated as such — any one reader may be stricter or looser, and none of them is imitated here.
What happens to what you type
The address goes to the relay in the body of a POST, so it never
sits in a URL a server log keeps; the relay writes no log. Its
answers are kept for two minutes in a private directory on the
server under a hashed name, encrypted with a key made from the
address itself, and deleted on the relay’s first call after
those two minutes. The site you check sees
labs.llc’s server and the user agent
labs.llc-headers/1.0, not you — until the
previews are drawn: the picture and the icons are loaded by
your own browser, straight from the site that hosts them, as
any picture on any page is, so that site sees the request. The
last address you checked is kept after the # in this
page’s address bar, which browsers never send. The tags and the
picture belong to the site that published them: they are shown to you,
never copied or republished.
Twenty reads a minute and three hundred a day from one address; each check is two (the page, then its picture).
Questions and corrections: labs@labs.llc.