What is Open Graph?
Open Graph explained: the four required properties, how Twitter/X cards fall back to og: tags, and why og:image needs to be an absolute URL.
Open Graph is a protocol, originally launched by Facebook in 2010 and documented at ogp.me, for controlling how a URL looks when it's shared on a social platform: the title, description, and preview image shown in the card. Without it, a crawler is left guessing, usually falling back to the page's <title> tag and whatever image it finds first, which is rarely the one you'd actually pick.
Open Graph tags are plain <meta> elements in the page's <head>, read by each platform's own crawler at share time, not by the browser rendering the page for a visitor.
The four required properties
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" /> Note the attribute: property=, not name=. Open Graph is built on RDFa, and RDFa metadata uses property, that's a real spec distinction, not a stylistic choice, even though a browser renders either attribute name identically since meta tags carry no visual behavior of their own. og:description and og:site_name aren't required but are what makes a card look complete rather than bare.
Twitter/X cards fall back to Open Graph
X's crawler reads twitter: tags first, which use the ordinary HTML name= attribute instead of property=, and falls back to the matching og: tag whenever a twitter: one is missing. twitter:title falls back to og:title, twitter:image to og:image, and so on. In practice this means writing the og: tags once covers Facebook, LinkedIn, Slack, Discord, and X together, the twitter:card value (with no Open Graph equivalent) is really the only tag that needs setting separately.
| summary_large_image | summary | |
|---|---|---|
| Image | Full-width, 1.91:1 | Small square thumbnail |
| Layout | Image above text | Image beside text |
| Looks like | Facebook / LinkedIn card | Older, compact link preview |
Why 1200×630, and why the cache trips people up
1.91:1 (1200×630 is the common concrete size) is the aspect ratio every major platform converged on for the large-image card, Facebook, X, LinkedIn, Slack, and Discord all crop or letterbox other ratios to fit it, so keep any text or logo away from the edges since different platforms crop differently.
The other common surprise: link-sharing platforms cache the scraped Open Graph data aggressively, sometimes for days, so a page you already shared once won't pick up a new og:image automatically. Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a "scrape again" action that forces the refetch, that's the actual fix, not waiting.
Build and preview your tags with the Open Graph Meta Tag Generator on this site, it can also import an existing <meta> block to edit in place.
Frequently asked questions
One set of values is enough in almost every case. X's crawler reads twitter: tags first but falls back to the matching og: tag whenever a twitter: one is missing, twitter:title falls back to og:title, twitter:description to og:description, and so on.
In practice this means writing og:title, og:description, and og:image once covers Facebook, LinkedIn, Slack, Discord, and X together. The only twitter:-only tags worth adding are twitter:card (which has no og: equivalent) and optionally twitter:site / twitter:creator for attribution.