nextjs-seolisted
Install: claude install-skill keupera/seo-skills
# Next.js SEO
Next.js gives you everything needed for good SEO and defaults to almost none of it. The gaps are consistent across projects, so this is mostly a checklist of things to add rather than problems to debug.
Assume App Router unless the code says otherwise. Pages Router equivalents are noted at the end.
## The root layout
Set the metadata base and the defaults once. `metadataBase` is the one people miss, and without it every Open Graph and canonical URL is emitted relative, which breaks previews everywhere.
```tsx
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'Example — short promise',
template: '%s | Example',
},
description: 'One sentence a human would read. 140-160 characters.',
alternates: { canonical: '/' },
openGraph: {
type: 'website',
siteName: 'Example',
locale: 'en_US',
url: '/',
},
twitter: { card: 'summary_large_image' },
robots: {
index: true,
follow: true,
googleBot: { index: true, follow: true, 'max-image-preview': 'large', 'max-snippet': -1 },
},
}
```
`max-image-preview: large` and `max-snippet: -1` are worth setting explicitly. Without them some surfaces show a truncated snippet and a thumbnail instead of a full-size image.
## Per-page metadata
Static pages export a `metadata` object. Dynamic pages use `generateMetadata`, which runs on the server and is deduped against the page'