What is an Open Graph meta tag?
Open Graph is a protocol Facebook introduced in 2010 to turn any web page into a rich object in a social feed. A page declares, in tags such as og:title, og:description, og:image and og:url, how it wants to be represented, and the platform uses those values to build the link preview: the card with the image, headline and short text you see when a link is pasted into a post or a chat. Almost every platform and messaging app now reads Open Graph, and X adds its own card tags on top, falling back to Open Graph when they are missing.
Why it matters
Why an Open Graph meta tag matters
The link preview is often the only part of a page people see before deciding whether to click. Without Open Graph tags, the platform guesses: it pulls the first image it finds, which might be a logo, an icon or a tracking pixel, and a title that might be the site name rather than the article. A preview with a strong image and a clear headline can be the difference between a link that gets clicked and one that gets scrolled past.
The tags also protect the brand. A campaign page shared by thousands of people will be represented by its preview thousands of times, so that card is effectively a piece of advertising and deserves the same care.
In practice
How an Open Graph meta tag works in practice
- 01
When someone shares a link, the platform's crawler fetches the page and reads the tags in its head. Most sites set them through their content management system or an SEO plugin: each page gets a title, a description and a share image, with sensible defaults for pages nobody customized. Images are typically 1200 by 630 pixels, with the important content kept away from the edges because platforms crop differently.
- 02
Platforms cache what they find, so changing the tags does not immediately change the preview of a link that was already shared. The major platforms offer debugging tools (Meta's Sharing Debugger, LinkedIn's Post Inspector) that show what the crawler sees and force it to fetch the page again. Testing every important page before launch is the simplest way to avoid an embarrassing card.
At RIOT
Open Graph meta tags at RIOT
This glossary is a small working example. Every entry is its own page with its own title and description, which is exactly what a good preview needs: a link shared from here names the term it points to instead of showing one generic card for the whole site.
Watch out
What people get wrong about Open Graph meta tags
Setting one image for the whole site and forgetting it. A logo on every share card tells people nothing about the page they are being asked to open. Campaign launches, articles and key pages deserve their own share image, designed to be read at the size of a phone preview.
The other mistake is assuming the tags work because they exist. Broken image paths, images that are too small, relative URLs and pages that block crawlers all produce blank or wrong previews. Check in the debuggers, not just in the source code.
