Next.js SEO
Next.js SEO is the practice of configuring a Next.js site so search engines can crawl, render, index, and understand its pages efficiently.
Key takeaways
- Next.js can deliver fully rendered HTML to search engines, improving indexability over client-side-only frameworks.
- Use the Metadata API for per-page SEO control (title, description, canonical).
- Always generate a sitemap and configure robots.txt to guide crawlers.
- Avoid blocking important pages or relying on client-side rendering for critical content.
- Implement structured data and hreflang for richer search results and international targeting.
Next.js offers server-side rendering and static generation, which can give SEO advantages when combined with solid Technical SEO practices.
Example: Adding metadata to a product page
Consider a Next.js e-commerce site with a product page at /product/123. Using the Metadata API, you can set the page title, description, and canonical URL:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Blue Running Shoes | MyStore',
description: 'Lightweight blue running shoes with breathable mesh. Free shipping.',
canonical: 'https://example.com/product/123',
};This ensures search engines see a unique title and description for each product, reducing duplicate content issues. Additionally, you can generate a sitemap that includes all product URLs and submit it via Search Console.
Quick-start: Basic SEO setup in Next.js
- Install Next.js – Create a new project using
npx create-next-app@latest. - Add metadata – Use the
Metadataexport in each page or layout to set title, description, and canonical. - Generate a sitemap – Use the built-in
sitemap.tsfile or thenext-sitemappackage to create an XML sitemap. - Configure robots.txt – Place a
robots.txtfile in thepublicfolder to allow or disallow crawler access. - Add structured data – Embed JSON-LD in your pages using a
<script>tag or a component. Consider using Schema markup for better rich results. - Set up hreflang – For multilingual sites, use the
alternatemetadata property or a custom header.
Prerequisites
- A working Next.js project (version 13+ recommended for the Metadata API).
- Basic understanding of SEO concepts (crawling, indexing, metadata).
- Access to Google Search Console to monitor indexing.
- Familiarity with your site’s URL structure and content hierarchy.
Common mistakes
- Client-side rendering for key content – If you rely on
useEffector client-side data fetching for important text, search engines may not see it. Use server components or static generation. - Blocking pages with robots.txt – Accidentally disallowing important paths can prevent indexing. Test your robots.txt in Search Console.
- Missing canonical tags – Duplicate URLs (e.g., with query parameters) should have a canonical tag pointing to the preferred version.
- No sitemap or incomplete sitemap – Without a sitemap, search engines may miss pages, especially in large or dynamic sites.
Next step
FAQ
Is Next.js good for SEO?
Yes, Next.js provides server-side rendering and static generation, which deliver fully rendered HTML to search engines, making it easier for them to index content compared to client-side-only frameworks.
Do I need a sitemap for Next.js?
Yes, a sitemap helps search engines discover all important pages, especially for large or dynamic sites. Next.js offers built-in sitemap generation or you can use next-sitemap.
Related topics
Sources
- Google Search Central: SEO Starter Guide — Primary guidance on crawlability, robots.txt, sitemaps, structured data, hreflang, and technical SEO basics.
- Google Search Central: Learn SEO — Core Google documentation for SEO best practices and how search systems access and understand pages.
- Google Search Central: Crawling and indexing documentation — Useful for rules about crawlability, indexing controls, and URL management.
- Next.js Documentation — Authoritative source for Next.js rendering, metadata, routing, and sitemap-related implementation details.
Reviewed by Lucía Marín, Founding editor.