5 min read
Open Graph Tags: The Complete Guide to Social Media Previews
OG tags control how your content appears when shared on social media. Learn all tag types, testing tools, and common mistakes.
R
ruben
What Are Open Graph Tags?
Open Graph (OG) tags are HTML meta tags that control how your content appears when shared on Facebook, LinkedIn, Twitter/X, Slack, Discord, and other platforms. Without OG tags, social platforms guess your title and image — usually incorrectly.
Essential OG Tags
<meta property="og:title" content="Your Page Title" />\n<meta property="og:description" content="A compelling description" />\n<meta property="og:image" content="https://yoursite.com/og-image.jpg" />\n<meta property="og:url" content="https://yoursite.com/page" />\n<meta property="og:type" content="article" />\n<meta property="og:site_name" content="Your Site Name" />Twitter/X Card Tags
<meta name="twitter:card" content="summary_large_image" />\n<meta name="twitter:title" content="Your Title" />\n<meta name="twitter:description" content="Description" />\n<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Image Best Practices
- Size: 1200x630 pixels (2:1 ratio)
- Format: JPG or PNG (not SVG or WebP)
- File size: Under 5MB
- Text: Keep text minimal — it should work as a thumbnail
Testing Tools
- Facebook Sharing Debugger — Preview and clear cache
- Twitter Card Validator — Test Twitter card rendering
- LinkedIn Post Inspector — Preview LinkedIn shares
- opengraph.xyz — Quick preview across platforms
Automation
Manually setting OG tags for every page is tedious. A good CMS generates them automatically from your content — title becomes og:title, excerpt becomes og:description, featured image becomes og:image. RankFlo does this for every published post.