Technical
Open Graph
Open Graph is a set of `<meta property='og:...'>` tags that tell chat apps and social sites which title, description, and image to show when someone shares a link.
How it is measured
View source for `og:title`, `og:description`, `og:image`, `og:url`, and `og:type`. The image should be an absolute URL, commonly 1200 by 630 pixels, under about 5 MB, and fetchable without a login. Paste the URL into the platform's debugger to see what it scraped and what it cached.
The fetch comes from the platform's own crawler with its own user-agent, so look for it in the server log. If a firewall or login wall blocks it, the preview comes out blank.
Worked example
A designer shares a portfolio link in Slack and gets a grey box. Source shows `og:image` as `/img/cover.png`, a relative path. Slack fetches it as written and fails. Changing it to `https://studio.example/img/cover.png` fixes new shares, but the grey preview stays for a day in channels where it was already posted.
Another page uses a 3.4 MB PNG at 4000 by 2000 that the crawler skips. Resizing to a 1200 by 630 JPEG at 180 KB makes it appear.
How it differs
Open Graph serves most platforms. A Twitter Card is X's own tag set, which falls back on Open Graph when its own tags are absent. Open Graph names the title, image, and type for sharing, and the card adds `twitter:card` to choose the layout.
Common errors
Using relative image URLs. Images too small or far too large. Not updating `og:url` after a move. Expecting changes to show at once when platforms cache. Blocking the crawler in robots.txt or behind a login. Using one image on every page.
In practice
Set the tags from each page's own title and a per-page image, and test your three most-shared URLs in the platform debuggers. Re-scrape after changes, and make sure no rule blocks the crawlers.