What it shows
- A Google result preview. The title is measured with the font Google uses on desktop (Arial, 20 px) and cut where Google would cut it, at about 600 pixels. Character counts are only a rough guide: "WWWW" is far wider than "iiii".
- Link cards as Facebook, LinkedIn and X (Twitter) build them from Open Graph and Twitter card tags. Images load from their URLs, so you can see whether the image works at all.
- A checklist of the tags that decide those previews and how search engines treat the page: title, description, canonical, robots, viewport, language, charset, headings, Open Graph and Twitter card tags.
The previews are approximations. Google rewrites titles and descriptions when it thinks another text describes the page better, and each social network crops images and truncates text in its own way, which also changes over time.
The tags that matter
| Tag | Used by | Advice |
|---|---|---|
<title> | Search results, browser tabs, bookmarks | Unique per page. Lead with what the page is about; brand at the end. Fits in about 600 px (often 50-60 characters). |
<meta name="description"> | Search snippet (sometimes) | A plain summary of the page in one or two sentences, roughly 120-160 characters. Not a ranking factor, but it can win the click. |
<link rel="canonical"> | Search engines | One absolute URL: the version you want indexed. Self-referencing canonicals are fine. |
<meta name="robots"> | Search engines | Only needed to restrict (noindex, nofollow, max-snippet). Its absence means "index, follow". |
og:title, og:type, og:image, og:url | Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage | The four properties the Open Graph protocol calls required. Add og:description and og:image:alt. |
twitter:card | X | summary_large_image for a wide image card. X falls back to Open Graph for title, description and image. |
Worked example
<title>Blue Widgets for Small Workshops | Acme</title>
<meta name="description" content="Hand-made blue widgets, tested for ten years of daily use. Free EU shipping and a two-year guarantee.">
<link rel="canonical" href="https://acme.example/widgets/blue">
<meta property="og:type" content="product">
<meta property="og:title" content="Blue Widgets for Small Workshops">
<meta property="og:url" content="https://acme.example/widgets/blue">
<meta property="og:image" content="https://acme.example/img/blue-1200x630.jpg">
<meta property="og:image:alt" content="A blue widget on a wooden workbench">
<meta name="twitter:card" content="summary_large_image">The title leads with the product, the description adds facts a searcher cares about, and the image is an absolute URL at 1200 × 630 pixels, the size most networks display without awkward cropping.
Common problems
- Relative
og:imageURLs. Social crawlers do not resolve/img/a.jpg; usehttps://.... - Two canonical tags (often one from a theme and one from a plugin). Google ignores both when they disagree.
- A forgotten
noindexfrom a staging site, carried over at launch. - Old previews after a fix. Social networks cache cards. Facebook's Sharing Debugger and LinkedIn's Post Inspector re-fetch a URL on request.
- Tags added by JavaScript. Social crawlers read the raw HTML and do not run scripts. Paste the page source (View source), not the DOM from developer tools, to see what they see.