Notes on Open Graph, social previews and getting more from your shared links.
A shared link comes up as a bare blue box, the wrong picture, or a title you changed last week. Nearly every case is one of six causes — tags in the body instead of the head, a stale platform cache, a relative image URL, a blocked crawler, swapped property/name attributes, or a missing required tag. A diagnostic checklist in the order that actually finds the problem. Read the full guide →
The image is what stops the scroll — and the part most likely to be cropped, blurred or dropped. Why 1200×630 (1.91:1) is the one size to design for, where each platform trims it, how to keep text legible at half resolution, the PNG-vs-JPG and file-weight rules, and why the URL must be absolute. Read the full guide →
Open Graph is a shared standard, so one block works nearly everywhere — but each network reads it a little differently. Which tags each uses, how it crops the image, how stubbornly it caches, and how to refresh it. Includes an at-a-glance table for all seven surfaces. Read the full reference →
Open Graph tags still decide how your links look when someone shares them. What's changed is that they no longer work alone: they sit alongside Twitter Cards and JSON-LD schema, and the platforms read all three.
Facebook, LinkedIn and X (Twitter) all still read OG tags to build the preview. The details have tightened, though: titles under 60 characters render better, and 1200×630px has settled in as the standard image size.
A complete set is more than og:title and og:image. Add og:description (150 to 200 characters), og:url for the canonical link, og:type (article or product), and og:site_name. Leave one out and platforms may render inconsistently or drop back to unstyled text.
Tools like OG Preview let you see these cards side by side before you publish and, in Fetch URL mode, check which tags a page already exposes — so you can spot what's missing while you still control the page.
Two posts with the same link can perform very differently, and the preview is often the reason. It's the first thing people see in a feed, and sometimes the only thing they read before deciding whether to click.
A good preview balances clarity and curiosity. Keep the title short and honest, make sure the image still reads at thumbnail size, and let the description answer "why should I care?" in the second or two people actually give it.
Posts with custom images tend to get far more engagement than those using auto-generated snippets. Even better: consistent branded templates (colours, fonts, logo placement) build recognition and trust over time.
Use OG Preview to compare different image and text combinations in the live preview before publishing — then track clicks with UTM parameters or your analytics dashboard to refine your approach.
Many assume Open Graph tags and Twitter Cards are interchangeable. They're not. While both control how content appears when shared, they use different namespaces and have different fallback behaviours.
Twitter Cards rely primarily on the twitter: namespace: twitter:title, twitter:description, twitter:image. If these are missing, X generally falls back to your OG tags — but not always consistently.
The pragmatic solution is to include both sets of tags. For example:
This maximises compatibility across platforms. Many CMS tools add both by default — but if you're hand-coding, don't forget the Twitter variants.
A social preview isn't decoration. For a lot of people it's the whole basis for the decision: they judge the link by its image and headline before reading a word of the post.
A missing image or a truncated title reads as low quality or a site nobody maintains. A clean, on-brand preview does the opposite; it builds a little trust and lifts the click-through rate.
A sloppy preview makes people assume the site behind it is sloppy too, however careful the actual work is.
Treat previews as part of your editorial workflow: preview and approve them before hitting publish, with the same care you give headlines or featured images.
Even experienced teams make these recurring mistakes:
Fix these five and your links will preview cleanly on every major platform.