How to Implement OG Images

Step-by-step guide to adding Open Graph images to your website

1. Basic HTML Implementation

The most straightforward way to add OG images is by including meta tags in your HTML <head> section.

Essential Meta Tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    
    <!-- Essential Open Graph meta tags -->
    <meta property="og:title" content="Your Page Title" />
    <meta property="og:description" content="Brief description of your content" />
    <meta property="og:image" content="https://yoursite.com/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Description of your image" />
    <meta property="og:url" content="https://yoursite.com/current-page" />
    <meta property="og:type" content="website" />
    
    <!-- Twitter Card meta tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Your Page Title" />
    <meta name="twitter:description" content="Brief description of your content" />
    <meta name="twitter:image" content="https://yoursite.com/og-image.png" />
    <meta name="twitter:image:alt" content="Description of your image" />
</head>
<body>
    <!-- Your page content -->
</body>
</html>

Important Notes

  • • Use absolute URLs for the image source
  • • Include image dimensions for faster loading
  • • Add alt text for accessibility
  • • Test URLs are publicly accessible

2. Next.js Implementation

Next.js provides built-in support for Open Graph images through the metadata API.

App Router (Next.js 13+)

// app/page.tsx or app/your-page/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'Brief description of your content',
  openGraph: {
    title: 'Your Page Title',
    description: 'Brief description of your content',
    url: 'https://yoursite.com/current-page',
    type: 'website',
    images: [
      {
        url: 'https://yoursite.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Description of your image',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'Brief description of your content',
    images: ['https://yoursite.com/og-image.png'],
  },
};

export default function Page() {
  return (
    <div>
      {/* Your page content */}
    </div>
  );
}

Pages Router (Next.js 12 and below)

// pages/your-page.tsx
import Head from 'next/head';

export default function YourPage() {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
        <meta name="description" content="Brief description of your content" />
        
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Brief description of your content" />
        <meta property="og:image" content="https://yoursite.com/og-image.png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:url" content="https://yoursite.com/current-page" />
        <meta property="og:type" content="website" />
        
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content="https://yoursite.com/og-image.png" />
      </Head>
      
      <div>
        {/* Your page content */}
      </div>
    </>
  );
}

3. React with Helmet

For React applications without Next.js, use React Helmet to manage meta tags.

Installation

npm install react-helmet
# or
yarn add react-helmet

Usage Example

import React from 'react';
import { Helmet } from 'react-helmet';

function BlogPost({ title, description, imageUrl, pageUrl }) {
  return (
    <>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={imageUrl} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:url" content={pageUrl} />
        <meta property="og:type" content="article" />
        
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content={imageUrl} />
      </Helmet>
      
      <article>
        {/* Your blog post content */}
      </article>
    </>
  );
}

export default BlogPost;

4. Dynamic OG Images

For blogs and e-commerce sites, you can generate OG images dynamically based on content.

Next.js API Route Example

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';
  const description = searchParams.get('description') || 'Default Description';

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          background: 'linear-gradient(to right, #7c3aed, #2563eb)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          textAlign: 'center',
          padding: '60px',
        }}
      >
        <div style={{ fontSize: 64, fontWeight: 'bold', marginBottom: 30 }}>
          {title}
        </div>
        <div style={{ fontSize: 32, opacity: 0.9 }}>
          {description}
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

// Then use in your metadata:
export const metadata: Metadata = {
  openGraph: {
    images: ['/api/og?title=Your Title&description=Your Description'],
  },
};

5. Testing & Validation

Pre-Launch Checklist

Image is 1200×630 pixels
File size is under 8MB
Image URL is publicly accessible
Uses absolute URLs (https://)
Alt text is descriptive
Text is readable at small sizes

Testing Tools

Facebook Sharing DebuggerTwitter Card ValidatorLinkedIn Post Inspector

Common Issues

  • • Image not loading: Check URL accessibility
  • • Wrong image showing: Clear platform cache
  • • Blurry preview: Use correct dimensions
  • • Text too small: Increase font size

Ready to Test Your Implementation?

Use the testing tools above to validate your OG images work correctly across all platforms.

Testing GuideAll Resources