Open Graph

Definition

Open Graph is a set of meta tags that describe how a page should appear when shared on social platforms (Facebook, LinkedIn, etc.). It typically isn't a direct ranking factor, but affects click-through and sharing.

Why it matters

• Tools and tutorials are often shared - previews affect clicks
• Better CTR and sharing can indirectly grow organic traffic
• Prevents platforms from guessing the wrong title/image
• Ensures consistent brand appearance across different platforms
• Improves backlink quality: attractive previews encourage external sites to share
• Developers can automate generation: use templates for consistent OG tags at scale

How to implement

• Set og:title/og:description/og:image/og:url per page
• Use 1200x630 for og:image (1.91:1 ratio), keep file under 5MB
• Refresh caches with platform debuggers after updates
• og:url must match canonical URL to avoid signal confusion
• Use absolute URLs: og:image requires full https:// paths
• Set og:type based on content: article/website/product helps platform categorization
• Generate dynamically during SSR/SSG to ensure crawlers see correct OG tags

Examples

<!-- Basic Open Graph tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Meta Tags Generator" />
<meta property="og:description" content="Generate SEO meta tags in seconds." />
<meta property="og:image" content="https://seo.lucas-futures.com/og-image.png" />
<meta property="og:url" content="https://seo.lucas-futures.com/tools/meta-generator" />
<meta property="og:site_name" content="SEO Academy" />

// React Helmet dynamic OG tags
import { Helmet } from 'react-helmet-async';

function SEOHead({ title, description, image, url }) {
  return (
    <Helmet>
      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </Helmet>
  );
}

Related