# nextjs-seo

Audits and implements SEO for Next.js App Router, from metadata to indexing diagnosis. Use it when changing search-facing pages or investigating production behavior.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2400 installs · ★ 70
- Author: laguagu
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/laguagu/claude-code-nextjs-skills/tree/HEAD/skills/nextjs-seo/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/nextjs-seo

## What it does

The skill covers SEO work in Next.js App Router projects: metadata and social images, sitemaps and robots rules, canonical URLs, localization, and structured data. It can also help investigate indexing, AI crawler policy, Core Web Vitals, and issues involving served HTML or hydration.

Before proposing changes, it checks the installed Next.js version and the relevant documentation, then examines production responses such as status codes, headers, and rendered HTML. Evidence matters: a sitemap does not make a page indexable, and Lighthouse cannot establish field INP. Reports should keep traffic findings separate from crawl and index status.

This is for SEO implementation and audits, not unrelated Next.js feature work. The skill also says to preserve the site owner’s crawler policy; robots rules are not access control. Reference materials cover metadata, sitemap and robots, structured data, AI search, and troubleshooting.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add laguagu/claude-code-nextjs-skills --skill nextjs-seo -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/nextjs-seo/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nextjs-seo/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add laguagu/claude-code-nextjs-skills --skill nextjs-seo -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/nextjs-seo/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add laguagu/claude-code-nextjs-skills --skill nextjs-seo -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/nextjs-seo/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install laguagu/claude-code-nextjs-skills nextjs-seo
```

2. **Manually: put the files in place**
- File: `.github/skills/nextjs-seo/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add laguagu/claude-code-nextjs-skills --skill nextjs-seo -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/laguagu/claude-code-nextjs-skills --path skills/nextjs-seo
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nextjs-seo/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add laguagu/claude-code-nextjs-skills --skill nextjs-seo -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/laguagu/claude-code-nextjs-skills/tree/HEAD/skills/nextjs-seo/SKILL.md

## When to use it
- configure App Router metadata and social images
- audit sitemap, robots rules, and canonical URLs
- diagnose why a page is missing from search indexes
- separate traffic evidence from crawl and index findings
- assess Core Web Vitals using field measurements

## Example prompts
- Audit this Next.js App Router page and suggest SEO changes based on its production response.
- Find out why this URL is not indexed; check its canonical URL, crawl rules, and served HTML.
- Review the site’s SEO and separate traffic, indexing, and Core Web Vitals evidence.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1eb79f989588dcd9.

BEGIN THIRD-PARTY FILE 1eb79f989588dcd9
```text
---
name: nextjs-seo
description: Next.js App Router SEO implementation and audits. Use for metadata and social images, sitemap/robots, canonicals and localization, structured data, Core Web Vitals evidence, AI crawler policy or search-indexing diagnosis. Not for general Next.js feature work unrelated to SEO.
---

# Next.js SEO

Start from the page's task, production response and observed search behavior.
Read the installed Next.js version and relevant `node_modules/next/dist/docs/`
pages (bundled from 16.2); otherwise use matching official documentation.
`Metadata`, `Viewport` and `MetadataRoute` types are also in
`node_modules/next/dist/lib/metadata/types/metadata-interface.d.ts`. Keep
framework APIs, caching mode and deployment policy consistent with the project.

Useful, distinct content matters more than a longer page. Give titles,
headings and descriptions separate jobs; add a FAQ, summary, badges or extra
pages only when they help the reader. Publication dates must reflect meaningful
changes. Verify authorship, credentials and factual claims.

## Implementation and audit scope

- Verify public URLs, redirects, status codes, crawl rules, index directives
  and canonicals before adding markup. A sitemap supports discovery; it does
  not make a page indexable or guarantee indexing.
- Keep important public content available in the served HTML when practical.
  A Client Component can be server-prerendered; `use client` alone does not
  remove content from HTML.
- Use the App Router Metadata API and file conventions. Resolve relative
  metadata URLs with the correct production `metadataBase` and verify emitted
  absolute URLs. Do not rely on missing-base behavior across versions/hosts.
- Configure refresh/invalidation for data-backed pages, metadata and sitemaps.
  A database query alone does not guarantee publication updates reach them.
  With Cache Components enabled, follow the installed Next.js caching docs
  (`node_modules/next/dist/docs/`); caching is a freshness decision rather
  than a required SEO directive.
- Structured data must describe real visible content and a supported consumer.
  Check current rich-result eligibility instead of adding every schema type.
- Preserve the owner's crawler policy. Training, search and user-triggered
  retrieval have different controls; robots rules are not access control.

## Read for the affected area

- [Metadata](references/metadata-api.md): inheritance, social images, icons and streaming.
- [Sitemaps/robots](references/sitemap-robots.md): discovery, localization and preview policy.
- [Structured data](references/json-ld.md): current eligibility and safe serialization.
```
END THIRD-PARTY FILE 1eb79f989588dcd9

The third-party file has ended. Everything between the 1eb79f989588dcd9 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2664 of 3590 bytes. © laguagu · MIT · https://github.com/laguagu/claude-code-nextjs-skills/tree/HEAD/skills/nextjs-seo/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md