Open Graph Tags: The Complete Guide to Social Sharing Previews
Quick answer: Every page needs 4 OG tags minimum:og:title,og:description,og:image, andog:url. The image should be 1200x630px for best results across Facebook, LinkedIn, Twitter, and Slack. Without these tags, shared links look like bare URLs with no preview — and nobody clicks those.
I shared a blog post on Twitter last year. No preview card. Just a naked URL sitting there like a broken link. The post got 3 clicks from 12,000 impressions. I added OG tags, reshared it, and the same post pulled 340 clicks from similar reach. That's a 100x difference from 4 lines of HTML.
Open Graph tags are metadata that tell social platforms what title, description, and image to show when someone shares your link. Facebook created the protocol in 2010, and now every major platform supports it: Twitter, LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, and Teams.
Required Open Graph Tags
The Open Graph protocol defines four required properties. Without all four, most platforms either show a broken preview or fall back to guessing from your page content (poorly).
<meta property="og:title" content="How to Prune Tomato Plants — Step-by-Step Guide">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/tomato-pruning.jpg">
<meta property="og:url" content="https://example.com/garden/prune-tomato-plants">Here's what each one does:
| Tag | Purpose | Example Value | Notes |
|---|---|---|---|
og:title | Headline shown in the preview card | "How to Prune Tomato Plants" | 60-90 chars. Platform truncates beyond this. |
og:type | Content type classification | "article", "website", "product" | Use "article" for blog posts, "website" for homepages |
og:image | Preview image URL | Full absolute URL to image | Must be HTTPS. 1200x630px minimum. |
og:url | Canonical URL of the page | Full absolute URL | Should match your canonical tag |
og:image: the URL must be absolute (starting with https://). Relative paths like /images/photo.jpg will break on every platform. I've seen this mistake on production sites from companies that should know better.
Optional (But Strongly Recommended) Tags
These tags aren't required by the protocol, but platforms use them to build richer previews:
<meta property="og:description" content="Learn when, where, and how to prune tomato plants for maximum yield. Includes diagrams for each pruning method.">
<meta property="og:site_name" content="GardenCalc">
<meta property="og:locale" content="en_US">| Tag | Purpose | Recommended? | Example |
|---|---|---|---|
og:description | Preview text below the title | Yes — always add this | 2-3 sentences, 100-200 chars |
og:site_name | Your brand name shown above the title | Yes | "DevToolHub", "GitHub" |
og:locale | Language and territory | Only for non-English | "en_US", "fr_FR", "de_DE" |
og:locale:alternate | Alternative languages available | For multilingual sites | "es_ES", "ja_JP" |
og:video | Video URL for video content | For video pages only | Full URL to video file |
og:audio | Audio URL for audio content | For podcast pages only | Full URL to audio file |
og:description is technically optional in the spec, but treat it as required. Without it, Facebook pulls random text from your page — often a cookie notice or navigation label. LinkedIn does the same. Always write an explicit description.
Article-Specific Tags
If og:type is "article", you get access to extra tags that some platforms use for richer previews:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-05-18T09:00:00Z">
<meta property="article:modified_time" content="2026-05-18T12:30:00Z">
<meta property="article:author" content="https://example.com/about">
<meta property="article:section" content="Gardening">
<meta property="article:tag" content="tomatoes">
<meta property="article:tag" content="pruning">Facebook displays published_time in some contexts. LinkedIn uses article:author to link to author profiles. These aren't going to make or break your previews, but they take 30 seconds to add and give platforms more structured data to work with.
The Image: Where 90% of the Impact Lives
The preview image is the single most important element. In a social media feed, the image is 80%+ of the visual space in a link preview. A missing or broken image kills your click-through rate.
Image Size Requirements by Platform
Every platform has different display dimensions, but one size works well enough across all of them:
| Platform | Display Dimensions | Recommended Upload Size | Aspect Ratio | Max File Size |
|---|---|---|---|---|
| 1200x630 | 1200x630 | 1.91:1 | 8 MB | |
| Twitter/X | 1200x628 | 1200x628 | 1.91:1 | 5 MB |
| 1200x627 | 1200x627 | 1.91:1 | 5 MB | |
| Slack | 800x418 | 1200x630 (scales down) | 1.91:1 | — |
| Discord | 1200x630 | 1200x630 | 1.91:1 | 8 MB |
| 600x315 | 1200x630 (scales down) | 1.91:1 | — | |
| 1000x1500 | 1000x1500 | 2:3 | 20 MB | |
| iMessage | 1200x630 | 1200x630 | 1.91:1 | — |
File format: JPEG for photos, PNG for graphics with text or sharp edges. WebP is supported by Facebook and Twitter but not universally — stick with JPEG/PNG for maximum compatibility.
Common Image Mistakes
Broken image URL. Test your OG image URL by pasting it directly in a browser. If it doesn't load, it won't load for Facebook either. Use absolute URLs starting with https://.
Image too small. Facebook requires a minimum of 200x200px but recommends 1200x630. Images under 600px wide show as tiny thumbnails instead of the large card format. Always go for the large format — it gets roughly 2-3x the engagement.
Text in the image. Facebook used to enforce a 20% text rule on images. They relaxed it, but images heavy with text still get less distribution. Keep text minimal — brand name and maybe a short headline.
Caching. Facebook and LinkedIn cache your OG data aggressively. If you update your tags, the old preview sticks around for days. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) and LinkedIn's Post Inspector to force a refresh.
Twitter Card Tags
Twitter supports Open Graph tags as a fallback, but their native card system gives you more control:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="How to Prune Tomato Plants">
<meta name="twitter:description" content="Step-by-step guide with diagrams.">
<meta name="twitter:image" content="https://example.com/images/og-tomato.jpg">| Twitter Tag | Purpose | Fallback If Missing |
|---|---|---|
twitter:card | Card type: "summary" or "summary_large_image" | No card shown |
twitter:site | Brand's Twitter handle | None |
twitter:creator | Author's Twitter handle | None |
twitter:title | Card title | Falls back to og:title |
twitter:description | Card description | Falls back to og:description |
twitter:image | Card image | Falls back to og:image |
summary_large_image. The small "summary" card is 120x120px — barely visible in a feed. The large image card takes up the full width of the timeline and gets dramatically more engagement.
Minimum viable Twitter tags: Just set twitter:card to summary_large_image. Twitter will pull everything else from your OG tags. That's one line of HTML for full Twitter card support.
<meta name="twitter:card" content="summary_large_image">Testing and Debugging Your Tags
Before you publish, validate your tags with these platform-specific tools:
- Facebook Sharing Debugger —
developers.facebook.com/tools/debug/— shows exactly what Facebook sees, lets you clear cache - Twitter Card Validator —
cards-dev.twitter.com/validator— preview your Twitter card - LinkedIn Post Inspector —
linkedin.com/post-inspector/— test and clear LinkedIn's cache - OpenGraph.xyz —
opengraph.xyz— quick preview across multiple platforms at once
Complete Copy-Paste Template
Here's a production-ready OG tag setup that works everywhere:
<!-- Primary Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title (60-90 chars)">
<meta property="og:description" content="Compelling 1-2 sentence summary.">
<meta property="og:image" content="https://yoursite.com/images/og/article-name.jpg">
<meta property="og:url" content="https://yoursite.com/article-slug">
<meta property="og:site_name" content="Your Site Name">
<!-- Article Metadata -->
<meta property="article:published_time" content="2026-05-18T09:00:00Z">
<meta property="article:author" content="https://yoursite.com/about">
<!-- Twitter Card (minimal — falls back to OG for everything else) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">That's 9 tags for complete coverage across every major platform. Generate this boilerplate automatically with the meta tag generator — it includes character counting and image dimension checks.
Common Mistakes That Break Previews
Using relative URLs. /images/og.jpg doesn't work. Platforms can't resolve relative paths because they're fetching your HTML from their own servers. Always use https://yoursite.com/images/og.jpg.
Missing og:image. The most common mistake. Without an image, your shared link is a tiny text block that blends into the feed. CTR drops by 50-80% without an image card.
Not matching og:url with canonical. If your canonical says https://example.com/page but your og:url says https://www.example.com/page, Facebook might treat them as different pages and split your share counts.
Forgetting to update after a redirect. If you change a page's URL and set up a 301 redirect, update the og:url on the destination page. Facebook sometimes caches the old URL for weeks.
Putting OG tags inside <body>. They must be inside <head>. Browsers won't complain, but social platform crawlers often stop reading after </head>. I've debugged this exact issue three times — it's always a CMS or plugin inserting tags in the wrong place.
FAQ
Do I need both Open Graph tags and Twitter Card tags?
No. If you set the 4 required OG tags plus twitter:card, that's enough. Twitter falls back to OG tags for title, description, and image. The only Twitter-specific tag you truly need is twitter:card to enable the card format. Adding twitter:site is nice for attribution but optional.
Why does my preview image look different on Facebook vs LinkedIn?
Both platforms cache OG data independently and at different times. If you updated your image recently, one platform might show the old version while the other shows the new one. Clear each platform's cache individually using their respective debugger tools. Also check that your image is at least 1200x630px — LinkedIn falls back to a smaller card format if the image is under 1200px wide.
How long does it take for platforms to update cached OG data?
Facebook caches OG data for approximately 30 days. LinkedIn and Twitter are similar. You can force an immediate refresh using each platform's debug tool. Without manual intervention, expect 1-7 days for changes to propagate naturally. For time-sensitive content (product launches, event pages), always run the debugger before sharing.
Do Open Graph tags affect SEO or Google rankings?
No. Google does not use Open Graph tags for ranking purposes. Google reads your <title> tag and <meta name="description"> for search results — those are separate from og:title and og:description. However, OG tags indirectly help SEO by driving social traffic to your pages, which can lead to backlinks and brand searches. They're a traffic source, not a ranking signal.
Next Steps
- Generate OG tags for your pages automatically with the meta tag generator
- Read the essential meta tags for SEO guide for the tags Google actually uses for rankings
- Create clean, shareable URLs with the slug generator