Complete Guide to SEO in Next.js: Rank Higher on Google

Why Next.js Is an SEO Powerhouse

Next.js gives you the best possible foundation for SEO. Server-side rendering means search engine crawlers receive fully rendered HTML — no waiting for JavaScript to execute. The App Router's metadata API generates title, description, OpenGraph, and Twitter Card tags automatically. Built-in image optimization improves Core Web Vitals. And file-based routing creates clean, logical URL structures.

The Metadata API

Export a metadata object from any page.js or layout.js server component. Next.js generates the appropriate meta tags in the document head. Set metadataBase to your domain so relative image URLs resolve correctly. Use the template pattern ({ default: 'Page Title', template: '%s | Site Name' }) so page-level titles automatically include your brand name.

JSON-LD Structured Data

Add JSON-LD schema markup to help search engines understand your content. For a personal portfolio, use the Person schema with your name, jobTitle, url, image, and sameAs (your social profile URLs — LinkedIn, GitHub, Upwork). For blog posts, use the Article schema with headline, author, datePublished, and image. Google uses this data for rich results in search — star ratings, FAQ dropdowns, article cards.

Dynamic Sitemap Generation

Next.js generates your sitemap.xml automatically from a src/app/sitemap.js file that exports an async function. Fetch your blog posts from the API and return an array of { url, lastModified, changeFrequency, priority } objects. Submit the sitemap URL to Google Search Console so Google discovers all your pages quickly without having to crawl your entire site link by link.

Core Web Vitals Optimization

Google uses Core Web Vitals as a ranking signal. The three metrics: Largest Contentful Paint (LCP) — how fast the main content loads; Cumulative Layout Shift (CLS) — how stable the layout is while loading; Interaction to Next Paint (INP) — how responsive the page is to interactions. Optimize LCP by preloading the hero image. Eliminate CLS by setting width/height on all images. Improve INP by deferring non-critical JavaScript.

Content SEO: Keywords and Intent

Technical SEO creates the foundation; content SEO drives the traffic. Research keywords your audience searches for using tools like Google Keyword Planner, Ahrefs, or even Google Autocomplete. For each page, target one primary keyword and support it with related terms (LSI keywords). Write content that genuinely answers the searcher's intent — Google's algorithms reward comprehensive, helpful content over keyword-stuffed thin pages.