Open Graph tags checker · updated 10 November 2026

How to add Open Graph tags in Next.js

In the Next.js App Router, set openGraph in the metadata object, or add an opengraph-image file next to the page.

Steps

1. Add an openGraph object to the page's metadata with a title, description and images.
2. Or place an opengraph-image file in the route folder and Next.js builds the image tag for you.
3. Use an absolute https image URL, or set metadataBase so relative paths resolve.

app/page.tsx

export const metadata = {
  openGraph: {
    title: "Your page title",
    description: "One sentence about the page.",
    url: "/",
    images: ["/share.png"],
  },
};

How to check it worked

View source for og:title, og:description and og:image, then paste the link into the app where you share it.

Good to know

Set metadataBase in your root layout, or relative image paths may not resolve to your domain.

Check your site now

Free, no signup. Every finding comes with the fix. The tag in your Next.js site is checked along with the rest of the page.

Related guides

• Open Graph tags checker
• Open Graph tags in WordPress
• Open Graph tags in Shopify
• Open Graph tags in Webflow
• canonical tag in Next.js
• meta description in Next.js

Written by Marlo's maker. Platform menus change, so if a step does not match what you see, check the platform's own help. 4 platforms covered.