Skip to main content
Next.js SEO in 2025 — A Practical Checklist for the App Router

Next.js SEO in 2025 — A Practical Checklist for the App Router

Pragmatic Next.js SEO checklist for 2025: LCP and Core Web Vitals, SSR/ISR vs static, the metadata API, sitemap.ts and robots.ts, structured data, image optimisation and the most common pitfalls we still see in audits.

SocialFly Networks

Next.js shipped enough SEO-relevant features in 2024–2025 that most "Next.js SEO" guides on the internet are now wrong by default. This is the Next.js SEO checklist we actually run before shipping a marketing site, SaaS landing page, or content portal — focused on the App Router, the modern metadata API, and the things that move rankings rather than the things that look good in screenshots.

1. Render the page on the server

Search engines crawl HTML. Anything that depends on client-side JavaScript to appear is a coin flip. In the App Router, the default is server components — keep it that way for any route Google needs to index. Reach for "use client" only when you genuinely need browser APIs or interactive state.

Use SSR or ISR (incremental static regeneration) for content that changes; use static rendering for everything that doesn't. The combination of generateStaticParams + revalidation gives you near-static performance with fresh content.

2. Win Core Web Vitals — especially LCP

Google still uses Core Web Vitals as a ranking signal. The biggest lever is LCP (Largest Contentful Paint). The Next.js patterns that move LCP:

  • Mark the hero image priority on next/image and pre-size it.
  • Preconnect to font and image origins from the layout.
  • Use display: swap with next/font and avoid layout shift on first paint.
  • Defer below-the-fold sections via next/dynamic — but never the LCP element.
  • Move heavy third-party scripts behind strategy="afterInteractive" or "lazyOnload".

3. Use the metadata API correctly

Every route should export metadata (or generateMetadata) with at minimum a unique title, description, canonical URL, and OG image. The page title should not be a copy of the layout title — let the layout's title.template wrap a route-specific default.

Common mistakes we see:

  • Same title and description on every page.
  • Canonical URLs pointing at the wrong route (e.g. /resources/blog/... when the actual route is /blog/...).
  • OG images that 404 or aren't the right aspect ratio (1200×630).
  • Missing openGraph.url, which Facebook requires.

4. Ship sitemap.ts and robots.ts

Next.js makes both trivial. Add app/sitemap.ts that emits a typed MetadataRoute.Sitemap from your real route data — including dynamic routes — and app/robots.ts that points at it. Submit the sitemap in Search Console once and forget about it.

5. Emit structured data

JSON-LD remains the highest-leverage SEO move on most content sites. The schemas worth shipping:

  • Organization + WebSite in your root layout.
  • Article on every blog post, with author, dates, and image.
  • FAQPage wherever you have an FAQ section.
  • BreadcrumbList on deep pages.
  • Product, LocalBusiness, or ProfessionalService when relevant.

Render JSON-LD via a <script type="application/ld+json"> tag using dangerouslySetInnerHTML. Don't try to be clever about it.

6. Treat images like a first-class SEO asset

next/image handles most of the heavy lifting — modern formats, responsive sizes, lazy loading. What teams still get wrong:

  • Empty alt on content images (it should describe the image, not the keyword stuffing).
  • Wrong sizes attribute, causing the browser to fetch images way larger than the rendered slot.
  • Heavy hero images served without priority — kills LCP.

7. Internal linking, not just navigation

Search engines follow links in the body. Marketing sites that only link via the header and footer leak ranking power. Inside articles and service pages, link to related content with descriptive anchor text — and link back to the parent service or pillar page.

8. Watch for these App Router pitfalls

  • Two URLs serving the same content. If both /blog/foo and /resources/blog/foo resolve to the same article, you're splitting authority. Pick one canonical and 308 the other.
  • Dynamic routes that aren't pre-rendered. Add generateStaticParams or accept that they'll be SSR-rendered on every crawl.
  • Trailing-slash mismatches between sitemap, canonical, and what Vercel actually serves.
  • noindex by accident — a robots: { index: false } in a layout silently de-indexes every child page.

9. Measure, don't guess

Set up Search Console, run Lighthouse on real device emulation, and watch CrUX field data — not lab numbers. Vercel Analytics + the Web Vitals API give you per-route real-user metrics that are more honest than synthetic tests.

The 10-minute Next.js SEO audit

If you only have ten minutes, run this sequence on any Next.js site:

  1. View source on a representative page — confirm <title>, meta description and JSON-LD are present without JS.
  2. Check that canonical URL matches the served URL exactly.
  3. Confirm /sitemap.xml exists and includes the page you're checking.
  4. Run Lighthouse on mobile — LCP under 2.5s, CLS under 0.1.
  5. Spot-check three internal links — they should be <a> or <Link> in HTML, not onClick handlers.

If you'd like a deeper audit on a specific Next.js site, our web development team runs technical SEO reviews on top of every project — drop us a line.

Frequently Asked Questions

Is Next.js good for SEO in 2025?

Yes — Next.js is one of the strongest frameworks for SEO in 2025. With server components by default, the App Router metadata API, built-in sitemap and robots support, next/image and next/font optimisation, and first-class ISR, you can hit Core Web Vitals targets and ship structured data with very little custom work.

Should I use SSR or static rendering for SEO?

Use static (or ISR) for any page where the content doesn't change per request — marketing pages, blog posts, docs. Use SSR for personalised or frequently-changing content. Both are fully indexable. The deciding factor is freshness and infra cost, not SEO.

How do I add a sitemap and robots.txt to Next.js?

Create app/sitemap.ts that returns a MetadataRoute.Sitemap including all static and dynamic routes, and app/robots.ts that returns a MetadataRoute.Robots pointing to your sitemap URL. Next.js will serve them at /sitemap.xml and /robots.txt automatically.

What's the biggest Next.js SEO mistake teams make?

Two routes serving the same content. App Router makes it easy to accidentally publish the same article at two URLs (e.g. /blog/foo and /resources/blog/foo). Pick one canonical, redirect the other with a 308, and make sure your canonical, sitemap and internal links all agree.