Tagged “open-graph”
-
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.
-
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.
-
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.
-
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.
-
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.