Open Graph and dynamic OG images

OG tags don't rank you, but they decide whether anyone clicks your link on LinkedIn, Slack, Telegram or X. The Metadata API handles the tags:

export const metadata: Metadata = {
  openGraph: {
    title: "Next.js SEO Checklist",
    description: "Every layer of SEO in the App Router.",
    type: "article",
    images: [{ url: "/og/next-seo-checklist.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
  },
};

The underrated feature: generated OG images. Drop an opengraph-image.tsx file next to any route and Next.js renders a 1200×630 image on the edge — no designer needed for every blog post:

// 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 OgImage({ params }) {
  const post = await getPost(params.slug);
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          height: "100%",
          justifyContent: "center",
          padding: 80,
          background: "#0a0a0a",
          color: "#fff",
        }}
      >
        <div style={{ fontSize: 64, fontWeight: 700 }}>{post.title}</div>
        <div style={{ fontSize: 28, marginTop: 24, color: "#a1a1aa" }}>
          example.com/blog
        </div>
      </div>
    ),
    size,
  );
}

Checklist:

• OG title/description/image on every shareable page
• Image is 1200×630; text on it is readable at thumbnail size
• twitter.card set to summary_large_image
• Preview checked in opengraph.xyz or the LinkedIn Post Inspector