What are OG Images?

January 22, 2026

In the modern web, sharing content on social media is a primary way to drive traffic to your site. Have you ever noticed how some links on Twitter, LinkedIn, or Discord look like beautiful, rich cards with an image, title, and description, while others are just plain text? The secret behind those beautiful cards is Open Graph (OG) images.

In this post, we'll dive into what OG images are, why they are a game-changer for your brand, and how you can easily add them to your Next.js application.

See an example used on my site:

Ido Evergreen OG Image

What are OG Images?

OG (Open Graph) images are part of the Open Graph protocol, originally introduced by Facebook. They are meta tags that you add to the <head> of your HTML to tell social media platforms what image should be displayed when a link to your page is shared.

Without an OG image, social platforms might pick a random image from your page or, worse, show no image at all, which significantly reduces the visual appeal of your link.

Why use OG Images?

The primary reason to use OG images is to control your brand's narrative. Instead of letting an algorithm decide what your content looks like when shared, you get to design exactly what users see.

  1. Increased Visibility: A beautiful image catches the eye much faster than text alone in a crowded social media feed.
  2. Professionalism: It shows that you've put care into the small details of your web presence.
  3. Context: You can use images to provide a quick visual summary of what the article or page is about.

Benefits of OG Images

  • Improved Click-Through Rate (CTR): Rich media consistently outperforms plain text links. A compelling OG image can lead to more clicks and more traffic.
  • Brand Recognition: Consistent use of colors, logos, and fonts in your OG images helps build a recognizable brand across different platforms.
  • Better SEO (Indirectly): While OG images aren't a direct ranking factor for search engines, the increased traffic and social signals they generate are great for your overall SEO strategy.

How to add OG Images in Next.js

Next.js makes it incredibly easy to manage your metadata, including OG images. There are two main ways to handle this.

1. Static OG Images

There are two ways to handle static OG images in Next.js:

A. Metadata Object You can define the image URL in your metadata object in layout.tsx or page.tsx.

export const metadata = {
  title: "My Awesome Post",
  openGraph: {
    title: "My Awesome Post",
    description: "Learn all about OG images in this guide.",
    images: [
      {
        url: "https://example.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "OG Image Alt Text",
      },
    ],
  },
};

B. File-based Metadata (Special Files) Next.js supports a file-based convention for OG images. Simply add an image file named opengraph-image.(jpg|jpeg|png|gif) to any route segment, and Next.js will automatically generate the correct meta tags for that route and its children.

For example, adding app/opengraph-image.png will set the global OG image for your entire site. If you add it to app/about/opengraph-image.png, it will only apply to the /about route.

2. Dynamic OG Images with next/og

One of the coolest features of Next.js is the ability to generate OG images dynamically using the ImageResponse API. This is perfect for blogs where you want each post to have a custom image containing its title.

Next.js allows you to create a route.tsx file that generates an image using JSX and CSS (subset).

Example of a dynamic OG route:

import { ImageResponse } from "next/og";
export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") || "My Blog Post";
  return new ImageResponse(
    <div
      style={{
        display: "flex",
        fontSize: 60,
        color: "white",
        background: "black",
        width: "100%",
        height: "100%",
        padding: "50px 200px",
        textAlign: "center",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {title}
    </div>,
    {
      width: 1200,
      height: 630,
    },
  );
}

Conclusion

OG images are more than just "nice to have"; they are a critical component of modern web development and digital marketing. They help your content stand out, build your brand, and drive more traffic to your site.

With Next.js, implementing both static and dynamic OG images is a breeze. If you haven't yet, take a few minutes to add them to your project—the results are well worth the effort!

Happy coding! 🚀