Skip to main content
Yunknow Toolbox

← Back to blog

Open Graph and Meta Tags: What Actually Controls Your Link Preview

When you paste a link into a chat or post it on social media and a tidy card appears — image, headline, blurb — that card is built from meta tags in the page’s HTML. Get them right and your links look professional everywhere; skip them and you get a bare URL or a random cropped image.

Two families of tags, two jobs

They often get lumped together, but they’re read by different systems:

  • SEO meta tags — <title> and <meta name="description">. These are what search engines like Google show in results.
  • Open Graph tags — og:title, og:description, og:image, og:url, og:type. Facebook created these; they’re now the de-facto standard that most platforms (LinkedIn, Slack, WhatsApp, Discord) read for link previews.
  • Twitter Card tags — twitter:card and friends. X reads Open Graph as a fallback, but twitter:card decides whether you get a small thumbnail or a big banner.

You want all three. A meta tag generator fills them from a single form so you’re not hand-writing each one.

A minimal set of tags

Here is the core you can paste into <head> and adapt:

<title>Your page title</title>
<meta name="description" content="One-sentence summary of the page.">

<meta property="og:title" content="Your page title">
<meta property="og:description" content="One-sentence summary of the page.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

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

Note that Open Graph tags use property=, while the SEO description and Twitter tags use name= — mixing those up is a classic reason a tag silently does nothing. summary_large_image gives the big banner; switch it to summary for a small square thumbnail.

The sizes and lengths that matter

  • Title — aim for roughly 50–60 characters so search results don’t truncate it.
  • Description — about 150–160 characters for the same reason.
  • og:image — 1200×630 pixels (a 1.91:1 ratio) is the safe size for a large preview. Use an absolute URL (https://…), never a relative path.

What decides which image and text appear

Platforms follow a fallback chain. For the image they look for og:image first, then twitter:image, and only if both are missing do they guess from the page’s <img> tags — which is how you end up with a stray logo or an ad. Text works the same way: og:title beats the plain <title>, and og:description beats the meta description.

Size gates matter too. Many platforms ignore images under roughly 200×200 pixels or shrink them to a tiny thumbnail, so an icon-sized image often yields no large card no matter how the tags read. If you need to hit an exact 1200×630, the guide to cropping an image walks through it.

Why your preview won’t update

The single most common frustration: you fix the tags, re-share the link, and the old preview is still there. That’s not a bug in your tags — social platforms cache the preview the first time they see a URL. Use the platform’s official debugger (for example, the Facebook Sharing Debugger) to force a re-scrape, and the new card appears.

Debugging a broken preview

When a card looks wrong, run the URL through the platform’s official debugger — the Facebook Sharing Debugger and the LinkedIn Post Inspector both re-scrape on demand and list exactly which tags they found, so you can see what the crawler sees. Common culprits when nothing shows:

  • The og:image uses a relative path or sits behind a login, so the crawler can’t fetch it.
  • The page or the image isn’t publicly reachable, or robots.txt blocks the crawler.
  • The tags live in the <body>, or are injected by JavaScript that the crawler never runs.

Fix the cause, re-scrape once in the debugger, and the corrected card propagates to everyone who shares the link afterwards.

Where the tags go

All of these belong inside the <head> of your HTML, not the <body>. Most site builders and CMSs expose a “custom head” or per-page SEO panel where you paste them.

  • Cleaning up JSON-LD structured data for the same page? Use the JSON formatter.
  • Building the social image itself? Crop it to 1200×630 first.

#seo#web