dragoon0x CANON · Meta / Open Graph
When someone shares your URL on Slack, Twitter, LinkedIn, iMessage, or WhatsApp, these tags control what they see. Without them, the preview is a bare URL or a random scraped snippet.
Essential Open Graph tags
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Concise summary of the page.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
Twitter Card tags
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Concise summary.">
<meta name="twitter:image" content="https://example.com/og-image.png">
summary_large_image shows a large preview. summary shows a small thumbnail. Large image gets more clicks.
OG image spec
| Property | Value |
|---|---|
| Recommended size | 1200×630px |
| Minimum size | 600×315px |
| Format | PNG or JPEG (PNG for text-heavy, JPEG for photos) |
| File size | ≤ 1MB (smaller is better for fast preview) |
| Text safety zone | Keep text 60px from edges (platforms crop differently) |
Every page should have a unique og:image. Fallback to a site-wide default if page-specific isn't available.
Dynamic OG images
For pages with user-generated content (blog posts, profiles), generate OG images dynamically:
https://example.com/api/og?title=My+Post&author=Deep
Use @vercel/og, Satori, or Puppeteer to render HTML → image server-side.
Validation tools
- Facebook:
https://developers.facebook.com/tools/debug/ - Twitter:
https://cards-dev.twitter.com/validator - LinkedIn:
https://www.linkedin.com/post-inspector/ - Open Graph debugger:
https://www.opengraph.xyz/
Test after every change — platforms cache aggressively.
Anti-patterns
| Anti-pattern | Why it fails |
|---|---|
| No og:image | Preview is text-only, low engagement |
| Same og:image for every page | Every share looks identical |
| og:image with text cut off at edges | Platforms crop differently |
| og:title longer than 60 characters | Truncated in most previews |
| HTTP (not HTTPS) og:image URL | Some platforms reject it |
| Missing og:url (or wrong URL) | Canonical confusion |
Audit checklist
-
og:title,og:description,og:image,og:urlon every page -
twitter:card=summary_large_image - OG image 1200×630px, ≤ 1MB
- Text in OG image within safe zone (60px margins)
- Unique og:image per page (or dynamic generation)
- Validated with Facebook debugger
- HTTPS URLs for all meta content
Sources
- Open Graph Protocol · ogp.me
- Twitter · Cards documentation
- Facebook · Sharing best practices