Open Graph (OG) Image Size: 1200 × 630 Guide

The recommended Open Graph (OG) image size is 1200 × 630 pixels, an aspect ratio of about 1.91:1. The Open Graph protocol does not require this exact size, but it lets publishers declare the image URL, width, height, MIME type, and alt text for more predictable social previews.

What Is the Best Open Graph Image Size?

Use 1200 × 630 pixels when you need one OG image for articles, landing pages, product pages, and documentation. Vercel lists 1200 × 630 as its recommended OG image size, and the same dimensions appear in the official Next.js Open Graph image examples.

The image should keep its main title and subject away from the outer edges. Sharing platforms may resize or crop previews differently, so a centered safe area is more reliable than edge-to-edge text.

Is 1200 × 630 Required by Open Graph?

No. The official Open Graph protocol requires og:image as a basic metadata property, but it does not mandate a universal pixel size. It defines og:image:width, og:image:height, og:image:type, and og:image:alt as optional structured properties.

This distinction matters: 1200 × 630 is a practical recommendation, not a protocol rule. A page can use another image size, but the result may appear less consistent across social networks, messaging apps, and link preview tools.

Which OG Image Meta Tags Should You Add?

Add the image URL first, followed by its structured properties:

<meta property="og:image" content="https://example.com/article-og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="A clear description of the social preview" />

Use an absolute HTTPS URL that a crawler can access without signing in. The alt text should describe the image rather than repeat a generic label such as “OG image.”

How to Add an OG Image in Next.js

Next.js metadata can reference the same 1200 × 630 image:

export const metadata = {
  openGraph: {
    images: [
      {
        url: 'https://example.com/article-og.png',
        width: 1200,
        height: 630,
        alt: 'Article title and visual description',
      },
    ],
  },
}

Next.js also supports static opengraph-image files and code-generated images. Its documentation explains that these conventions automatically create the related image meta tags.

Create a 1200 × 630 OG Image

Use the free TwitterShots OG Image Generator to create the image without setting up a design canvas. Enter the title, choose OpenAI Gradient, Linear Gradient, or Editorial, select a background and title size, then download the PNG.

For tool scenarios and the complete workflow, see OG Image Generator: Create a Social Preview in 3 Steps.