Blog
-
Open Graph mistakes, in order of how often they happen
A checklist of what actually goes wrong with link previews, ordered by frequency, each with the one-line fix and how to confirm it.
-
You can't change someone else's link preview
The preview comes from the destination page's own tags. Which means only whoever controls that page controls the card — and why that boundary matters.
-
og:type and the metadata around it
The tag that tells platforms what kind of thing your page is, plus the site name, locale and article tags that do slightly less than people expect.
-
og:url, canonical, and consolidating shares
Two tags that both name the real address of a page, read by different systems. Getting them to agree is what stops your engagement fragmenting.
-
A/B testing a link preview
Testing previews sounds easy and is statistically awkward. When it is worth doing, and the cheaper alternative most of the time.
-
Tracking clicks on shared links
Click counts and page views measure different things, and the gap between them is mostly crawlers. What each number is actually good for.
-
How URL shorteners affect link previews
A shortened link adds a redirect hop, and what previews depends on whether the shortener passes through or serves its own tags.
-
UTM parameters, and what they cost you
Five query parameters that tell your analytics where a visitor came from. They also fragment your URLs, which has consequences worth knowing.
-
Preview crawlers and JavaScript
Most link-preview crawlers do not run JavaScript. If your tags are injected client-side, they are invisible — and it looks fine in your browser.
-
Link previews in Slack and other chat apps
Chat apps read the same tags with different priorities, and Slack is the one that actually respects your HTTP caching headers.
-
Twitter cards and how they relate to Open Graph
You need one twitter tag, not a duplicate set. It falls back to Open Graph for everything else — and it uses name, not property.
-
Generating preview images automatically
Three approaches — build-time, on-demand, and one static image per site. Which to pick depends on how many pages you have.
-
Designing a preview image that works small
Cards render at roughly a third of the size you design them at. Four rules for text, contrast and margins that follow from that.
-
Writing preview titles and descriptions
A card's title has room for roughly eight words and its description for fewer than you think. Front-load, and stop repeating yourself.
-
How to test a link preview before sharing
Check the raw HTML with curl, then the platform's debug tool. Two steps, in that order, and they catch different failures.
-
How to refresh a cached link preview
Use the platform's own debug tool to force a re-fetch, and change the image filename. Why one without the other often fails.
-
Why your link preview shows the wrong image
Almost always a cache. The platform built a card once, kept it, and your edits since then are invisible to it.
-
What size should an Open Graph image be
1200 by 630 pixels, under about a megabyte, PNG or JPEG. Why that shape, and what breaks when you use something else.
-
What Open Graph actually is
Open Graph is a handful of meta tags that tell other sites how to display your link. Four of them do almost all the work.
-
Previews for pages that aren't articles
Homepages, docs, product pages and app screens each need a different approach — and for some of them one site-level card is the right answer.