Agent Skills: Next.js Metadata

Next.js Metadata

Expert guidance for implementing effective metadata in Next.js.

Quick Reference

| Concern | Solution | Example | |---------|----------|---------| | Page title | metadata object | export const metadata = { title: '...' } | | Dynamic metadata | generateMetadata function | export async function generateMetadata({ params }) | | OpenGraph images | metadata.images | openGraph: { images: ['/og.jpg'] } | | Structured data | Script component | <Script type="application/ld+json"> | | Canonical URLs | metadata.alternates | canonical: 'https://...' | | Twitter cards | metadata.twitter | twitter: { card: 'summary_large_image' } |

What Do You Need?

1. Static metadata - metadata object for fixed values
2. Dynamic metadata - generateMetadata for dynamic values
3. OpenGraph - Social sharing images and descriptions
4. Structured data - JSON-LD for rich results
5. Canonical URLs - Preventing duplicate content

Specify a number or describe your metadata scenario.

Routing

| Response | Reference to Read | |----------|-------------------| | 1, "static", "metadata", "object" | static-metadata.md | | 2, "dynamic", "generatemetadata", "params" | dynamic-metadata.md | | 3, "opengraph", "social", "sharing" | opengraph.md | | 4, "structured", "json-ld", "schema" | structured-data.md | | 5, "canonical", "seo", "duplicate" | seo.md |

Essential Principles

Every page needs metadata: Title, description, OpenGraph image minimum.

Static for static pages: Use metadata object when values don't change.

Dynamic for dynamic routes: Use generateMetadata when data comes from params or fetch.

OpenGraph for sharing: Ensure pages look good when shared on social media.

Structured data for rich results: Use JSON-LD for articles, products, organizations.

Code Patterns

Static Metadata

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

export const metadata: Metadata = {
  title: 'My App',
  description: 'Description for search engines',
  openGraph: {
    title: 'My App',
    description: 'Description for social sharing',
    images: ['/og-image.jpg'],
  },
}

export default function Page() {
  return <div>...</div>
}

Dynamic Metadata

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

export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.ogImage],
    },
  }
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  // ...
}

Structured Data

import Script from 'next/script'

export default function ArticlePage({ post }: { post: Post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    datePublished: post.publishedAt,
    author: { '@type': 'Person', name: post.author.name },
  }

  return (
    <>
      <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <article>{post.content}</article>
    </>
  )
}

Metadata Checklist

| Element | Required | Format | |---------|----------|--------| | title | Yes | string or Metadata.title | | description | Yes | string (~160 chars) | | openGraph:title | Yes | string | | openGraph:description | Yes | string | | openGraph:image | Yes | string or array (1200x630px min) | | twitter:card | Recommended | 'summary_large_image' | | canonical | Recommended | string | | alternates:languages | Optional | Record<locale, string> |

Common Issues

| Issue | Severity | Fix | |-------|----------|-----| | Missing page title | High | Add metadata.title | | No OpenGraph image | Medium | Add openGraph.images | | No description | Medium | Add metadata.description | | Dynamic not using generateMetadata | High | Change to async function | | Duplicate content (no canonical) | Medium | Add metadata.canonical | | Small OG image (< 1200x630) | Low | Use larger image |

Reference Index

| File | Topics | |------|--------| | static-metadata.md | metadata object, all options | | dynamic-metadata.md | generateMetadata, params, fetch | | opengraph.md | OG tags, Twitter cards, images | | structured-data.md | JSON-LD, Script component, schemas | | seo.md | Canonical, hreflang, robots, sitemap |

Success Criteria

Metadata is complete when:

• Every page has title and description
• OpenGraph tags present (title, description, image)
• OG image is 1200x630px minimum
• Dynamic routes use generateMetadata
• Canonical URLs set for duplicate content
• Structured data for content types (articles, products)