You published a great article. Someone shares the link on Twitter. Instead of a beautiful card with your title, image, and description — there's a bare URL or a broken placeholder. It's a missed opportunity, and it costs you clicks.
Open Graph (OG) tags fix this. They're a set of <meta> tags in your page's <head> that tell social platforms exactly how to display your content when it's shared.
The Essential OG Tags
<!-- Title shown in the card -->
<meta property="og:title" content="Your Page Title Here" />
<!-- Description below the title -->
<meta property="og:description" content="A short description of your page content." />
<!-- The preview image (1200×630 recommended) -->
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<!-- The canonical URL -->
<meta property="og:url" content="https://yoursite.com/your-page" />
<!-- Always "website" for web pages; "article" for blog posts -->
<meta property="og:type" content="website" />
<!-- Your site name -->
<meta property="og:site_name" content="YourSite" />
These six tags cover 95% of use cases. Without them, platforms either scrape generic content from the page or display nothing.
Twitter / X Cards
Twitter has its own set of meta tags that build on Open Graph:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://yoursite.com/twitter-image.png" />
<meta name="twitter:site" content="@yourtwitterhandle" />
summary_large_image shows a large image above the title. summary shows a small square thumbnail to the left. The large image card gets significantly more engagement.
If you have OG tags already set, Twitter falls back to them. But explicitly setting Twitter tags gives you more control.
Image Specifications by Platform
| Platform | Recommended size | Aspect ratio | Max file size | |---|---|---|---| | Twitter / X | 1200×628px | 1.91:1 | 5MB | | Facebook | 1200×630px | 1.91:1 | 8MB | | LinkedIn | 1200×628px | 1.91:1 | 5MB | | iMessage | 600×315px min | 1.91:1 | — |
Always use absolute URLs for og:image. Relative paths are not supported.
Serve images over HTTPS. HTTP images are blocked by most platforms.
Don't put critical text in the image itself. It won't be readable on small screens and it's not accessible.
Character Limits That Matter
| Tag | Platform | Recommended max |
|---|---|---|
| og:title | Google | 60 characters |
| og:title | Twitter/LinkedIn | 70 characters |
| og:description | Google | 155–160 characters |
| og:description | Twitter | 200 characters |
Going over these limits doesn't break anything — the text just gets truncated with an ellipsis. Exceeding the limit means your message gets cut at an arbitrary point.
Common Mistakes
Using the same OG image for every page. Your homepage image makes sense for the homepage. An article about CSS gradients deserves its own relevant image. Dynamic OG image generation (Vercel's @vercel/og, Cloudflare Workers) lets you generate page-specific images automatically.
Not invalidating the cache. Platforms cache OG data aggressively. Twitter caches for 7 days. After updating your tags, use the Twitter Card Validator or Facebook Sharing Debugger to force a refresh.
Image returns 404 or requires authentication. Your OG image URL must be publicly accessible. If it's behind a login wall or doesn't exist, the card renders broken.
og:type = "website" on every article. Use "article" for blog posts and news articles. This enables additional structured data that some platforms display (publish date, author).
Testing Your Tags
After adding OG tags, test before sharing:
- Twitter Card Validator —
cards-dev.twitter.com/validator - Facebook Sharing Debugger —
developers.facebook.com/tools/debug - LinkedIn Post Inspector —
linkedin.com/post-inspector
Or use our OG Image Previewer to see all four platforms side by side instantly — no external tool, no authentication required, with character count warnings for every field.
Generating the Tags
Our OG Previewer also generates the complete set of meta tags ready to paste into your <head>:
<!-- Primary -->
<title>Page Title</title>
<meta name="description" content="..." />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="..." />
<meta property="og:url" content="..." />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />
Getting this right is a one-time setup per page type. Once it's in your template, every page shares correctly automatically.