Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

App Router: app/layout.tsx is the root layout. All pages inherit its metadata.

Pages Router: pages/_app.tsx wraps every page.

Add Open Graph meta tags

Use generateMetadata in your root layout to set default Open Graph tags site-wide. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms.

// app/layout.tsx
import type { Metadata } from 'next'
import { headers } from 'next/headers'

export async function generateMetadata(): Promise<Metadata> {
  const headersList = await headers()
  const pathname = headersList.get('x-invoke-path') || '/'

  return {
    openGraph: {
      title: 'My Site',
      description: 'Welcome to my site',
      url: `https://mysite.com${pathname}`,
      siteName: 'My Site',
      type: 'website',
      images: [`https://$OGPLUS_KEY.ogplus.net${pathname}`],
    },
    twitter: {
      card: 'summary_large_image',
    },
  }
}

Replace https://$OGPLUS_KEY.ogplus.net with your connection URL, and "My Site" with your actual site name.

What each tag does

Tag	Purpose
`og:title`	The title shown in the link preview
`og:description`	The description shown below the title
`og:url`	The canonical URL of the page
`og:site_name`	Your website’s name
`og:type`	Content type (`website`, `article`, `product`)
`og:image`	The social card image (powered by OpenGraph+)
`twitter:card`	Tells Twitter to show a large image card

Dynamic tags for pages

Page-level generateMetadata overrides the layout defaults. Use this to set tags from your data.

Blog posts

// app/posts/[slug]/page.tsx
import { getPost } from '@/lib/posts'

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)

  return {
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      images: [`https://$OGPLUS_KEY.ogplus.net/posts/${params.slug}`],
    },
    twitter: {
      card: 'summary_large_image',
    },
  }
}

Products

// app/products/[id]/page.tsx
import { getProduct } from '@/lib/products'

export async function generateMetadata({ params }) {
  const product = await getProduct(params.id)

  return {
    openGraph: {
      title: product.name,
      description: `${product.price} — ${product.description}`,
      type: 'product',
      images: [`https://$OGPLUS_KEY.ogplus.net/products/${params.id}`],
    },
    twitter: {
      card: 'summary_large_image',
    },
  }
}

Static metadata for simple pages

For pages with known paths, use the static metadata export:

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  openGraph: {
    title: 'About Us',
    description: 'Learn more about our company',
    images: ['https://$OGPLUS_KEY.ogplus.net/about'],
  },
  twitter: {
    card: 'summary_large_image',
  },
}

Pages Router (legacy)

If you’re using the Pages Router, add meta tags via next/head:

// pages/_app.tsx
import Head from 'next/head'
import { useRouter } from 'next/router'

export default function App({ Component, pageProps }) {
  const router = useRouter()

  return (
    <>
      <Head>
        <meta property="og:title" content="My Site" />
        <meta property="og:description" content="Welcome to my site" />
        <meta property="og:url" content={`https://mysite.com${router.asPath}`} />
        <meta property="og:site_name" content="My Site" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content={`https://$OGPLUS_KEY.ogplus.net${router.asPath}`} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Override tags in individual pages by adding another <Head> block with page-specific values.

Verify

Start your development server and view the page source. Check that all og: meta tags are present with the correct values.

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image.