Open Graph and Meta Tags: Controlling How Your Links Look Everywhere

Three consumers, three vocabularies

Search engines read your <title> and meta description. Social platforms read Open Graph (og:*) tags. X/Twitter reads its own twitter:* tags, falling back to Open Graph for whatever is missing. Messaging apps — WhatsApp, Telegram, Slack, iMessage — mostly piggyback on Open Graph. One page therefore needs all three vocabularies to look right everywhere, and they must agree with each other.

<title>Page Title — Brand</title>
<meta name="description" content="150–160 characters that earn the click." />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="May differ from search description." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

The image is 90% of the preview

• Canonical size: 1200×630 (1.91:1). Platforms crop toward the center — keep text and faces away from edges.
• Use an absolute HTTPS URL; relative og:image paths silently fail on most scrapers.
• Keep it under ~1 MB; some scrapers time out on heavy images and show no preview at all.
• Text on the image should survive being rendered at 400px wide — thumbnail legibility beats detail.

Description lengths that survive truncation

Google truncates descriptions around 155–160 characters; social platforms cut earlier, often near 65–90 in compact placements. Write the first 60 characters to stand alone, then elaborate. And remember the meta description is not a ranking factor — it is ad copy for the click.

JSON-LD: talking to machines properly

Structured data (<script type="application/ld+json">) is what earns rich results — article cards, breadcrumbs, FAQs, product snippets. Unlike meta tags it is a real graph: an Article with an author, a datePublished, a publisher. Keep it truthful and consistent with the visible page; mismatches can get rich results revoked.

Titles: the 60 characters that earn the click

The <title> is the most important line of text on the page for search — it is the headline of your result. Google rewrites titles it considers poor (too long, keyword-stuffed, identical across pages, or missing the brand), so write one it will keep: 50–60 characters, the page’s specific subject first, brand last after a separator, and unique on every page. "Home" and "Untitled" are the classic failures; so is the same title on all 40 product pages with only the product name swapped in a position Google truncates. Your og:title can be shorter and punchier — social cards are scanned, not searched.

• Front-load the distinguishing words; truncation happens at the end.
• Match the title to the H1 in meaning, not necessarily word for word.
• Avoid ALL CAPS and emoji in titles — they are often stripped or rewritten.

Canonical tags and the duplicate-content trap

The same page reachable at /page, /page/, /page?utm_source=x and /Page is four URLs to a crawler — and link equity gets split four ways. <link rel="canonical" href="https://example.com/page"> declares which one counts. Set it on every indexable page (self-referencing is correct), use an absolute URL, keep it consistent with your redirects and sitemap, and never point canonicals at a page that itself canonicalizes elsewhere. Cross-domain canonicals work (a syndicated article can point to the original) and are the polite way to republish without competing with yourself.

Why your old preview will not die

Every platform caches scraped previews aggressively — sometimes for weeks. After changing tags, re-scrape explicitly: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and Telegram’s @WebpageBot all force a refresh. If a preview still shows stale data, version the image URL (og.png?v=2) — a new URL bypasses every cache at once.