What Is an OG Image and Why Every Website Needs One

You share a link on Twitter. Your friend shares the same link on LinkedIn. Someone drops it into a Slack channel. In every case, a small card appears with a title, description, and — most importantly — an image. That image is an OG image.

Without a custom one, you get a blank card, a random screenshot, or your favicon stretched to 1200 pixels wide. Not a great first impression.

What Does OG Stand For?

OG stands for Open Graph — a protocol created by Facebook in 2010 that lets web pages control how their content appears when shared on social platforms. It works through HTML meta tags you add to the <head> of your page.

The four core Open Graph tags are:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of your page" />
<meta property="og:image" content="https://yoursite.com/path/to/image.png" />
<meta property="og:url" content="https://yoursite.com/your-page" />

The og:image tag is the one that controls the preview image. Every major platform reads it: Twitter/X, LinkedIn, Facebook, WhatsApp, Slack, Discord, iMessage, and more.

Why Does It Matter for SEO and Click-Through Rates?

OG images don't directly affect your Google ranking — but they have a massive indirect impact.

Higher click-through rate on social. Posts with compelling images get 3× more engagement than text-only posts. When your link preview looks professional, people click.

Brand recognition. A consistent visual style across all your shared links makes your brand instantly recognizable in a feed. Think of how New York Times articles always have a clean headline image — you recognize them before you even read the title.

Credibility signal. A broken or missing OG image signals an unmaintained website. A polished one signals trustworthiness — which influences both human visitors and the secondary signals search engines measure (dwell time, return visits, shares).

What Size Should an OG Image Be?

The standard is 1200 × 630 pixels at 72 DPI. This is the recommended size for:

Twitter/X (summary_large_image card)
LinkedIn (1200×627 minimum)
Facebook (1200×630)
WhatsApp
Slack / Discord / Teams

Keep your main content (text, logos) away from the outer 50px edges — some platforms crop the preview slightly depending on the viewport.

File size matters too. Keep it under 1MB, ideally under 200KB for fast loading. PNG is fine for graphics with text; JPEG is better for photography.

What Makes a Good OG Image?

A great OG image does three things at a glance:

States clearly what the page is about — the title should be legible at small sizes.
Matches your brand — consistent colours, fonts, and logo build recognition.
Creates curiosity — a good image makes someone want to click.

Avoid cluttered designs, tiny text, and generic stock photos. The image renders at thumbnail size in feeds — simplicity wins.

How to Create an OG Image for Free

The easiest way is to use a dynamic generator so you never have to open a design tool. With Keynou's free OG Image Generator, you:

Enter your page title and a short description.
Pick a category preset (blog, PDF, video, image, etc.) — each has its own accent colour.
Set your custom branding once: domain name, logo letter, tagline, and accent colours. These save to your browser automatically so every future image is consistent.
Copy the generated URL or download the 1200×630 PNG.

The generated URL works as a live og:image tag value — meaning every page with a different title gets a unique image automatically, with zero manual design work.

How to Add an OG Image in HTML

<head>
  <meta property="og:image" content="https://keynou.com/api/og?title=My+Blog+Post&category=blog" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://keynou.com/api/og?title=My+Blog+Post&category=blog" />
</head>

How to Add an OG Image in Next.js

In Next.js 13+ App Router, add it to your generateMetadata return:

export async function generateMetadata({ params }) {
  return {
    openGraph: {
      images: [{
        url: `https://yoursite.com/api/og?title=${encodeURIComponent(title)}`,
        width: 1200,
        height: 630,
      }],
    },
  };
}

Related Tools

Once your OG images are sorted, here are other tools that help your pages look great when shared:

QR Code Generator — create branded QR codes that link to your pages
Color Wheel — find colour palettes that match your brand
Image Compressor — compress downloaded OG images before hosting them

Final Thoughts

An OG image is one of the smallest investments with one of the highest returns in web publishing. It takes two minutes to set up once, and from that point every link you share looks polished and professional. With a dynamic generator, you don't even need two minutes — one URL pattern covers your entire site automatically.

Blog