Next.js SEO Checklist: 25 Essential Steps

Pages that need to be indexed must return complete HTML from the server. Use Server Components (default in App Router) or `generateStaticParams` for dynamic routes. Client-only rendered content is invisible to most crawlers.

Export a default function from `app/sitemap.ts` that returns all indexable URLs with lastModified dates, changeFrequency, and priority. For sites with 50,000+ URLs, use `generateSitemaps()` to create a sitemap index.

Create `app/robots.ts` that returns rules for different user agents. Allow Googlebot access to all public pages, disallow /api and /admin routes, and include your sitemap URL. Test with Google's robots.txt tester.

Use `alternates.canonical` in your metadata config. Without canonicals, search engines may index duplicate versions of your pages (www vs non-www, trailing slash vs no trailing slash, query parameters).

Use `redirects()` in next.config.js or middleware for 301 permanent redirects. Every old URL that still gets traffic or has backlinks should redirect to the most relevant current page. Never let indexed pages return 404.

Use the Metadata API to define a unique `title` (50-60 chars) and `description` (120-155 chars) per page. Duplicate titles across pages confuse search engines about which page to rank for a given query.

For dynamic routes like `/blog/[slug]`, export an async `generateMetadata` function that fetches the content and returns page-specific titles and descriptions. Static metadata on dynamic pages wastes ranking potential.

Set `openGraph.title`, `openGraph.description`, `openGraph.images`, and `openGraph.type` in your metadata. Test sharing on Facebook, Twitter, and LinkedIn. Use 1200x630px images for optimal display across platforms.

Use the `ImageResponse` API from `next/og` to create branded Open Graph images dynamically for each page. This ensures every shared link has a relevant, eye-catching preview image without manually creating hundreds of images.

Use `title.template` in your root layout metadata (e.g., `'%s | Your Brand'`) so every page title automatically includes your brand name. Set `title.default` as a fallback for pages without explicit titles.

Include a JSON-LD script with `@type: Organization`, your company name, logo URL, social media profiles, and contact information. This establishes your brand entity in Google's Knowledge Graph.

Include WebSite schema with a `potentialAction` of type `SearchAction` if your site has search functionality. This can earn a search box directly in Google results for your brand.

Add Article schema for blog posts, Product schema for product pages, FAQ schema for FAQ sections, and BreadcrumbList for navigation paths. Each schema type unlocks different rich result formats in search.

Test every schema type at search.google.com/test/rich-results. Fix all errors and warnings. Invalid structured data is ignored by search engines, wasting your implementation effort.

Create a BreadcrumbList JSON-LD that mirrors your URL structure (Home > Category > Page). Breadcrumbs in search results improve click-through rates by showing users where the page fits in your site hierarchy.

Each page should have a single `<h1>` containing the primary keyword. Multiple H1s dilute heading hierarchy. Use H2-H6 for subheadings in proper nesting order. Never skip heading levels.

Every `next/image` component needs an `alt` prop that describes the image content for screen readers and search engines. Include relevant keywords naturally, but never keyword-stuff. Decorative images should use `alt=''`.

Use Next.js `Link` component to connect related pages. Internal links distribute page authority and help crawlers discover content. Each page should link to and be linked from at least 2-3 other pages.

Structure pages with `<main>`, `<article>`, `<section>`, `<nav>`, `<header>`, and `<footer>` elements. Semantic HTML helps search engines understand content structure and importance, improving content classification.

Use descriptive, hyphenated slugs like `/blog/nextjs-seo-guide` instead of `/blog/12345` or `/blog/post?id=12345`. Short, keyword-rich URLs perform better in search rankings and are easier for users to share.

Target LCP under 2.5s, INP under 200ms, and CLS under 0.1. Use PageSpeed Insights to test both mobile and desktop. Google uses these metrics as ranking signals, and poor scores can push you below competitors.

Identify your LCP element (usually a hero image or heading) with Chrome DevTools. If it is an image, add `priority` prop to `next/image`. If it is text, ensure fonts load with `next/font` to eliminate font swap delays.

Set explicit `width` and `height` on all images and videos. Use CSS `aspect-ratio` for responsive containers. Reserve space for dynamically loaded content like ads or embeds. Even small CLS adds up across page elements.

Load analytics, chat widgets, and tracking scripts with `next/script` using `strategy='lazyOnload'` or `strategy='afterInteractive'`. Third-party scripts are the most common cause of poor INP and LCP scores.

Check that static pages return proper `Cache-Control` headers. Vercel handles this automatically, but self-hosted deployments need explicit configuration. Use `stale-while-revalidate` for ISR pages to serve cached content while regenerating.