Input HarborISSUE #38 of 46

open graph · how social cards render

FormaVSCaptain Invalid Input

Forma saysOpen Graph meta tags control how your link looks when shared — the title, description, and image on the card.

When someone pastes your URL into a chat or social post, the platform builds a preview card. og:title, og:description, og:image, and og:url in the head tell it exactly what to show; twitter:card tunes the X/Twitter version.

Without these, platforms guess from your page — often badly. Provide a ~1200×630 og:image so the card looks intentional. These tags are invisible on the page; their whole job is the share preview.

Power-ups you unlock

og:title / og:description / og:image / og:url shape the card
twitter:card tunes the X/Twitter preview
og:image ~1200×630 for a clean, full-bleed card
Invisible on-page — they only affect shared links

Captain Invalid Input attacks — common mistakes

No og:image → an ugly or blank share card
Relative og:image URL (some scrapers need absolute)
Forgetting to update tags per page (all links look identical)

Boss battleAdd og:title, og:description, and an absolute og:image to a page head, plus a twitter:card="summary_large_image".

Example code

<!doctype html>
<html><head>
  <meta charset="utf-8">
  <title>Cool Page</title>
  <meta property="og:title" content="Cool Page — 7SLF">
  <meta property="og:description" content="what this page is, in one line.">
  <meta property="og:image" content="https://example.com/card.png">
  <meta property="og:url" content="https://example.com/cool">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><h1>share me to see the card</h1></body>
</html>

▶ Open the interactive comic issue

‹ Meta Viewport · The Mobile Fix Structured Data · Json-Ld · Schema.Org ›