SEO by platform
Next.js SEO, step by step: where each setting lives in code
Nine settings in the order to change them, where each one lives in your app's code, and the Next.js docs that says so.
The settings, in order
Work down the list once. Each step names the file, what Next.js does by default and what to set.
0 of 9 done
Export metadata from every layout and page
app/layout.tsx and app/**/page.tsx: export const metadata
Next.js writes the head tags from a metadata object you export. Out of the box it adds only charset and viewport, so every route needs its own title and description; title.template in the root layout adds a site-wide suffix.
Check it free: SERP snippet previewWhat is Title tag?Next.js docs: metadata and OG images
Use generateMetadata on dynamic routes
app/blog/[slug]/page.tsx: export async function generateMetadata
For pages built from data, like posts and products, fetch the title and description inside generateMetadata. Prerendered pages resolve their metadata at build time.
Set metadataBase and a canonical per route
Root layout: metadataBase; each route: alternates.canonical
Set metadataBase once so relative URLs in metadata become absolute, then give each route alternates.canonical. Next.js prints it as a canonical link tag.
Check it free: Canonical checkerNext.js docs: generateMetadata
Generate the sitemap with sitemap.ts
app/sitemap.ts, served at /sitemap.xml
A Next.js app has no sitemap until you add one. sitemap.ts returns your URLs with lastModified, changeFrequency and priority, and Next.js serves the result at /sitemap.xml.
Check it free: Sitemap checkerWhat is XML sitemap?Next.js docs: sitemap.xml
Add robots.ts and point it at the sitemap
app/robots.ts, served at /robots.txt
Add a robots file in the root of the app directory. robots.ts lets you write the rules per user agent and the sitemap URL in code.
Check it free: Robots.txt testerWhat is robots.txt?Next.js docs: robots.txt
Noindex the routes that shouldn't rank
metadata.robots: { index: false, follow: true }
Page-level indexing is the robots key of the metadata object, which Next.js prints as the robots and googlebot meta tags. Use it on staging, search results and thin pages.
Render JSON-LD in a script tag
layout.tsx or page.tsx: <script type="application/ld+json">
Next.js has no structured-data API; its docs recommend rendering JSON-LD in a script tag in the component. Escape the < character in the payload, because JSON.stringify alone doesn't.
Give every next/image an alt
<Image src alt width height />
The Image component's alt prop is read by screen readers and search engines. Write text that could replace the image, and an empty string for purely decorative ones.
Declare permanent redirects in next.config
next.config.js: async redirects() with permanent: true
When a URL changes, add a redirect with permanent set to true. Next.js answers with a 308, which search engines cache as permanent; false gives a temporary 307.
Every step is from Next.js’s own documentation, read 29 Sep 2026.
What SearchBlueprint does for a Next.js site
A planning tool, not an editor: it doesn't change your Next.js settings. It crawls your site and tells you which searches to go after and which page should win each one.
Try each one below, on SearchBlueprint’s own plan for its own site
1Starting from a blank list
Your keyword list, started from your own site.
Most keyword tools hand you thousands of phrases. Your plan starts from your own Next.js site instead: the searches you already show up for, and the ones a site like yours could rank for.
- Your current position for each search you rank for
- Searches a site like yours could rank for, marked not ranking yet
- Monthly searches and cost per click for each keyword
- #71
free website traffic rankings
170 searches a month · $6.33 a click
- #71
web traffic statistics free
110 searches a month · $10.71 a click
- #50
spy seo
30 searches a month · $20.47 a click
- #80
what is my hosting
30 searches a month · $3.45 a click
2Which page gets which search
Give each search its own page.
You've watched two of your own pages chase the same search and neither win. Every keyword you confirm goes to one page. Where two pages compete, you're told which ones, and where nothing fits, the plan suggests a page to create.
- One main keyword per page, across the site
- A warning when two of your pages compete
- Pages to create, where no page answers a search
40 pages mapped · 2 to build
Primary keyword
seo automation
1,900 searches a month · KD 14
Page
- /
3What people ask ChatGPT
Questions to answer for ChatGPT and AI Mode.
People ask ChatGPT full questions, not two-word searches. From the keywords you pick, your plan drafts the questions a buyer might ask and ties each one to a page. You keep the ones that sound like your customers.
- Questions for ChatGPT, Perplexity, Gemini and AI Mode
- Each question tied to a page
- Remove any that don't sound like your customers
5 of 5 kept
4On a paid plan
A title and description for every page.
Confirm your keywords once and every page gets a title and a meta description in one list, ready to paste into each route's metadata export. Your Next.js site only changes when you paste them in.
- A row for every page, not just the homepage
- Based on the keywords you confirmed for each page
- New pages to consider, listed with your current ones
- Keyword
- seo tool for agencies
- Secondary: client seo reporting, seo software for agencies
- Meta title
- SEO Tool for Agencies: Every Client Site | SearchBlueprint
- Meta description
- Run SEO and AI search plans for every client site, with branded reports and share links your clients open without a login.
- Recommended H1
- SEO for every client site, in one workspace
Publishing to Next.js
Writing opens to customers in October.
The package reads the content API with a scoped credential, so there is no CMS to run and no markdown pipeline to write. It scaffolds app/blog into your repo without overwriting files you already have, pages render with ISR so a newly published article shows up within the hour with no redeploy, and each article page carries its title, description and OpenGraph metadata, with /blog/sitemap.xml listing every article for Search Console. Sites that already have a blog system are better served by the GitHub connection committing markdown into the existing content folder.
- 1
Create a content API key
In the project's Publishing tab, open Developer and create a content API key.
- 2
Install and scaffold
Run npm install searchblueprint-nextjs-blog, then npx searchblueprint-nextjs-blog. Put the key in .env.local as SEARCHBLUEPRINT_API_KEY, server-side only, a NEXT_PUBLIC_ prefix would ship it to the browser. Set NEXT_PUBLIC_SITE_URL so canonical and sitemap URLs come out absolute.
- 3
Deploy
Add the key to the deployment's environment, your local .env.local does not travel to Vercel on its own. /blog lists your articles and /blog/<slug> renders each one.
A scaffold, not a takeover
npx searchblueprint-nextjs-blog scaffolds app/blog, or src/app/blog, and never overwrites a file you already have. Your site keeps its own rendering everywhere else.
Docs: Next.js blogFresh within the hour, no redeploy
Pages render with ISR, revalidate 3600, so a newly published article appears within the hour. Lower revalidate in the scaffolded routes if that is too slow for you.
Docs: Next.js blogMetadata and a sitemap included
Each article page carries its title, description and OpenGraph metadata, and /blog/sitemap.xml lists every article for Search Console.
Docs: Next.js blogOr commit markdown instead
For a repo that already renders posts, the GitHub connection commits articles as markdown with front matter into your content folder, and your build does the rest.
Docs: GitHubArticles come off a planned calendar
Plan items on the content calendar and write them two ways: click Write on a card, or let Auto-write pick each one up at midnight on its calendar date. Both run the same researched pipeline, which drafts the article and then revises it against the content score across sweeps.
Docs: Content calendar
What it won’t do on Next.js
Better to know before your first publish.
A Pages Router site is not supported, the scaffold expects app/ or src/app/. Use the GitHub connection for those sites instead.
The package renders content. Publishing cadence and article quality are the calendar's job.
One credential covers one project. A second project means a second install with its own value.
- Docs: Next.js blog
Questions people ask
Where does the package come from?
The public npm registry, as searchblueprint-nextjs-blog. Install it with npm install like any other dependency; there is no tarball to request and no private registry to configure.
The blog list is empty after deploying. Why?
SEARCHBLUEPRINT_API_KEY is missing from the deployment's environment, or it belongs to a different project. Local env files do not travel to the host on their own.
An article page 404s right after publishing. Why?
ISR has not refreshed yet. Wait for the revalidate window, or trigger a redeploy if you cannot wait.
See the plan for your own Next.js site
Your first plan is free and needs no card. It shows your rivals, the searches people type to find sites like yours, and which page should answer each one.
- Free first plan
- No credit card
- Keep your plan