Meta Tags

Meta Tags & Social Sharing

Next.js App Router provides a first-class Metadata API that replaces third-party packages like next-seo. Export a metadata object or generateMetadata function from any layout.tsx or page.tsx.

Static Metadata

Use for pages with fixed content (home, about, contact):

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

export const metadata: Metadata = {
  title: 'About Us',        // Becomes "About Us | Site Name" via template
  description: 'Learn about our team and mission. We build tools for developers.',
  openGraph: {
    title: 'About Us',
    description: 'Learn about our team and mission.',
    url: '/about',
    type: 'website',
    images: [{ url: '/og/about.png', width: 1200, height: 630, alt: 'About Us' }],
  },
  twitter: {
    card: 'summary_large_image',
  },
  alternates: {
    canonical: '/about',
  },
}

Dynamic Metadata (generateMetadata)

Use for pages with dynamic content (blog posts, products, profiles):

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

interface Props {
  params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  if (!post) return {}

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `/blog/${slug}`,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author.name],
      images: [{ url: post.image, width: 1200, height: 630, alt: post.title }],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.image],
    },
    alternates: {
      canonical: `/blog/${slug}`,
    },
  }
}

The fetch inside generateMetadata is automatically memoized with the page component — no duplicate requests.

Title Template

Set in the root layout. Child pages only provide the page-specific part:

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',    // "About | Acme", "Blog | Acme"
    default: 'Acme',          // Used when child doesn't set title
  },
}

// app/about/page.tsx
export const metadata: Metadata = {
  title: 'About',  // Renders as "About | Acme"
}

Nested layouts can override the template for their section:

// app/blog/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Blog',
    default: 'Acme Blog',
  },
}

Open Graph Tags

Required Properties

Image Specifications

Use 1200 x 630 for universal compatibility. Keep file size under 300KB (max 8MB). URL must be absolute HTTPS.

Twitter Cards

twitter: {
  card: 'summary_large_image',   // Large image preview
  // card: 'summary',            // Small square thumbnail
  title: 'Page Title',
  description: 'Page description',
  images: ['https://example.com/og.png'],
  creator: '@username',           // Optional: tweet author
  site: '@sitename',              // Optional: site account
}

If twitter fields are omitted, Next.js falls back to openGraph values automatically.

Dynamic OG Image Generation

Generate OG images on-the-fly with opengraph-image.tsx. No external service needed:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const alt = 'Blog post preview'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          background: '#0a0a0a',
          color: '#ffffff',
          padding: 60,
        }}
      >
        <div style={{ fontSize: 56, fontWeight: 700 }}>{post.title}</div>
        <div style={{ fontSize: 28, color: '#888', marginTop: 20 }}>
          {post.excerpt}
        </div>
      </div>
    ),
    { ...size }
  )
}

The image is auto-linked in the page's <head> — no manual openGraph.images needed when using file-based convention.

Custom Fonts in OG Images

import { readFile } from 'node:fs/promises'
import { join } from 'node:path'

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const font = await readFile(join(process.cwd(), 'assets/Inter-Bold.ttf'))

  return new ImageResponse(
    (<div style={{ fontSize: 48, fontFamily: 'Inter' }}>Title</div>),
    {
      ...size,
      fonts: [{ name: 'Inter', data: font, style: 'normal', weight: 700 }],
    }
  )
}

Twitter Image Convention

Similarly, create twitter-image.tsx for a Twitter-specific card image:

// app/twitter-image.tsx
import { ImageResponse } from 'next/og'

export const alt = 'Site Name'
export const size = { width: 1200, height: 675 }
export const contentType = 'image/png'

export default function Image() {
  return new ImageResponse(
    (<div style={{ /* ... */ }}>Site Name</div>),
    { ...size }
  )
}

Canonical URLs

Set canonical on every page to prevent duplicate content:

alternates: {
  canonical: '/blog/my-post',       // Relative to metadataBase
  // canonical: 'https://example.com/blog/my-post',  // Or absolute
}

For paginated content:

alternates: {
  canonical: '/blog',
  // No rel=prev/next needed — Google ignores them since 2019
}

Validation Checklist

After implementing metadata, verify:

1. View source — check <title>, <meta name="description">, OG tags in HTML
2. Facebook Sharing Debugger — test OG preview (developers.facebook.com/tools/debug/)
3. Twitter Card Validator — test card preview (cards-dev.twitter.com/validator)
4. LinkedIn Post Inspector — test LinkedIn preview
5. Google Rich Results Test — check structured data (separate from meta tags)

Common Mistakes