# Link previews: Open Graph and Twitter cards that look right
> When someone pastes your link into WhatsApp, Slack, LinkedIn or X, the preview is built from four meta tags. This guide covers the tags, the image size that renders sharply on every network, how each platform caches previews, and how to debug a preview that shows the wrong image.
Updated 2026-09-25 · Social previews · HTML version: https://getreport.app/guides/link-previews-open-graph
Most links are not clicked from a search result; they are pasted into a chat, a Slack channel or a LinkedIn post, and what people see there is a card: an image, a title, a line of description. The card is built from a handful of meta tags, and when they are missing the app picks whatever it finds first, which is usually the logo and the cookie notice. This guide sets the tags up so the preview is right on every platform, explains the one image size that works everywhere, and shows how to fix a preview that is cached wrong.
## Quick answer
```html
```
- Image: **1200 × 630 px**, under 1 MB, JPEG or PNG, absolute `https://` URL, publicly reachable (not behind a login or a bot block).
- `og:url` equals the canonical URL.
- Run the [link preview checker](https://getreport.app/tools/link-preview) to see the card as each platform renders it.
## Why link previews matter
A link with a clear image and title gets opened; a link that previews as "example.com" with a grey box does not. On LinkedIn and Facebook the card *is* the post for most viewers; in WhatsApp and iMessage it is what makes a link look trustworthy. It costs a few tags per template and pays every time someone shares a page.
The tags also feed places you do not think of as social: Slack and Teams unfurl links in every message, Google Discover uses the OG image, and search engines fall back to `og:description` when the meta description is missing.
## How getReport checks it
> **Free tool:** [Link preview checker (Open Graph)](https://getreport.app/tools/link-preview): See how your page looks when shared on Facebook, LinkedIn, X, Slack and WhatsApp: Open Graph and Twitter card tags, image size and reachability, canonical match.
The social module reads the Open Graph and Twitter tags, fetches the image to measure it (the size finding needs the real pixels, not the declared ones), checks that `og:url` agrees with the canonical, and renders a preview card for the common platforms.
> **Check: Open Graph image size.** Facebook and LinkedIn crop or shrink images smaller than 1200×630 px, so your preview looks blurry or cut off.
>
> 1. Export the share image at 1200×630 px (1.91:1) under 1 MB.
> **Check: Open Graph image can be fetched.** Facebook, LinkedIn and Slack download og:image themselves when someone shares the link. A relative URL, an http:// URL on an https page, or an error response means the card has no picture.
>
> 1. Point og:image at an absolute https:// URL that answers 200 with a JPEG, PNG or WebP.
> 2. Check that the image is not blocked by robots.txt, a login wall or a hotlink rule.
> **Check: og:url matches the canonical URL.** Facebook counts likes and shares per og:url. When it differs from the canonical URL, the counts split between two addresses and the card may link to the wrong version of the page.
>
> 1. Set og:url to exactly the canonical URL of this page, without tracking parameters.
> 2. In WordPress, Yoast and Rank Math derive it from the canonical automatically; check for a hard-coded value in the theme.
> **Check: Twitter card type is valid.** X (Twitter) shows a preview card only when twitter:card has a valid type. Without it a shared link is plain text, even with Open Graph tags in place.
>
> 1. Add to show the share image at full width.
> 2. Use "summary" instead for a small square thumbnail beside the text.
## The tags, one by one
| Tag | What it does | Notes |
| --- | --- | --- |
| `og:title` | The card's headline | Shorter than the page title; the brand is in `og:site_name` |
| `og:description` | One or two lines under it | 60–120 characters; most apps truncate at two lines |
| `og:image` | The picture | 1200 × 630, absolute URL, https |
| `og:image:width/height` | Lets the platform lay out the card before downloading the image | Prevents the first share showing no image |
| `og:url` | The canonical URL of the page | Shares of `?utm` variants collapse into one |
| `og:type` | `website`, `article`, `product`, `profile` | `article` unlocks `article:published_time` and `article:author` |
| `og:site_name` | The brand shown above the title | |
| `og:locale` | `hr_HR`, `en_GB` | Optional |
| `twitter:card` | `summary_large_image` for a big image, `summary` for a thumbnail | X falls back to OG for the rest |
| `twitter:image` | Overrides `og:image` on X | Only if you want a different image there |
## The image
One size works everywhere: **1200 × 630 pixels (1.91:1)**. Facebook, LinkedIn, X's large card, Slack, WhatsApp and iMessage all render it without cropping the important part; WhatsApp and some apps show a square crop of the centre, so keep the subject and any text in the middle 630 × 630. Under 1 MB (WhatsApp skips images over about 300 KB in some versions; aim for 100–200 KB as a JPEG at quality 80). Text on the image should be large (60 px+) because the card is shown at a third of the size.
The image must be fetchable by a bot that does not run JavaScript, does not send cookies, and comes from an unfamiliar IP. A CDN rule that blocks unknown user agents, a hotlink protection rule, or an image served only after login all produce a blank card. The reachability finding fetches it the same way.
Generating one image per page (title on a branded background) is worth automating; see [Generating OG images automatically](https://getreport.app/guides/open-graph-images-size-safe-area).
## Step by step
### 1. Check one page per template
Home, product, article. The preview panel shows what each platform would render; the findings list what is missing or wrong.
### 2. Fix the image first
Missing, too small (under 600 × 315 renders as a tiny thumbnail), or not reachable. Upload a 1200 × 630 version and reference it with an absolute https URL.
### 3. Align og:url with the canonical
The share counters and the cache on each platform are keyed by `og:url`. If it differs from the canonical (http vs https, www, a parameter), shares of the same page split into several cards and the cache is harder to purge.
### 4. Add the Twitter card tag
Without `twitter:card`, X shows a small thumbnail card even when the OG image is large. `summary_large_image` is the right default; X reads `og:title`, `og:description` and `og:image` for the rest.
### 5. Purge the caches
Every platform caches the first preview it built, for hours to weeks. After changing the tags:
- **Facebook/Instagram/WhatsApp**: Sharing Debugger → Scrape Again (WhatsApp uses Facebook's cache).
- **LinkedIn**: Post Inspector.
- **X**: no debugger anymore; append a query parameter (`?v=2`) to the shared URL to force a new fetch.
- **Slack, Discord, iMessage**: cache per workspace/device; a query parameter works too.
## Platform notes
**WordPress**: Yoast and Rank Math print the full set from the post's featured image and title; a "Social" tab per post overrides them. Set the default share image in the plugin's settings so pages without a featured image still get a card. **Shopify**: Online Store → Preferences → Social sharing image for the store-wide default; product pages use the featured image; the theme prints the tags. **Static sites**: a layout partial with the front matter; generate the image at build.
## Verify
- The checker shows all findings passed and the preview cards render with the intended image.
- Paste the link into a private WhatsApp chat and into a Slack DM to yourself: image, title, description.
- After a change, run the Facebook and LinkedIn debuggers so their caches update.
## Common mistakes
- **A relative image URL** (`/img/og.jpg`). Bots resolve it inconsistently; use the absolute https URL.
- **The logo as the OG image.** A 400 × 400 logo on every page makes every share look the same and renders as a thumbnail.
- **Text in the corners of the image.** Cropped on square previews.
- **Blocking bots with a WAF rule** that also blocks `facebookexternalhit`, `Twitterbot`, `LinkedInBot`, `WhatsApp` and `Slackbot`. Allow them.
- **Changing the image but not purging.** Platforms keep the old card for days.
- **`og:type` set to `article` on every page** including products and the home page.