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 Debugger Twitter Card Validator LinkedIn 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.

Try the Generator All Resources