Writing preview titles and descriptions
Front-load the meaningful words, keep the title to something like eight, and don’t repeat the title in the description. Preview cards truncate at lengths that vary per platform and per screen width, so the only reliable design assumption is that the end of your text may not be shown.
That constraint does most of the work. The rest is not wasting the space you do have.
Assume truncation, don’t calculate it
You’ll find specific character limits quoted for every platform. They’re approximations at best: truncation depends on the platform, the surface (feed, sidebar, direct message), the screen width, and the font.
So rather than fitting a number, write so the sentence survives being cut. If the first half of your title conveys the point, truncation is a cosmetic issue. If the point is in the last three words, it’s a functional failure on half the surfaces your link appears on.
A practical target: a title around eight words, a description around twenty. Not because those are limits, but because text that short rarely gets cut anywhere.
Front-loading, concretely
Compare:
A complete guide to understanding how Open Graph meta tags control link previews
Cut at half its length, that reads “A complete guide to understanding how…” — which says nothing.
Open Graph tags: what controls your link preview
Cut anywhere after the third word, it still carries the subject.
The rule generalises: put the subject first, the framing second. “A guide to”, “Everything you need to know about”, “How to understand” — these are all prefix words consuming the space where your subject should be.
The title doesn’t have to be your <title>
Two different jobs.
Your <title> element serves search results and browser tabs, which is why it often carries a site-name
suffix — Open Graph tags explained — Example.com. Useful in a SERP where the source isn’t otherwise
obvious.
A preview card already shows your domain as a separate label. Repeating the site name in og:title
spends words on information the card is already displaying.
<title>Open Graph tags explained — Example.com</title>
<meta property="og:title" content="Open Graph tags explained">Small difference, and it’s free.
The description should add, not echo
The most common waste: a description that restates the title.
Title: How to refresh a cached link preview Description: Learn how to refresh a cached link preview.
The second line taught the reader nothing. They already read the first one — it’s directly above.
Use it for the thing that makes them click: the specific answer, the surprising part, the scope.
Title: How to refresh a cached link preview Description: Use the platform’s debug tool, and change the image filename. One without the other often fails.
Same space, actual information. Someone can now tell whether this page addresses their problem.
Say the answer
For anything question-shaped, the description is the place to answer it rather than promise an answer.
Description: Wondering what size your Open Graph image should be? We break down everything you need to know.
versus
Description: 1200 by 630 pixels, under a megabyte, PNG or JPEG. Why that shape, and what breaks when you use something else.
The second is more useful to a reader deciding whether to click, and — this is the part people worry about — it doesn’t cost you the click. Someone who needs the number needs the reasoning too. Someone who only needed the number was never going to read the article, and giving it to them buys goodwill instead of a bounce.
Things that read as noise
All caps. Reads as shouting in a feed of normal sentences.
Emoji at the start. Occupies the most valuable position in the string. One, mid-string, is fine if it’s actually informative.
Clickbait framing. “You won’t believe”, “This one trick”. Costs credibility for a marginal click, and repeat exposure trains people to skip your links.
Trailing ellipses. Deliberately implying truncation to force a click. Transparent, and the platform may add its own ellipsis on top.
Keyword stuffing. A card is read by a person in about a second. Repeated keywords make it read as machine-generated, which is a click-through cost, not a ranking benefit.
Per-page, not per-site
A surprising number of sites ship one set of Open Graph tags across every page — usually the homepage’s. Every shared link then produces an identical card, so the preview says nothing about the specific page and every share looks like every other.
Per-page tags are a template change, once. Fall back to site defaults only where a page genuinely has nothing specific to say.
The check that matters
Read the title out loud, in isolation, without the article in front of you.
If it tells you what the page is about, it works. If you need context you only have because you wrote it, it doesn’t. That’s the situation of everyone who sees the card in a feed — no context, one second, and a title that has to stand alone.