Open Graph & Social Media Cards 🃏
Mentor's Note: Social cards are your website's first impression on social media! When someone shares your link, the card that appears is like a mini-billboard for your content. Get it right, and people will click through. Get it wrong, and you're invisible. 🎯
🧠 What Are Social Cards?
Social cards (or rich previews) are the link previews generated by social platforms — Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Telegram, Discord — when a user shares a URL. Instead of showing a bare URL, they display a formatted card with a title, description, image, and site name.
The Social Card Flow:
Without Open Graph tags, platforms fall back to guessing — often picking the wrong image, truncating descriptions, or showing a generic card. You lose control of your brand's appearance.
📖 The Open Graph Protocol
The Open Graph (OG) Protocol was introduced by Facebook in 2010 to standardize how web pages are represented on social platforms. It allows any page to become a rich object in a social graph.
Essential OG Meta Tags:
| Property | Purpose | Example |
|---|---|---|
og:title | Title of the page | "Complete HTML Tutorial" |
og:description | Page description (2–4 sentences) | "Learn HTML from scratch with hands-on examples and real projects." |
og:image | Preview image URL (absolute URL) | "https://example.com/og-image.jpg" |
og:url | Canonical URL of the page | "https://example.com/html-tutorial" |
og:type | Content type | "website", "article", "video.movie" |
og:site_name | Name of your website | "VD Computer Tuition" |
og:locale | Language and region | "en_US", "hi_IN" |
Image Best Practices:
- Size: 1200×630 px (1.91:1 ratio) — the standard for most platforms
- Format: PNG or JPG
- Max Size: Under 5 MB
- Text: Minimize text on the image; many platforms crop or overlay on mobile
- Contrast: Ensure the image is readable in both light and dark mode previews
🐦 Twitter Cards
Twitter originally had its own card system (Twitter Cards), but now primarily uses Open Graph tags (with Twitter-specific fallbacks). Always include both for maximum compatibility.
Twitter Card Meta Tags:
| Meta Tag | Purpose |
|---|---|
twitter:card | Card type (summary, summary_large_image, player, app) |
twitter:site | @username of the website/author |
twitter:title | Card title (falls back to og:title if omitted) |
twitter:description | Card description (falls back to og:description) |
twitter:image | Card image (falls back to og:image) |
Card Type Comparison:
| Card Type | When to Use |
|---|---|
summary | Blog posts, articles, text-heavy pages |
summary_large_image | Visual content, portfolios, landing pages |
player | Video/audio embeds (podcasts, YouTube, etc.) |
app | Mobile app download pages (iOS/Android) |
🔧 Validation & Testing Tools
Always test your social cards before publishing:
| Tool | URL | Purpose |
|---|---|---|
| Facebook Sharing Debugger | https://developers.facebook.com/tools/debug/ | Debug OG tags, refresh Facebook's cache |
| Twitter Card Validator | https://cards-dev.twitter.com/validator | Validate Twitter Card rendering |
| LinkedIn Post Inspector | https://www.linkedin.com/post-inspector/ | Check how LinkedIn renders your link |
| Slack Unfurls | Paste URL in any Slack channel | Slack fetches fresh metadata on paste |
| WhatsApp Preview | Paste URL in a chat | Mobile-only preview tester |
| OpenGraph.xyz | https://opengraph.xyz/ | Preview OG tags from any URL |
| Metatags.io | https://metatags.io/ | Live preview + editable OG tag simulator |
⚠️ Caching: Social platforms aggressively cache OG data. After updating your tags, use the debugger tools above to force a cache refresh — otherwise old previews may persist for hours or days.
💻 Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Tutorial — Learn Web Development | VD Computer Tuition</title>
<meta name="description" content="Master HTML from scratch with hands-on examples, real projects, and expert guidance. Perfect for beginners and board exam preparation." />
<!-- Open Graph / Facebook / LinkedIn / WhatsApp / Slack -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://vdcomp.tech/programming/html/" />
<meta property="og:title" content="HTML Tutorial — Learn Web Development" />
<meta property="og:description" content="Master HTML from scratch with hands-on examples, real projects, and expert guidance. Perfect for beginners and board exam preparation." />
<meta property="og:image" content="https://vdcomp.tech/assets/images/og-html-tutorial.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="HTML Tutorial preview showing code editor and browser output" />
<meta property="og:site_name" content="VD Computer Tuition" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@vdcomp" />
<meta name="twitter:title" content="HTML Tutorial — Learn Web Development" />
<meta name="twitter:description" content="Master HTML from scratch with hands-on examples, real projects, and expert guidance." />
<meta name="twitter:image" content="https://vdcomp.tech/assets/images/og-html-tutorial.jpg" />
<meta name="twitter:image:alt" content="HTML Tutorial preview showing code editor and browser output" />
<!-- Additional Structured Data (optional, boosts SEO) -->
<link rel="canonical" href="https://vdcomp.tech/programming/html/" />
</head>
<body>
<!-- Page content -->
</body>
</html>
❌ Common Mistakes
| Mistake | Why It's Wrong | Fix |
|---|---|---|
| Relative image URLs | Platforms fetch from their server, not yours — relative paths break | Always use absolute URLs (https://...) |
Missing og:image | Platforms show no image or pick a random one | Always provide at least one OG image |
| Oversized images | Slow load times; platforms may reject | Keep under 5 MB, use 1200×630 px |
| Text-heavy OG images | Text gets cropped on mobile viewports | Use minimal text, rely on og:title and og:description |
Missing twitter:card | Twitter shows a plain link instead of a rich card | Always set twitter:card even if it falls back to OG |
| Ignoring cache | Updating tags but old preview still shows | Use debugger tools to refresh cache |
Wrong og:type | Platform may not render as expected | Use "website" for general pages, "article" for blog posts |
| No canonical URL | Duplicate content confusion for both SEO and social | Always add <link rel="canonical"> |
| HTTPS mismatch | Mixed content warnings; image may not load | Serve OG images over HTTPS, same as the page |
Forgetting og:image:alt | Accessibility issue; platforms use it for screen readers | Describe the image content briefly |
🚀 Next Steps
- Audit your pages — Use Metatags.io or OpenGraph.xyz to check current pages
- Generate OG images — Create a template (1200×630 px) in Canva or Figma
- Add tags to your template — Place OG tags in your site's
<head>partial/layout - Test every platform — Use the debugger tools listed above for Facebook, Twitter, LinkedIn
- Automate — If using a CMS or static site generator, set up automatic OG image generation (e.g., Vercel OG, Satori)
- Monitor — Periodically re-test pages after site updates
🔗 Related Topics
- SEO & Accessibility — Meta tags and search optimization
- Microdata & Schema — Structured data for rich search snippets