Framework implementation
Next.js SEO
App Router metadata, canonical URLs, sitemaps, robots and JSON-LD implemented the Next.js way.
A framework-aware playbook for Next.js sites: static and dynamic metadata, server/client boundaries, sitemap.ts, robots.ts, structured data and rendered-HTML checks.
- Reference files
- 10
- Router modes
- 2
- Metadata API
- Included
- Render modes
- SSG/SSR/ISR
Live scene
Next.js SEO
git clone https://github.com/shihabshahrier/seo-master-skill.gitMITOverview
What Next.js SEO actually does
Next.js already provides the primitives for strong SEO, but they are easy to misuse. This skill checks that metadata is generated on the server, canonicals are absolute, sitemaps include only canonical URLs and JSON-LD matches visible content.
It also covers rendering strategy: what is statically generated, what is dynamic, how client components affect the initial HTML, and how to verify the result without guessing.
Capabilities
What it helps your agent ship
Generate per-route metadata with the App Router Metadata API.
Set absolute canonical URLs and Open Graph images.
Build sitemap.ts and robots.ts from real route data.
Add JSON-LD without client-side hydration gaps.
Audit server/client component boundaries for SEO.
Verify rendered HTML instead of trusting the source tree.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Detect the router and render model
Identify App Router or Pages Router, then check which routes are static, dynamic or incremental.
- 02
Audit metadata
Review titles, descriptions, canonicals, Open Graph, Twitter cards and robots directives per route.
- 03
Check discovery files
Verify sitemap.ts, robots.ts, favicon, manifest and structured data output.
- 04
Inspect the rendered page
Fetch or render the page to confirm that primary content and links exist in the HTML.
- 05
Fix and verify
Apply the smallest server-side change, then re-fetch the route and compare.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
Metadata API
Static and dynamic metadata, templates and canonical URLs.
App Router
Server components, client boundaries, streaming and route groups.
Pages Router
Head tags, getStaticProps, getServerSideProps and legacy patterns.
Sitemap & robots
sitemap.ts, robots.ts and environment-aware base URLs.
JSON-LD
Server-rendered structured data tied to page content.
Rendering
SSG, SSR, ISR and the SEO trade-offs of each choice.
Use cases
Where it earns its place
App Router migration
Move metadata, canonicals, sitemap and JSON-LD without losing search visibility.
Dynamic route audit
Check that thousands of generated pages have unique metadata and valid canonicals.
Client component review
Find content that only appears after hydration and move it to the server where needed.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Audit this Next.js App Router site. Check metadata, canonicals, sitemap.ts, robots.ts, JSON-LD and rendered HTML.
Convert these dynamic pages to generate unique metadata and absolute canonical URLs.
Find SEO-critical content that is hidden behind client components and recommend a server-side fix.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.