Open Graph Tags: The Complete Cheat Sheet for Social Sharing
Master og:image dimensions, Twitter card formats, and metadata optimization to maximize social click-through rates.
Why Open Graph Protocol Matters for Traffic & CTR
🖼️ Test Your Social Cards in Real-Time
Preview how your URL looks on Twitter, Facebook, LinkedIn, and Google using our Open Graph & Social Media Preview Tool or test Google SERP display with our SERP Preview Tool.
When a user shares your link on Twitter/X, Facebook, LinkedIn, Slack, or Discord, crawler bots fetch your HTML to render rich media preview cards. Without structured Open Graph metadata, links appear as naked, unstyled text that suffers drastically lower click-through rates (CTR).
1. The Four Essential Open Graph Meta Tags
Every public page must contain these four baseline og: properties in its HTML <head>:
<meta property="og:title" content="Page Title | Brand" />— Concise, compelling headline (40–60 characters).<meta property="og:description" content="Brief summary..." />— Enticing summary avoiding truncation (100–160 characters).<meta property="og:image" content="https://example.com/og.png" />— High-resolution preview image.<meta property="og:url" content="https://example.com/page" />— Canonical page URL.
2. Golden Rules for og:image Optimization
The universal standard image resolution for modern social preview cards is 1200 × 630 pixels (an aspect ratio of 1.91:1):
- Maximum file size: Keep image assets under 5MB (preferably under 500KB in compressed WebP or PNG format).
- Absolute HTTPS URLs: Never use relative paths like
/images/og.png. Crawlers require fully qualified URLs (e.g.https://www.example.com/images/og.png). - Safe Zone Padding: Keep essential logos and typography within the central 1200 × 600 area to prevent circular or rectangular card cropping on mobile apps.