Skip to content

Social & sharing · Next.js (App Router)

How to add an og:image in Next.js (App Router)

A link with no image is a line of grey text in a feed full of cards. It is the difference between a post someone stops on and one they scroll past, and it applies to every share of your launch.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Generate it at build time so it never goes stale. Add app/opengraph-image.tsx:

tsx code
import { ImageResponse } from "next/og";

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

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: 80,
          background: "#0b0b12",
          color: "#fff",
          fontSize: 64,
        }}
      >
        <div style={{ display: "flex" }}>example.com</div>
        <div style={{ display: "flex", fontSize: 30, color: "#9a9ab4", marginTop: 24 }}>
          What you do, in one line.
        </div>
      </div>
    ),
    size
  );
}

Next wires up og:image automatically, including the width and height tags. Two constraints: every element needs an explicit display, and only inline styles work — there is no stylesheet.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.