You've crafted a beautiful page, but when shared on social media, it appears as a plain link with no preview image or compelling description. The fix? Open Graph (OG) tags.

What Are Open Graph Tags?

Open Graph is a protocol originally developed by Facebook that allows web pages to become "rich objects" on social platforms. When you share a URL, the platform reads OG tags from the page's HTML and displays a preview card with title, description, and image.

Why Open Graph Tags Matter

  • Higher click-through rates — Visual previews drive 2-3x more clicks
  • Brand control — You decide what appears in social previews
  • Professional appearance — Bare links look spammy
  • SEO indirect benefits — Better social engagement signals

Essential Open Graph Tags

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling 1-2 sentence description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">

Twitter Card Tags

While Twitter respects OG tags, you should add Twitter-specific tags for fine-tuned control:

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

Image Specifications

To avoid pixelation or cropping issues, use these dimensions:

  • Facebook/LinkedIn: 1200 × 630 pixels (1.91:1 ratio)
  • Twitter (large card): 1200 × 628 pixels
  • WhatsApp: Square, min 300 × 300 pixels
  • Max file size: Under 5MB, ideally under 1MB

Common Open Graph Mistakes

  1. Missing og:image — Worst offense, results in blank previews
  2. Wrong image dimensions — Crops awkwardly
  3. Relative URLs — Always use absolute URLs
  4. Duplicate tags — Confuses crawlers
  5. No og:url — Causes duplicate content issues

Testing Your Open Graph Tags

Don't guess — verify. Use our Open Graph Card Tester to preview exactly how your URL appears across Facebook, Twitter, LinkedIn, and Slack before publishing.

Article-Specific Tags

For blog posts, add article metadata:

<meta property="article:published_time" content="2026-01-15T10:00:00Z">
<meta property="article:author" content="Author Name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">

Pro Tips

  • Use a CDN to serve OG images for faster load times
  • Create dynamic OG images per page (especially for blog posts)
  • Test on at least 3 platforms before launch
  • Re-scrape Facebook's cache after updates (via Facebook Debugger)
  • Add fallback images for missing pages

Conclusion

Open Graph tags are non-negotiable for any site serious about social presence. They take 5 minutes to implement and can dramatically increase your social traffic. Test thoroughly, optimize images, and your shared links will stand out in every feed.