Open Graph: Basics and Images for Better Social Previews

Open Graph metadata controls how your pages appear when shared across social platforms, messaging apps, and link preview surfaces. The two pieces that matter most for most sites are the core Open Graph tags and the preview image.

What Is Open Graph?

Open Graph is a set of meta tags that describe a page for external consumers. When someone shares a URL, those systems read the metadata to decide what title, description, and image to show.

Why It Matters

If the metadata is missing or inconsistent, platforms may guess the title or description, crop the wrong image, or show no image at all. That makes the preview less trustworthy and usually less clickable.

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, such as website or article.
  • og:site_name for brand consistency.
  • og:locale and alternates where relevant.

What Is an Open Graph Image?

An open graph image is the preview image social platforms display when a link is shared. It is controlled by the og:image meta tag and should make the page look clear, trustworthy, and more clickable in feeds, messages, and link previews.

The best open graph images are usually designed for a specific page or article, use a wide aspect ratio, and keep the most important text or subject safely inside the center of the image so it still looks good after cropping.

Best Practices

  • Use unique titles and 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.
  • Use a stable absolute URL for the image.
  • Use high-quality, legible imagery.
  • Keep branding consistent.
  • Ensure the image is publicly accessible.
  • Keep important text away from likely crop boundaries.
  • Use dimensions commonly supported for large previews.

Technical Requirements

  • Serve over HTTPS.
  • Return a successful status code with no redirects, 403s, or 404s.
  • Keep file size reasonable for fast fetch and render.
  • Ensure cache and CDN headers allow reliable scraper access.

Common Failure Patterns

  • Relative image URLs in metadata.
  • Image blocked by auth, firewall rules, or hotlink restrictions.
  • Very small or heavily compressed images.
  • Metadata not refreshed after image changes.

Quick Validation

  1. View source and verify the rendered tag values.
  2. Request the image URL directly and confirm status and content type.
  3. Test preview generation in platform validators where available.
  4. Re-share with cache-busting updates if scrapers cache old versions.

Final Takeaway

Accurate Open Graph metadata improves social click quality and preview consistency. Treat social preview images as conversion-oriented creative assets, not afterthoughts.