Meta Tags and Social Previews: What Actually Shows Up

A link to your site is often the first thing a prospect sees of you — in a search result, in a Slack channel, in a WhatsApp message from one colleague to another. What renders there is controlled by about six lines of HTML that most sites get partly wrong.

The confusion is that every platform reads a different set of tags, in a different order, with different fallbacks. That is why a page can look perfect on Facebook and show your logo on a grey box on LinkedIn.

Here is what each one actually reads.

Google

Google uses <title> and <meta name="description"> — and then frequently ignores them.

Studies consistently find Google rewrites titles for roughly a third of results and descriptions for more than half, pulling text from the page that better matches the specific query. This is not a fault and there is no tag that prevents it.

That does not make them unimportant. Google uses your written title and description most often for brand and navigational queries — someone searching your company name, who is already close to converting. Those are the results worth controlling.

Practical limits:

• Titles are truncated at roughly 580 pixels, which is about 55–60 characters. Put the distinguishing words first; "Live Ajans" at the end of a title is fine, at the beginning it wastes the visible space on every page.
• Descriptions run to about 155–160 characters on desktop and less on mobile.
• One <title> per page, and it should differ from the H1. The title targets the search result; the H1 targets the person who arrived.

Facebook, LinkedIn, WhatsApp, Slack, Discord, Signal

All of these read Open Graph:

<meta property="og:title"       content="…" />
<meta property="og:description" content="…" />
<meta property="og:image"       content="https://example.com/share.jpg" />
<meta property="og:url"         content="https://example.com/page/" />
<meta property="og:type"        content="website" />
<meta property="og:site_name"   content="Example" />

Note property=, not name=. Using name="og:title" is a common copy-paste error and some scrapers ignore it.

If og:image is missing, each platform scrapes the page for any image it can find. You get your logo, a UI icon, or a grey placeholder — never the image you would have chosen.

Image rules that matter:

• 1200×630 is the safe size. It is the aspect ratio every platform expects.
• Under 200×200 is ignored entirely by Facebook.
• Use an absolute URL. Relative paths fail.
• Keep it under 5MB, and ideally under 1MB — several scrapers time out.
• Tall images are cropped from the centre, which is how half a face ends up in a preview.

og:type should be article for blog posts and website for everything else. article unlocks article:published_time and article:author, which some platforms display.

X (Twitter)

X reads its own tags first, then falls back to Open Graph:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image"       content="https://example.com/share.jpg" />

Note name= here, not property=. X is the opposite of Open Graph and this trips people up constantly.

The one tag that matters most is twitter:card. Without it you get the small square thumbnail layout no matter how good your image is. With summary_large_image you get the full-width card that actually gets clicked. If you add nothing else from this section, add that line.

Everything else falls back to Open Graph cleanly, so you do not need to duplicate title and description unless you want different wording for X specifically.

The thing that wastes the most time: caching

Every platform caches your Open Graph data aggressively, and fixing the tag does not fix an already-shared link.

• Facebook caches for roughly 30 days. Force a refresh with the Sharing Debugger.
• LinkedIn caches for about 7 days and does not re-scrape on its own. Use the Post Inspector.
• X caches per URL; appending a dummy query parameter is often the fastest workaround.
• WhatsApp caches for a long time and offers no public purge tool at all.

The practical rule: check before you publish, not after someone reports it looks wrong. By then the bad version is cached across several platforms and some of them will not let you clear it.

You can check any URL against all of them at once with our free meta tag and social preview checker — it fetches the live HTML and renders each platform's card exactly as that platform will build it, including the fallbacks.

A complete, correct head

<title>Precision CNC Machining in Stuttgart — Acme Manufacturing</title>
<meta name="description" content="5-axis CNC milling to ±0.005mm for automotive and aerospace. Batch runs from 500 units. IATF 16949 certified. Quotes in two working days." />
<link rel="canonical" href="https://example.com/services/cnc-milling/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/services/cnc-milling/" />
<meta property="og:title" content="Precision CNC Machining in Stuttgart" />
<meta property="og:description" content="5-axis milling to ±0.005mm. Batch runs from 500 units. IATF 16949 certified." />
<meta property="og:image" content="https://example.com/img/cnc-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme Manufacturing" />

<meta name="twitter:card" content="summary_large_image" />

Two things to notice about the copy itself.

First, the description contains specific numbers — a tolerance, a minimum order quantity, a certification, a response time. Compare that to "we deliver world-class precision engineering solutions." One of those can be quoted by an AI answer engine; the other cannot be quoted by anything.

Second, the Open Graph title is shorter than the page title. Search results have room for the location and brand; a social card does not, and the brand is already shown as the domain underneath.

Multilingual sites

If you serve more than one language, og:locale and og:locale:alternate tell platforms which version they are looking at:

<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />

More importantly, each language version needs its own translated title, description and — where the image contains text — its own image. A German page sharing an English-text image looks like an oversight, because it is one.

What to check, in order

1. Does every page have a unique title and description? Duplicates across a site are common on e-commerce and paginated archives, and they are the most damaging version of this problem.
2. Is og:image set, absolute, and at least 1200×630?
3. Is twitter:card set to summary_large_image?
4. Is og: on property= and twitter: on name=?
5. Do the previews actually render? Check before publishing, not after.

None of this is difficult, and all of it is invisible until someone shares your link in front of an audience you care about.