How to create an Open Graph image

An Open Graph image has two halves: the picture and the tag that points at it. Most guides cover one and skip the other. This one walks through both, in the order that prevents rework: decide the message, design the card, export it, publish it, declare it, and check what the platforms actually show.

Before you design: choose the one thing

A link card is not a landing page. It has one job: earn the click from someone scrolling a feed. The card that tries to say three things says nothing. Write the headline first, as a sentence, and cut it until it is six to ten words. Then decide whether the card needs a product shot, an abstract background, or type alone.

The eight-step workflow

1. 01Write the headline. Six to ten words. Put the specific noun first.
2. 02Open a 1200 x 630 canvas. Use a template, a design tool, or code. Do not start from a square.
3. 03Lay out inside the safe area. Keep type and the logo at least 64 px from every edge, and keep the headline in the middle 80 percent.
4. 04Set the type large. A headline around 72-96 px at 1200 px wide is a good starting point. Check it at 300 px wide.
5. 05Add the brand. A wordmark, a domain, or a small logo. It should be identifiable at thumbnail size.
6. 06Export a compressed file. JPG or WebP for photographic backgrounds, PNG for flat colour. Target under 1 MB.
7. 07Upload to a public URL. It must return HTTP 200 without a login. Use the final CDN URL, not a preview URL.
8. 08Add the tags and test. Put the Open Graph tags in the head, then check the URL in the platform debuggers.

Method 1: use a template

A template is the fastest path when the layout is not the point. Pick a card that matches the job, replace the headline, swap the logo, and export. The advantage is composition: the spacing, type scale, and safe area are already decided, so you are not rebuilding the same card for every post.

1. 01Open the template gallery and choose a layout by job, not by colour.
2. 02Replace the headline with your six-to-ten-word line.
3. 03Set the logo or wordmark. Keep it inside the safe area.
4. 04Switch the background if the brand needs it, then check the contrast.
5. 05Open the preview panel and confirm the 1200 x 630 crop.
6. 06Export PNG, JPEG, or WebP at 1x. Copy the meta tags from the preview panel.

The free canvas is the better choice when the card needs a specific composition that no template covers, such as a screenshot with callouts or a data-heavy launch card. It exposes every layer, so you can place the headline, the product shot, and the mark exactly where you want them.

Method 2: design it yourself

Any editor that supports a custom canvas works. The rules are the same: 1200 x 630, one idea, high contrast, a brand mark, and a safe area. A few practical constraints save time:

• Use one typeface. A display face for the headline and a neutral sans for the small line is enough. More than two faces starts to look like a poster, not a card.
• Use one accent colour. The background can be a gradient, but the type should sit on a predictable value. Mid-tone gradients behind body text are the most common legibility failure.
• Do not rely on transparency. Export a solid background. Some platforms composite transparent PNGs onto black or white.
• Leave the corners empty. A square crop is common in messaging apps. Corner decoration disappears; corner text looks broken.
• Check the file size. A 1200 x 630 PNG with a photographic background can easily pass 1 MB. Export a JPG at 85 percent or a WebP at 80 percent instead.

Method 3: generate it in code

If the image has to change per page, generate it at request time or build time. The advantage is consistency: every article gets a card with its own title, and no one has to open a design tool. The trade-off is that the layout has to be expressed as code, so keep it simple.

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: 72,
          background: "#0a0a0a",
          color: "#fafafa",
          fontFamily: "sans-serif",
        }}
      >
        <div style={{ fontSize: 28, letterSpacing: 2, textTransform: "uppercase" }}>
          example.com
        </div>
        <div style={{ fontSize: 76, lineHeight: 1.05, letterSpacing: -3 }}>
          {post.title}
        </div>
        <div style={{ fontSize: 26, color: "#a3a3a3" }}>{post.category}</div>
      </div>
    ),
    size,
  );
}

Next.js automatically adds the generated image to the page's metadata when the file convention is used. If you need the URL in a custom tag, use generateMetadata and point openGraph.images at it. The Next.js Open Graph guide covers the metadata side and the caching rules.

Upload and declare the image

The image has to live at a public, stable URL. The simplest option is a static file in your site's public directory or on a CDN. The URL should not require a session, a cookie, or a referrer header. If your CDN has hotlink protection, allow the social crawlers or the preview will fail even though the image opens in your browser.

<meta property="og:title" content="How to create an Open Graph image" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/open-graph-image" />
<meta property="og:image" content="https://example.com/og/open-graph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A dark card with the headline: How to create an Open Graph image" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/open-graph-image.png" />

The image URL and the page URL are different. og:url is the page; og:image is the picture. Mixing them up is one of the most common reasons a preview shows a page instead of an image.

Test the preview like a stranger

1. 01Open the image URL in a private window. If it asks for a login, the crawler cannot fetch it.
2. 02Run the page URL through the Facebook Sharing Debugger. Confirm the image, title, and description.
3. 03Run it through the LinkedIn Post Inspector. LinkedIn caches separately from Facebook.
4. 04Paste the URL into an X draft. Look at the card, not just the title.
5. 05Paste it into Slack and Discord. Both show a different container and both cache.
6. 06Open it on a phone. The preview should still read at arm's length.

A note on automation

If you publish often, generate the card as part of the build. A template with a fixed layout and a variable headline is easier to keep consistent than a folder of one-off exports. Keep the type size and the safe area in the template, and let the headline be the only variable. That is the difference between a card system and a pile of images.