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.

A complete set, generated rather than described. Filling in our meta tag generator produces this (first half shown):

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">

Two things worth copying from it. og:type is present — it is the tag people most often forget, and without it some crawlers skip the card entirely. And the counters read “Title 19 chars” and “Description 50 chars”, because Open Graph titles get truncated in most feeds well before HTML does.

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.

Here is a complete set, generated by our own meta tag generator from five fields:

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">

Three things are worth noticing. og:type is present — it is the tag most often missing, and Facebook defaults it to website only when the crawler feels generous. twitter:card is summary_large_image, which is what makes the wide preview appear; omit it and you get a small square. And the description is repeated three times, once per namespace, because no consumer reads another namespace’s copy.

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.

The counters beside the fields are the part people skip. That title reported Title 19 chars and the description Description 50 chars. Those two numbers matter more than the tag list: Facebook and LinkedIn truncate long titles in the card, and a description under about 60 characters often gets dropped entirely in favour of the first paragraph of the page. Write to the counter, not to the field width.

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