How to add Open Graph images in Next.js

1. Create and host your image

Design a card in OGFrame, export it as a PNG, and place it in your Next.js public folder as og.png. That makes the asset available at /og.png. You can instead use the published HTTPS image URL from a saved OGFrame design. Free hosted dynamic images include a watermark.

The image and the page both need to be reachable by sharing services. Preview deployments with access protection are useful for development, but they are unsuitable as the final image URL on a public website.

2. Add metadata to your server page

This example belongs in app/page.tsx. Replace example.com, the copy, and the image description with your own values. Keep the metadata export in a Server Component; if your page needs client-side interactions, put those in a child Client Component.

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: "Acme — project planning for small teams",
  description: "Plan projects and keep your team in sync.",
  alternates: { canonical: "/" },
  openGraph: {
    type: "website",
    url: "/",
    siteName: "Acme",
    title: "Acme — project planning for small teams",
    description: "Plan projects and keep your team in sync.",
    images: [{
      url: "/og.png", // Or your published OGFrame image URL
      width: 1200,
      height: 630,
      alt: "Acme — project planning for small teams",
    }],
  },
  twitter: {
    card: "summary_large_image",
    title: "Acme — project planning for small teams",
    description: "Plan projects and keep your team in sync.",
    images: ["/og.png"],
  },
};

export default function HomePage() {
  return <main><h1>Acme</h1></main>;
}

3. Give each page its own preview

Set a separate canonical URL, title, description, and image for each page that needs a distinct preview. Put metadataBase in your root layout when sharing that origin across routes. For content fetched by slug, use generateMetadata to build page-specific fields from the same content as the page.

Next.js replaces nested metadata objects such as openGraph when a child segment supplies them. Include the image in the child's openGraph object or explicitly reuse shared fields. Also check for opengraph-image or twitter-image files: file-based metadata takes priority and can explain why an old image still appears.

4. Verify the deployed URL

After deployment, inspect the public page with OGFrame's OG Image Checker. Confirm that the image URL uses your public domain, resolves to an image, and has the expected dimensions. Check the page-specific title as well as the image; a generic homepage title on every article can make previews confusing.

If a platform still shows the previous design, follow the preview troubleshooting guide. A correct local preview does not prove that an external crawler can reach the deployed asset, and platform caches can outlive your deployment.