Open Graph Tags: A Complete Guide with Examples
Updated 16 September 2026 · 4 min read
When you paste a link into Facebook, LinkedIn, WhatsApp or Slack and a neat card appears with a title, a description and an image, that card is built from Open Graph tags — a small set of <meta> tags in the page's <head>. Get them right and every share of your page looks deliberate and clickable. Leave them out and the same link shows up as a bare, pictureless URL. This guide covers exactly which tags to add, the code, the image sizes, and how to check the result.
What Open Graph is
Open Graph is a protocol Facebook introduced so any page can describe itself to other platforms. The tags use a property attribute prefixed with og: and a content attribute with the value. They do not affect your Google ranking, but they control how your links look everywhere they are shared — which affects click-through, and therefore the traffic those shares send you.
The core tags
Four tags do most of the work. Put them in the <head> of every page you expect to be shared:
<meta property="og:title" content="Open Graph Tags: A Complete Guide">
<meta property="og:description" content="What each Open Graph tag does, the code to add, and how to test your previews.">
<meta property="og:image" content="https://example.com/images/open-graph-guide.png">
<meta property="og:url" content="https://example.com/open-graph-tags-guide/">
- og:title — the headline of the card. Keep it under about 60–90 characters so it is not truncated. Some platforms fall back to your
<title>, but set this explicitly so you control the wording. - og:description — one or two lines under the title. Aim for under about 200 characters.
- og:image — the single biggest driver of engagement. Without it, most platforms show a plain link.
- og:url — the canonical address of the page, so shares of
?utm=and other variants collapse into one.
Two more are worth adding:
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Brand">
og:type is usually website, or article for blog posts. og:site_name shows your brand alongside the preview.
Getting the image right
The image is where most previews fail, so treat it carefully:
- Size: about 1200 × 630 pixels is the widely-supported large-card size.
- HTTPS: serve it over
https://. Some platforms refuse to load anhttp://image on anhttpspage, so the card shows no picture. - File size: keep it well under 5 MB.
- A real, reachable URL: the most common bug is an
og:imagetag that points at a 404 or a private URL. The tag looks fine in the source, but the image never loads. Our Open Graph Checker actually fetches the image and tells you whether it loads and returns an image — not just whether the tag exists.
Twitter / X cards
X reads its own twitter: tags and falls back to Open Graph when they are absent. To control how the card looks on X, add:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Tags: A Complete Guide">
<meta name="twitter:description" content="What each tag does and how to test your previews.">
<meta name="twitter:image" content="https://example.com/images/open-graph-guide.png">
summary_large_image gives the big-image layout; summary gives a small thumbnail. If you set nothing, X uses your Open Graph tags, which is usually fine.
Common mistakes
- Tags added by JavaScript. The crawlers that build link previews read only the initial HTML — they do not run your JavaScript. Put Open Graph tags in the server response.
- Duplicate tags. A theme and an SEO plugin both adding
og:tags is a frequent cause. Keep one of each per page. - Stale previews after a change. Platforms cache previews for days. After updating tags, re-scrape the URL in the platform's own debugger (Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator).
- Only tagging the home page. Every page you expect to be shared — posts, products, tools — needs its own tags.
How to test your tags
- Run the page through the Open Graph Checker to see a preview for Facebook, LinkedIn and X, and to confirm the
og:imageloads. - Use the Meta Tag Checker to review the rest of the
<head>— title, description, canonical and robots. - When you change tags, clear the cache with each platform's own debugger so the new preview shows.
For the wider set of <head> tags that matter for search, not just sharing, read Meta Tags for SEO: What Still Matters.
Frequently asked questions
Do Open Graph tags help SEO?
Not directly — Google does not rank pages based on Open Graph tags. They shape how your links look when shared, which improves click-through on social and messaging platforms. More clicks on shared links means more of the traffic those shares can send.
What is the best og:image size?
About 1200 × 630 pixels for a large card, served over HTTPS and kept under 5 MB.
Why is my share preview showing the wrong image?
Platforms cache previews. Update the tag, then re-scrape the URL in that platform's debugger (Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator) to force a refresh.
Do I still need Twitter card tags?
Not strictly — X falls back to Open Graph. Adding twitter:card gives you control over the layout on X specifically.
Where do Open Graph tags go?
In the <head> of the HTML your server returns, not injected later by JavaScript, which preview crawlers do not run.