Lesson 4 of 14
og:title, og:image, twitter:card — these look like SEO tags and live right next to them in <head>, but they're consumed by a completely different audience: the link-unfurling bots that build a preview card when your URL gets pasted into Slack, iMessage, LinkedIn, or X, not by Google's ranking algorithm at all.
12 min read
Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.
This topic is about judgment and practical tradeoffs more than a single right answer — a mock interview is the better way to test yourself on it.
Be interviewed on this →Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.
Sign up freeWhat interviewers actually ask about this, and what a strong answer has to cover.
A strong answer covers
Likely follow-ups
It's an easy category error: <meta name="description"> is read by search engines to help decide what snippet to show in results. og:title, og:description, and og:image look almost identical in the markup — same <head>, same <meta> shape — but they're read by an entirely different consumer: the link-unfurling crawler every chat app, social platform, and messaging client runs the instant someone pastes your URL. That's the Open Graph protocol (og:*, originally built by Facebook, now the de facto standard across Slack, Discord, LinkedIn, iMessage, and most others), and X/Twitter layers its own parallel twitter:* tags on top for its specific card rendering.
Getting this right has a real, visible payoff completely separate from SEO: it's the difference between a shared link showing a title, description, and a real preview image versus a bare, unstyled URL — which measurably affects click-through on social and in chat, independent of anything in Google Search.
<meta property="og:title" content="Why JSON-LD Won Over Microdata" />
<meta property="og:description" content="A decoupled script block beats inline attributes scattered through your markup — here's the actual reasoning, not just the syntax." />
<meta property="og:image" content="https://example.com/og/json-ld-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/json-ld-won" />
<meta name="twitter:card" content="summary_large_image" />
A few specific things worth noticing: og:image needs an absolute URL (https://..., never a relative path — the unfurling bot has no page context to resolve a relative one against), the 1200×630px size (1.91:1 ratio) is the practical standard that renders cleanly across Facebook, LinkedIn, Slack, and Discord without cropping, and og:type (article, website, product, video.other, etc.) tells the consuming platform what kind of entity this is, which can change how it's rendered.
Notice twitter:card is the only Twitter-specific tag present here — that's deliberate, not an oversight.
og:description does not influence what Google shows as a search snippet — that's still <meta name="description">'s job (or Google's own extracted text). Confusing the two systems means optimizing the wrong tag for the wrong audience.cards-dev.twitter.com validator was deprecated years ago and never replaced; the only first-party check left is pasting the link into the X post composer and looking at the live preview it renders. Third-party debuggers fill the gap but aren't authoritative.og:image must be an absolute URL, and ideally a stable one — some platforms cache the preview aggressively per-URL, so changing the image without changing the URL path can mean stale previews linger for existing shares.twitter:card has no Open Graph fallback and must be set explicitly — every other twitter:* tag falls back to its og:* equivalent, but this one doesn't, and omitting it is the single most common reason a page's X preview silently renders as a small summary card instead of the intended large image.A candidate who confidently explains "og:description doesn't affect Google rankings, it's for the unfurl preview" is demonstrating they understand these as two genuinely separate systems consumed by two different kinds of bot — a distinction a surprising number of experienced developers blur. The stronger follow-up interviewers ask is about verification: naming that there's no single first-party validator anymore and that each platform's unfurl cache is independent shows you've actually debugged a broken social preview in production, not just pasted boilerplate meta tags from a template once.