Command Palette

Search for a command to run...

Hectal
PHASE 6Intermediate ~21 min· topic 3 of 7

Topic 6.3

Social Sharing Cards

In one line

Open Graph and Twitter card meta tags tell WhatsApp, LinkedIn, Facebook, X, Slack and Discord what title, description and image to show when someone shares your link.

0/7 · 0%

Think of it like this

A movie poster outside a cinema. Nobody watches the film to decide whether to go in; they look at the poster: a big picture, the title and one line of story. When someone pastes your link into a chat, the app builds a little poster for it, called a link preview or card, and you choose what goes on it with meta tags.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Link preview (card)
The box with an image, title and description that appears when you paste a link into a chat or post.
Crawler
A program that visits pages automatically to read them. Social apps use one to build cards.
Open Graph
A set of og: meta tags that describe a page for link previews. Almost every app reads them.
property attribute
The attribute Open Graph tags use for their name, as in property="og:title".
Twitter card
X's own twitter: meta tags. They choose the card layout and fall back to Open Graph.
Aspect ratio
Width compared with height. 1200 × 630 is about 1.91 to 1, a wide rectangle.
Absolute URL
A full address with https:// and the domain, which works from anywhere.
Cache
A saved copy kept to avoid fetching again. Social apps cache cards, so changes can take time to show.

Step by step

01Start from the title and description

og:title can be shorter and punchier than the <title>, because the card already shows the site name. og:description is one or two sentences.

pancakes.htmlwhole filehtml
<meta property="og:title" content="Egg-free pancakes in 20 minutes">
<meta property="og:description" content="Soft and fluffy, no eggs needed. With a gluten-free swap.">

02Add type, URL and site name

og:type is article for a blog post or recipe and website for a home page. og:url is the clean canonical address.

pancakes.htmlwhole filehtml
<meta property="og:type" content="article">
<meta property="og:url" content="https://ashaskitchen.example/recipes/pancakes">
<meta property="og:site_name" content="Asha's Kitchen">
<meta property="og:locale" content="en_IN">

03Add the image, with its size and alt text

An absolute URL, 1200 × 630, with the size stated and a description of what the image shows.

pancakes.htmlwhole filehtml
<meta property="og:image" content="https://ashaskitchen.example/og/pancakes.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A stack of golden pancakes with berries and syrup">

04Add the X card type

One tag chooses the big-image layout. X reads the OG tags for everything else. Add twitter:site if you have an account.

pancakes.htmlwhole filehtml
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ashaskitchen">

05Know what the crawler does

The crawler fetches only the HTML, reads the tags, then fetches the image. Nothing your JavaScript does later is seen.

Know what the crawler doesdiagram
Rendering diagram…

06Test and refresh

Paste the URL into Facebook's Sharing Debugger or LinkedIn's Post Inspector. They show the tags they found, warnings for missing ones, and a preview. If you changed tags, ask them to scrape again; otherwise the old card stays cached.

Try it yourself

  1. 1

    Break a required tag

    In the first example, delete the og:url line. Predict the first console line, then run it. Put it back.

  2. 2

    Use a relative image

    Change og:image to /og/pancakes.jpg. Predict the second console line. Why would a crawler fail to load this image?

  3. 3

    Remove the OG title

    In the second example, delete the og:title line. Which value will the title fall back to? Run to check. Then delete twitter:description: what happens to the description?

  4. 4

    Inspect a real card

    Open a news article you like, view its source (Ctrl+U) and search for og:image. Open that image URL in a new tab and note its size.

Code & diagrams

Build a card from the page's own tags New tab

This is roughly what a chat app does on its server: read the og: tags and lay them out. The image here is a placeholder box, because previews can't load outside files.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Required OG tags missing: []
Image is absolute: true
How X falls back to Open Graph New tab

`twitter:` tags win, then `og:` tags, then the plain title and description. The `??` operator picks the first value that isn't missing.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

title: Learn HTML for free
description: Live examples, exercises with automatic checks.
image: https://hectal.in/og?title=HTML

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Tags added by JavaScript

In a single-page app, set the og: tags in the browser with JavaScript after the page loads, then share the link.

terminal
$ Sharing Debugger
── what you'll see ──
The following required properties are missing: og:title, og:image (the card shows only the bare URL)

Break #2

Using name instead of property

Write <meta name="og:title" content="...">.

terminal
$ Sharing Debugger
── what you'll see ──
Some apps still show the card, others ignore the tag and fall back to the <title>.

Break #3

The old card won't go away

Fix the og:image on a page that was already shared, then share it again.

terminal
$ the chat app
── what you'll see ──
The card still shows the old image.

Myth vs fact

Myth

Social tags help Google ranking.

Fact

They don't affect ranking. They control how shared links look, which affects clicks from social apps and chats.

Myth

I need a full set of twitter: tags as well as og: tags.

Fact

X falls back to Open Graph. twitter:card is the only one you really need; add the others only when you want different text on X.

Myth

Any image size works.

Fact

Small or oddly shaped images get the small layout or get cropped badly. 1200 × 630 with the subject centred is the safe choice.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    Open Graph is based on RDFa, which is why it uses property. Strictly, pages should declare prefix="og: https://ogp.me/ns#" on <html>, but no major consumer requires it.

  • ▸

    Multiple og:image tags are allowed; the first is preferred. Structured sub-properties (og:image:width, og:image:alt) apply to the image tag just above them, so order matters.

  • ▸

    Dynamic card images can be generated per page at the edge (for example with next/og, which Hectal's /og route uses). Cache them hard with a long Cache-Control max-age, since crawlers and apps fetch them often.

  • ▸

    Discord and Slack also read theme-color (Discord colours the card's edge with it) and oEmbed discovery links (<link rel="alternate" type="application/json+oembed">) for rich embeds like video players.

Remember this

  1. 1

    When a link is shared, the app's server visits your page with a crawler (a program that downloads pages automatically, like facebookexternalhit or Twitterbot), reads the head, and builds the card. These crawlers don't run JavaScript: the tags must be in the HTML your server sends, not added later by a script. If your page blocks them (a login wall or a robots.txt rule), the card comes out empty.

  2. 2

    Open Graph (OG) is a set of meta tags created by Facebook in 2010 and now read by almost every app. They use property, not name: <meta property="og:title" content="...">. The core four are og:title, og:type (website or article), og:image and og:url. Add og:description, og:site_name, og:locale (like en_IN) and og:image:alt (a text description of the image, for screen-reader users).

  3. 3

    X (formerly Twitter) cards use <meta name="twitter:card" content="summary_large_image"> to pick the layout: summary (small square thumbnail) or summary_large_image (a wide image across the top). X falls back to the OG tags for title, description and image, so you usually add only twitter:card plus, optionally, twitter:site (the site's @handle) and twitter:image:alt.

  4. 4

    The image decides whether people notice the card. Use 1200 × 630 pixels (a 1.91:1 ratio): it fits Facebook, LinkedIn and X's large card. Use JPG, PNG or WebP (not SVG, which most platforms reject), keep the file small (a few hundred KB loads fast; X's limit is 5 MB), and keep text and faces in the centre, because some apps crop the edges or show a square. Give og:image:width and og:image:height so the first share renders immediately instead of waiting for the image to be measured.

  5. 5

    Every URL in these tags must be absolute, including https:// and the domain: https://example.com/og/pancakes.png, never /og/pancakes.png. The crawler doesn't know which site a relative path belongs to. og:url should be the page's canonical URL (Topic 6.7), so shares of ?utm_source=... variants all count as one page.

  6. 6

    Apps cache cards, often for days. After you fix a tag, test it with the platform's tool: Facebook's Sharing Debugger ("Scrape Again" refreshes its cache), LinkedIn's Post Inspector, and for X, paste the link into a new post draft to see the preview. Generic tools like opengraph.xyz show several platforms at once. Hectal generates a 1200 × 630 card image for every page from its title.

Explain it without notes

01

How does a chat app build a link preview, and why don't tags added by JavaScript work?

02

Which Open Graph tags are required, and which X card tag do you need?

03

What size should a sharing image be, and what else should you check about it?

04

Why must og:image and og:url be absolute URLs?

Practice

01

Write the full set of social tags for a blog post How I learned to code at 40 on https://ravi.example/blog/code-at-40, with an image https://ravi.example/og/code-at-40.png and the large X card.

02

Write a function checkCard() that logs the names of any of the four required OG tags that are missing from the page, or All required OG tags present.

Trade-offs

  • ↔

    One generic site-wide card image is easy but every share looks the same; per-page generated images get more clicks but need a generator and caching.

  • ↔

    A separate, shorter og:title reads better in cards, but it's one more field to keep in sync with the page title.

Done when you can

  • I can write the four required Open Graph tags plus description and image alt.

  • I know to use property for OG and name for twitter tags.

  • I can choose and size a sharing image correctly.

  • I know crawlers don't run JavaScript and cards are cached.

  • I can test a card with a sharing debugger.