When a link is pasted into a chat app or a feed, a crawler fetches the URL server-side, parses the head and reads a small set of <meta> elements. Three consequences follow. The crawler does not execute JavaScript, so tags injected by a script are invisible to it. It resolves no relative paths, so every URL must be absolute. And it caches what it found, so an edit does not appear in the card until the cached copy is refreshed.
| Property | Status | What it controls |
|---|---|---|
og:title | Required | The headline on the card, independent of the page's own title element. |
og:type | Required | The object class. This generator writes website, which is right for a home page and wrong for a news item, so change that line by hand for articles. |
og:image | Required | The picture: an absolute, publicly reachable URL. |
og:url | Required | The canonical address, and the identity the platform files the object under. |
og:description | Optional | The supporting line. The preview above clamps it at three lines, as most platforms do. |
og:site_name | Optional | The publication name shown above the title. |
Twitter cards are a second vocabulary running in parallel. twitter:card selects the layout, with summary_large_image for the wide banner and summary for a small thumbnail, while twitter:title and twitter:image override the Open Graph values there. X falls back to the og: properties when the twitter: ones are absent, so a page with only Open Graph tags still produces a card — usually the wrong shape.
The figure quoted almost everywhere is 1200×630 pixels, a 1.91:1 ratio, because it satisfies the large-image layout on each major platform. Design at that size and keep the subject away from the margins: platforms crop to their own ratio, and the preview reproduces that with object-fit: cover.
For a product page the generated block reads:
<meta property="og:type" content="website" /><meta property="og:site_name" content="Northline" /><meta property="og:title" content="Trail 7 — Lightweight Trail Shoe" /><meta property="og:description" content="Grip, cushioning and a 4 mm drop in a 280 g shoe." /><meta property="og:url" content="https://example.com/trail-7" /><meta property="og:image" content="https://example.com/img/trail-7-og.jpg" /><meta name="twitter:card" content="summary_large_image" />
Empty fields are omitted rather than written blank. Two of the four mandatory properties come from the form; og:type is fixed at website, and og:url is yours to fill in.
/img/card.png means nothing to a crawler that never resolved the page's location. The outcome is no image and a card collapsed into a text stub.Disallow rule fails exactly like a missing file.og:url pointing somewhere else. It is the object's identity. Set it to the home page on every article and the shares and comment threads collect in one place, with no way to separate them afterwards.?v=2 — makes a new picture appear when the path has not changed.<meta> elements exist only after a client-side render, no social crawler sees them. Whatever this tool prints belongs in the HTML the server returns.No, but the fallback produces a default card shape. Setting twitter:card explicitly is what selects the large layout on X rather than leaving the platform to guess.
og:title match the page title exactly?It does not have to; a card title gets one line rather than a search result's worth of width. It should not contradict the page, since the card is often the first thing a person sees.
No. It affects how a link is presented where it is shared, and therefore whether people open it. That is distribution, not ranking.
og:image is left out?The card degrades to text with no picture, the layout platforms fall back to when no image resolves.