Open Graph Basics: Control How Pages Appear When Shared

Open Graph tags define title, description, URL, and image for social previews.

Why It Matters

When links are shared in messaging apps or social feeds, Open Graph often determines whether the preview looks trustworthy and clickable. Missing tags can lead to random titles, weak snippets, or no image.

Core Tags

<meta property="og:title" content="Page title">
<meta property="og:description" content="Short summary">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og-image.png">

Recommended Supporting Tags

  • og:type for page context (e.g., website, article).
  • og:site_name for brand consistency.
  • og:locale (and alternates where relevant).

Best Practices

  • Use unique titles/descriptions for high-value pages.
  • Keep og:url canonical and absolute.
  • Ensure og:image is accessible and appropriately sized.
  • Align Open Graph metadata with on-page content and intent.

Quick Validation

  1. View source and verify tag presence and final rendered values.
  2. Test shared URL in preview tools.
  3. Check crawler access to preview images.
  4. Re-validate after CMS/template releases.

Final Takeaway

Accurate Open Graph metadata improves social click quality and preview consistency. It should be maintained with the same care as title and meta description.