Back to Blog
Web Development

Next.js SEO Guide: Static Export, Metadata API, JSON-LD, and Core Web Vitals for Google Rankings

May 18, 202514 min read
Next.js SEOStatic Site GenerationCore Web VitalsJSON-LDGoogle SEOMetadata APITechnical SEO

Why Next.js and Static Sites Rank Well

Next.js SEO works best when HTML is fast, crawlable, and explicit. Static export and pre-rendered pages send complete documents to crawlers without relying on client-only rendering, which helps indexing. Speed ties directly to Core Web Vitals, a known Google ranking factor. Teams searching Next.js static SEO or technical SEO for React usually want this combination of performance and metadata control.

Metadata API: Titles, Descriptions, and Canonical URLs

Use the Next.js Metadata API in the App Router for unique title and description per route, canonical links to prevent duplicate content, and Open Graph / Twitter tags for social previews. Keep titles under roughly 60 characters and descriptions near 150–160 characters where possible. Consistent metadata improves click-through from SERPs and helps AI overviews surface accurate summaries.

Sitemaps and Robots

Generate a sitemap that lists important URLs and lastmod hints. Next.js projects often use next-sitemap or built-in conventions post-build. Pair with a sensible robots.txt that allows crawling of public content and blocks staging or admin paths. For large sites, split sitemaps and reference them from the index sitemap.

Structured Data (JSON-LD) for Rich Results

Add JSON-LD for WebSite, Organization or Person, BreadcrumbList, FAQPage where truthful, and BlogPosting for articles. Valid schema helps Google understand entities and can unlock rich snippets. Test with Google’s Rich Results Test. Accurate structured data also feeds AI search and answer engines that ingest page semantics.

Core Web Vitals: LCP, CLS, and INP

Optimize Largest Contentful Paint (LCP) with prioritized hero images, efficient fonts, and minimal render-blocking resources. Reduce Cumulative Layout Shift (CLS) by setting width and height on media and reserving space for ads or embeds. Improve Interaction to Next Paint (INP) by splitting heavy client bundles and deferring non-critical JavaScript. Monitor with Lighthouse and real-user data in Search Console.

Content Structure for SEO and AI Answers

Use a single clear h1, logical h2/h3 sections, and concise paragraphs. Answer the main question early (inverted pyramid). That pattern helps humans skim, helps Google match queries, and gives AI search systems extractable facts. Internal links with descriptive anchor text spread authority to key pages.

Internationalization and Edge Cases

If you ship multiple locales, use hreflang annotations and separate URLs or subpaths per language. For mixed static and dynamic routes, ensure anything you want indexed returns a non-empty HTML shell server-side or at build time.

Checklist Before Launch

Verify no accidental noindex, validate OG images resolve as HTTPS absolute URLs, run Lighthouse on mobile, and spot-check key queries in Search Console after deployment. Next.js SEO is an ongoing practice: ship, measure, iterate.

Summary

Ranking on Google with a Next.js site is less about tricks and more about fast static HTML, precise metadata, clean structured data, and strong Core Web Vitals. That stack matches what both traditional search and AI-powered search systems reward.

Quick Share:WhatsAppLinkedInX