You share a link on LinkedIn and it shows up as a bare URL with no image. On WhatsApp, the preview pulls a random logo from your footer. On X, the card is missing entirely. None of this is random — it all comes down to a handful of meta tags in your page's <head>, and most sites get at least one of them wrong.
This guide covers the essential meta tags, the Open Graph protocol, Twitter cards, correct image dimensions, and how to debug previews platform by platform.
What Are Meta Tags and Why Do Social Previews Break?
Meta tags are snippets of HTML in the <head> of a page that describe its content to machines — search engines, browsers, and social platform crawlers. When you paste a link into LinkedIn, X, Slack, Discord or WhatsApp, a bot fetches your page, reads these tags, and builds the preview card from them.
If the tags are missing, the platform guesses. And platforms guess badly: they grab the first <img> they find, truncate a random paragraph, or show nothing at all. A broken preview can cut click-through rates dramatically — people scroll past links that look like spam.
The essential baseline tags
Before Open Graph, get the basics right. Every page needs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title — Brand Name</title>
<meta name="description" content="A compelling summary in 150–160 characters. This is what Google often shows in search results.">
<link rel="canonical" href="https://example.com/your-page">
</head>
<title>— the single most important on-page SEO element. Keep it under ~60 characters so it doesn't get truncated in Google.meta description— not a ranking factor, but it is your ad copy in search results. Aim for 150–160 characters.viewport— without it, mobile rendering breaks and Google flags the page as not mobile-friendly.canonical— tells search engines which URL is the "real" one when the same content is reachable at several addresses (tracking parameters, http/https, trailing slashes).
You can preview how your title and description will render in Google with the SERP Preview tool — it shows pixel-accurate truncation for desktop and mobile.
The Open Graph Protocol: og:* Properties Explained
Open Graph was created by Facebook and is now the de facto standard read by LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage and (partially) X. The tags use the property attribute instead of name:
<meta property="og:title" content="Meta Tags & Open Graph: The Complete Guide">
<meta property="og:description" content="Fix broken link previews on LinkedIn, X and WhatsApp.">
<meta property="og:image" content="https://example.com/og/guide.png">
<meta property="og:url" content="https://example.com/blog/meta-tags-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="OneKitTools">
Here is what each property does and how important it is:
| Property | Purpose | Priority |
|---|---|---|
og:title | Headline of the preview card | Required |
og:description | Short text under the title (often truncated ~200 chars) | Required |
og:image | The preview image — the #1 driver of clicks | Required |
og:url | Canonical URL of the page | Required |
og:type | website, article, product, video.other… | Recommended |
og:site_name | Brand name shown on the card | Recommended |
og:image:width / og:image:height | Lets crawlers render the card before downloading the image | Recommended |
og:image:alt | Accessibility text for the image | Nice to have |
og:locale | e.g. en_US, fr_FR | Nice to have |
Rather than hand-writing all of this, the Meta Tags Generator builds the full block — basic tags, Open Graph and Twitter cards — from a simple form, with live previews for each platform.
OG image dimensions: 1200×630 is the magic number
The single most common mistake is the image. The safe spec in 2026:
- Size: 1200×630 pixels (1.91:1 aspect ratio) — the standard for Facebook, LinkedIn, X large cards, Slack and Discord.
- Format: PNG or JPEG. WebP and AVIF support is still inconsistent across crawlers.
- File size: keep it under ~1 MB; some crawlers time out on heavy images.
- Absolute URL:
og:imagemust be a fullhttps://URL, not a relative path. - Keep text away from edges: WhatsApp and iMessage crop to a square-ish thumbnail, so center the important content.
If you don't have a designer on call, the OG Image Generator produces correctly sized 1200×630 images with your title, brand colors and logo in a few clicks.
Twitter Cards: The twitter:* Tags
X (Twitter) reads Open Graph as a fallback, but its own tags give you control over the card format:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags & Open Graph: The Complete Guide">
<meta name="twitter:description" content="Fix broken link previews everywhere.">
<meta name="twitter:image" content="https://example.com/og/guide.png">
<meta name="twitter:site" content="@yourbrand">
The key decision is twitter:card:
summary_large_image— full-width image above the title. Use this for almost everything.summary— small square thumbnail next to the text. Fine for docs or utility pages.
Note the attribute difference: Twitter tags use name=, Open Graph uses property=. Mixing them up is a classic source of "my tags are there but the card doesn't show" bugs. Check the exact rendering with the Twitter Card Preview before you publish.
How Platforms Cache Previews (and How to Force a Refresh)
You fixed your tags, re-shared the link… and the old broken preview shows up again. That's the cache. Every platform stores the first preview it scraped, sometimes for weeks:
| Platform | Cache behavior | How to refresh |
|---|---|---|
| ~7 days | Post Inspector (linkedin.com/post-inspector) | |
| Until re-scraped | Sharing Debugger → "Scrape Again" | |
| X | ~1 week | Usually re-fetches on new tweet; no official purge tool |
| Aggressive, per-device | Append ?v=2 to the URL as a workaround | |
| Slack | ~30 minutes | /collapse then re-post, or just wait |
| Discord | ~30 minutes | Wait, or add a query parameter |
Two practical tricks:
- Version your OG image URL (
/og/guide.png?v=3). A new URL bypasses every cache at once. - Debug before you share. The first scrape often gets cached, so validate the page before posting it anywhere important.
A Reliable Debugging Workflow
When a preview is broken, work through this checklist in order:
- View source and confirm the
og:*tags are in the raw HTML — not injected by client-side JavaScript. Most crawlers do not execute JS, so tags added by React/Vue after load are invisible to them. - Check the image URL directly in a browser. A 403 (hotlink protection), a redirect, or a robots.txt block on your CDN will kill the preview.
- Run the URL through a debugger. The OG Debugger fetches your page the way a crawler does, lists every tag it finds, flags missing or malformed ones, and renders the resulting card for each platform.
- Force a cache refresh on the target platform using the table above.
- Re-test on a second platform to distinguish "my tags are wrong" from "this platform's cache is stale."
Fix Your Link Previews Now
Paste any URL into the OG Debugger to see exactly what LinkedIn, X, WhatsApp and Slack will render — missing tags flagged, image dimensions checked, previews side by side. No account required.