Open Graph tags are HTML meta tags in the <head> of a web page that tell social media platforms — Facebook, LinkedIn, Twitter, Pinterest, messaging apps — exactly what title, description, and image to display when someone shares a link. Facebook developed the Open Graph protocol in 2010; it is now the universal standard for link preview control across platforms.
Social media posts with proper images get 2.3x more engagement than those without (Hootsuite). Every shared link is a mini advertisement for your page. Open Graph tags determine whether that advertisement is polished or broken — a random image, truncated headline, and empty description box.
What are Open Graph tags?
Open Graph tags are a subset of HTML meta tags. They live in the <head> section of a page, invisible to visitors but read by social platforms when generating link previews. Facebook originally created the protocol in 2010 to allow developers to control how their pages appeared in the News Feed. It was subsequently adopted by LinkedIn, Twitter (now X), Pinterest, Slack, WhatsApp, and iMessage.
Without OG tags, platforms use heuristics — first image on the page, first paragraph of text — which often produces broken previews: a tiny logo, a cookie banner screenshot, or the navigation menu description.
Before Open Graph, every platform scraped pages differently. Facebook's 2010 protocol gave developers a single declarative system to control previews across all platforms simultaneously. Today, a correctly implemented set of OG tags controls previews on Facebook, LinkedIn, WhatsApp, Slack, Discord, and any other platform using the standard.
Why Open Graph tags matter for traffic
Four concrete reasons OG tags affect content performance:
- Click-through rate. A compelling image and clear headline in a social preview is the difference between a scroll-past and a click. Posts with proper OG images get 2.3x more engagement than plain-text links (Hootsuite).
- Brand consistency. Without OG control, your brand may appear with a competitor's logo scraped from a comparison table, or no image at all. OG tags enforce your visual identity in every share.
- Sharing friction removal. When a link preview looks broken or unrelated to the topic, people hesitate to share it. Professional previews increase organic sharing from your existing audience.
- Indirect SEO benefit. More social sharing generates more traffic signals and potential backlinks. OG tags don't directly affect rankings, but the behaviour they enable — sharing, clicking, linking — does.
How Open Graph tags work
When someone shares a link on Facebook or LinkedIn, the platform's crawler fetches the page's HTML and looks for meta property="og:*" tags in the <head>. It uses what it finds to build the link preview card.
<meta property="og:title" content="On-Page SEO: Complete 2026 Guide" />
<meta property="og:description" content="The 8 on-page factors that move rankings in 2026, with real examples." />
<meta property="og:image" content="https://thestacc.com/og/on-page-seo.webp" />
<meta property="og:url" content="https://thestacc.com/glossary/on-page-seo/" />
<meta property="og:type" content="article" />
The four core tags:
- og:title — The headline shown in the preview. Keep under 60 characters to avoid truncation.
- og:description — Preview body text, under 200 characters. This is the ad copy for your page.
- og:image — Preview image. Must be 1200x630 pixels, under 8MB, in JPG or PNG format.
- og:url — The canonical URL of the page. Prevents tracking parameters from appearing in shares.
Complete Open Graph tag reference
| Tag | Required? | Recommended value |
|---|---|---|
og:title | Yes | Page headline, under 60 characters |
og:description | Yes | Under 200 characters, benefit-led |
og:image | Yes | 1200x630 px, JPG or PNG, under 8MB |
og:url | Yes | Canonical URL, no tracking params |
og:type | Recommended | website, article, product |
og:site_name | Optional | Your brand name |
og:locale | Optional | en_US (for internationalised sites) |
Real Open Graph tag examples
1. Local bakery — 180% engagement increase
A bakery previously shared blog posts with no OG tags. Facebook scraped the site header logo (a 50px favicon) and showed plain text. After implementing OG tags with food photography at 1200x630 pixels, social engagement jumped 180% and website traffic from Facebook doubled — with no change in posting frequency or content quality.
2. SaaS company — 3x LinkedIn clicks
A B2B software company publishing 30 monthly blog posts saw their LinkedIn share performance triple after adding correct OG tags with branded imagery. Polished previews versus competitors' plain-text links meant their content stood out in the same feed.
3. Broken OG image — the silent traffic leak
A common mistake: OG image URL points to a path that returns 404. The platform caches the broken state and shows a blank card for months, even after the image is fixed. Solution: run Facebook's Sharing Debugger after every image change to force a cache refresh.
Open Graph tags vs Twitter Cards — which to implement
Open Graph tags
- Universal — works on Facebook, LinkedIn, WhatsApp, Slack, Discord
- The fallback Twitter reads when no Twitter Card tags exist
- Single implementation covers most platforms
- Established since 2010 — maximum compatibility
- Implement these first
Twitter Cards
- Twitter/X-specific format with additional options
- Supports large image cards, player cards, app cards
- Uses
twitter:*meta tag namespace - Falls back to OG tags if absent
- Add after OG tags for full Twitter control
6 best practices for Open Graph tags
- Set unique OG tags per page. Never use the same og:title and og:description for every page. Each share should promote that specific page's content, not your homepage.
- Design OG images at 1200x630 pixels. This is the safe zone across all platforms. Include text overlay with the page headline — readers see the image before the og:title in many feed layouts.
- Test before publishing. Use Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector to preview exactly what platforms will show. Cache issues are common — force-refresh after any update.
- Set og:url to the canonical URL. If your page has UTM parameters or filter variants, og:url should point to the clean canonical version to prevent duplicate tracking in social analytics.
- Keep og:description under 200 characters. Facebook truncates at approximately 200 characters. LinkedIn truncates even earlier. Write the most compelling sentence first.
- Refresh OG image cache after changes. Facebook, LinkedIn, and Slack cache OG images aggressively. After updating an image, manually bust the cache using each platform's debugging tool — otherwise the old image persists for weeks.
SVG images are not supported by most social platform crawlers. Facebook, LinkedIn, and Twitter will fail to display SVG OG images and fall back to a blank card. Always use JPG or PNG format for og:image. WebP support varies by platform — use JPG for maximum compatibility.
Common Open Graph tag mistakes to avoid
- Missing og:image — the most common mistake. Without it, platforms show a blank or scraped image from the page body, usually the wrong one.
- Wrong image dimensions — images smaller than 600x315 pixels may not display at all. Images not at 1200x630 may show cropped or letterboxed.
- Stale cache — updating OG tags doesn't automatically refresh what platforms show. Always run the platform's cache-clearing debugger tool after changes.
- og:url pointing to a redirect — the canonical URL should be the final destination, not an HTTP redirect chain.
- Setting og:description identical to meta description — meta descriptions are written for search result context; OG descriptions are written for social feed context. They should be different.
- Forgetting og:type — without this, Facebook defaults to 'website'. Blog posts should use 'article', products should use 'product.item'. The type affects how the card is rendered.
Frequently asked questions
Not directly. Google does not use OG tags as ranking signals. However, well-implemented OG tags increase social click-through rates and sharing, which drives traffic signals and potential backlinks — both of which indirectly benefit organic rankings.
1200x630 pixels is the universal standard. This size renders correctly on Facebook, LinkedIn, Twitter, and messaging apps. Keep the file under 8MB in JPG or PNG format. Avoid SVG — it is not supported by most social platform crawlers.
Three tools cover the major platforms: Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) previews and clears Facebook cache. Twitter's Card Validator (cards-dev.twitter.com/validator) handles Twitter. LinkedIn's Post Inspector (linkedin.com/post-inspector/) handles LinkedIn. Test all three after implementation.
og:type tells social platforms what category of content the page contains. Common values: 'website' for standard pages, 'article' for blog posts (enables article-specific fields like published_time), 'product' for e-commerce pages. This affects how the preview card is structured and displayed.
Twitter uses its own Twitter Cards system but automatically falls back to OG tags when Twitter Card meta tags are absent. Setting both og:title and twitter:title gives you platform-specific control. If you only implement OG tags, Twitter will still render a preview — just without Twitter-specific options like the large image card format.
Related glossary terms
Sources
