Open Graph Tags in Next.js

Quick answer: which Open Graph tags matter in Next.js?

For most App Router pages, review `openGraph.title`, `openGraph.description`, `openGraph.url`, `openGraph.images`, `openGraph.type`, and matching Twitter card fields. The Next.js Metadata API renders those fields into the final document head.

Open Graph metadata example

Use Open Graph metadata when links need a useful preview in Slack, LinkedIn, Discord, X, and other sharing surfaces.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Pricing",
  description: "Compare plans for a developer tool workspace.",
  openGraph: {
    title: "Pricing",
    description: "Compare plans for a developer tool workspace.",
    url: "/pricing",
    siteName: "Example",
    images: [
      {
        url: "/og/pricing.png",
        width: 1200,
        height: 630,
        alt: "Pricing page preview",
      },
    ],
    type: "website",
  },
};

Twitter card example

Twitter card fields should usually mirror the Open Graph title, description, and image so previews stay consistent across networks.

export const metadata = {
  twitter: {
    card: "summary_large_image",
    title: "Pricing",
    description: "Compare plans for a developer tool workspace.",
    images: ["/og/pricing.png"],
  },
};

Canonical and Open Graph URL alignment

Open Graph URL and canonical URL should usually point to the same public page. If they drift accidentally, crawlers and social platforms can show inconsistent page identity.

• Set `alternates.canonical` for the canonical URL.
• Set `openGraph.url` to the same public page for normal content pages.
• Use campaign URLs only when the preview should intentionally represent a campaign page.

Image checklist

Social preview images should be inspectable, page-specific when useful, and large enough for preview surfaces. Avoid generic images when the page topic is specific.

• Use 1200 by 630 as a reliable default image size.
• Add useful alt text for preview images.
• Use `metadataBase` or absolute URLs so image paths resolve correctly.
• Verify the image is not blocked by robots, auth, or missing deployment assets.

Common mistakes

Most Open Graph issues come from missing absolute image URLs, duplicated titles, stale images, or dynamic pages that generate the same preview for every route.

• Do not reuse a homepage title on every dynamic route.
• Do not let canonical and Open Graph URLs point at different canonical pages by accident.
• Do not ship placeholder social images on product, guide, or comparison pages.

Generator workflow

Use the Next Metadata generator to create a consistent starter, paste it into the App Router route, then hand-edit the copy and image fields for the page's actual search and social intent.

Use FrameworkKit to generate the starter code, then review the output before shipping it in production.

Next Metadata resources

FAQ

Related comparisons

Related tools