# Chapter 1

## Getting Started

### Add Open Graph meta tags to your Next.js app

## Create a connection

1. Sign in to [OpenGraph+](/content/site-root.html)
2. Go to your website’s **Meta Tags** page
3. 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.

```javascript
// 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

```javascript
// 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

```javascript
// 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:

```javascript
// 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`:

```javascript
// 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.