Social Images Need Absolute URLs
MUST: `og:image` and `twitter:image` must be ABSOLUTE URLs. A relative `/og.png` resolves fine in your browser (it has a current document) and ships a blank grey card on Slack, iMessage and LinkedIn, which fetch the HTML and have no origin to resolve against — and nothing in your build, typecheck, or local preview complains. Build the URL from one site-wide base constant. Ship a stable 1200x630 image and set `twitter:card` to `summary_large_image`, or the artwork renders at favicon size.
og:image and twitter:image must be absolute URLs, because a relative path renders a blank card everywhere the link is actually shared
<meta property="og:image" content={`${SITE_URL}/og.png`} />
<meta name="twitter:card" content="summary_large_image" />Bad
Good
Why it matters
From the social cards rules in ibelick's fixing-metadata skill. This is the single most common social-preview bug, and its defining property is that it is invisible during development. `<meta property="og:image" content="/og.png">` resolves fine in your browser, because your browser has a current document to resolve it against. Slack, iMessage, LinkedIn, and every other unfurler do not: they fetch your HTML, read the tag, and get a path with no origin to attach it to.
Some drop it, some guess, all of them are entitled to give up — so the link ships as a blank grey card, and nothing in your build, your typecheck, or your local preview ever complains. The rule is to emit the full origin, which in practice means building the URL from one site-wide base constant (`${SITE_URL}/og.png`) rather than trusting each page to remember.
Two neighbours in the same rule group matter as much: the image wants a stable, correct aspect (1200 x 630 is the safe default that survives every crop), and `twitter:card` wants `summary_large_image`, without which the card renders as a thumbnail and the artwork you commissioned appears the size of a favicon.