# Next SEO - Pages Router Support
This directory contains SEO generation functions for Next.js Pages Router applications.
> **Note:** These functions are specifically for Pages Router. For App Router applications, use the main next-seo package exports instead.
## Installation
```bash
npm install next-seo
# or
yarn add next-seo
# or
pnpm add next-seo
```
## Usage
Import from `next-seo/pages` instead of `next-seo`:
```tsx
import { generateNextSeo, generateDefaultSeo } from "next-seo/pages";
```
> **Important:** In Pages Router, you need to wrap the generated SEO tags with Next.js's `` component to ensure the meta tags are properly rendered in the document head.
### generateNextSeo Function
Add SEO meta tags to individual pages:
```tsx
// pages/about.tsx
import Head from "next/head";
import { generateNextSeo } from "next-seo/pages";
export default function AboutPage() {
return (
<>
{generateNextSeo({
title: "About Us",
description: "Learn more about our company",
canonical: "https://example.com/about",
openGraph: {
url: "https://example.com/about",
title: "About Us",
description: "Learn more about our company",
images: [
{
url: "https://example.com/og-image.jpg",
width: 800,
height: 600,
alt: "About Us",
},
],
},
})}
About Us
{/* Page content */}
);
}
```
### generateDefaultSeo Function
Set global SEO defaults in your `_app.tsx`:
```tsx
// pages/_app.tsx
import type { AppProps } from "next/app";
import Head from "next/head";
import { generateDefaultSeo } from "next-seo/pages";
const DEFAULT_SEO = {
titleTemplate: "MySite | %s",
defaultTitle: "MySite",
description: "Welcome to MySite",
openGraph: {
type: "website",
locale: "en_US",
url: "https://example.com/",
siteName: "MySite",
},
twitter: {
handle: "@mysite",
site: "@mysite",
cardType: "summary_large_image",
},
};
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{generateDefaultSeo(DEFAULT_SEO)}
);
}
```
## Available Props
### Common Props
- `title` - Page title
- `titleTemplate` - Title template for all pages (use `%s` for title placeholder)
- `defaultTitle` - Default title when no title is set
- `description` - Page description
- `canonical` - Canonical URL
- `themeColor` - Theme color meta tag
- `noindex` - Set to `true` to noindex the page
- `nofollow` - Set to `true` to nofollow the page
- `robotsProps` - Additional robots meta properties
### OpenGraph Props
```tsx
openGraph={{
type: 'website',
url: 'https://example.com',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [{
url: 'https://example.com/og.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
}],
siteName: 'SiteName',
locale: 'en_US',
}}
```
### Twitter Props
```tsx
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
```
### Additional Meta Tags
```tsx
additionalMetaTags={[
{
property: 'dc:creator',
content: 'Jane Doe'
},
{
name: 'application-name',
content: 'NextSeo'
}
]}
```
### Additional Link Tags
```tsx
additionalLinkTags={[
{
rel: 'icon',
href: 'https://example.com/favicon.ico',
},
{
rel: 'apple-touch-icon',
href: 'https://example.com/apple-touch-icon.png',
sizes: '76x76'
}
]}
```
## Migration from Legacy Import
If you're using the old import path or component-based approach, update your code:
```tsx
// Old (deprecated components)
import { NextSeo, DefaultSeo } from "next-seo";
// Usage:
// New (Pages Router functions)
import { generateNextSeo, generateDefaultSeo } from "next-seo/pages";
// Usage: {generateNextSeo({ title: "..." })}
```
## TypeScript Support
All types are exported from `next-seo/pages`:
```tsx
import type { NextSeoProps, DefaultSeoProps } from "next-seo/pages";
```
## More Information
For complete documentation and advanced usage, please refer to the main [next-seo documentation](https://github.com/garmeeh/next-seo).