Open Graph & Social Sharing

What Are Open Graph Tags?

Open Graph (OG) tags are meta tags in your HTML <head> that control how your pages appear when shared on social media platforms like Facebook, LinkedIn, and WhatsApp. They were created by Facebook in 2010 and are now the standard for social sharing previews.

Without OG tags, social platforms will guess what to show — often picking a random image or the wrong title. With proper OG tags, you control exactly how your content looks when shared.

Essential Open Graph Tags

<!-- Required -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling 2-3 sentence description.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Recommended -->
<meta property="og:site_name" content="Your Brand Name">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">

The Perfect OG Image

The OG image is the most visually impactful element of your social share preview. Getting it right dramatically increases engagement:

• Dimensions: 1200×630px is the standard. Facebook, LinkedIn, and Twitter all use this ratio.
• File size: Keep it under 1MB. Facebook recommends under 8MB but smaller is faster.
• Format: JPG or PNG. WebP is not universally supported by social crawlers.
• Content: Include your brand logo, page title, and a visually compelling background. Avoid too much text.
• Unique per page: Use different OG images for different pages/articles for better engagement.

Twitter Cards

Twitter (now X) uses its own meta tags called Twitter Cards. They work similarly to OG tags but are specific to X/Twitter. If Twitter Card tags are missing, Twitter falls back to OG tags.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your description here.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:site" content="@yourtwitterhandle">

The twitter:card value summary_large_image shows a large image preview. Use summary for a small thumbnail instead.

Platform-Specific Notes

• Facebook — Caches OG data aggressively. Use the Facebook Sharing Debugger to force a refresh after changes.
• LinkedIn — Uses OG tags. Cache can take up to 7 days to refresh. Use the LinkedIn Post Inspector.
• WhatsApp — Uses OG tags for link previews. Image must be accessible (no auth required).
• Slack / Discord — Both use OG tags for link unfurling in channels.

OG Tags Checklist

• ✅ og:title — unique, compelling, under 60 characters
• ✅ og:description — 2–3 sentences, under 160 characters
• ✅ og:image — 1200×630px, under 1MB, absolute URL
• ✅ og:url — canonical URL of the page
• ✅ og:type — "website" for homepages, "article" for blog posts
• ✅ twitter:card — "summary_large_image" for articles
• ✅ twitter:image — same as OG image or Twitter-specific version