Visit Website →
← Back to blog

Next.js Website SEO: Check Metadata, ISR, and Images Before Launch

October 10, 2026
Next.js Website SEO: Check Metadata, ISR, and Images Before Launch

The single best action for Next.js website SEO is combining server-rendered HTML with the Metadata API, optimized images, and structured data, all backed by Core Web Vitals monitoring. Start with rendering strategy, then metadata, then performance: those three decisions determine whether crawlers can read your pages at all before anything else matters.

TL;DR:

  • Use SSG for stable pages and ISR for periodic updates; reserve SSR for data that must refresh on every request, because it increases latency.
  • Give every route unique titles, descriptions, and canonical URLs; child metadata replaces parent objects, so audit layouts after refactors for dropped social images.
  • Google’s good Core Web Vitals thresholds are LCP ≤2,500 ms, INP ≤200 ms, and CLS ≤0.1 at the 75th percentile of real page loads.
  • Render JSON-LD on the server, match its schema to each page’s content, and validate it with Google’s Rich Results Test after every deployment.
Forge-web-studio
Build a Clearer, Search-Ready Website
Forge Web Studio creates strategy-led websites for Texas businesses, with mobile clarity, local search optimization, and clear paths for leads.
Visit Forge Web Studio

Table of Contents

Rendering Strategy: Choose SSG, ISR, or SSR per Page

Static Site Generation (SSG) builds HTML at deploy time and suits pages that rarely change, like marketing pages or documentation. Incremental Static Regeneration (ISR) regenerates static pages on a schedule or on demand, which fits product catalogs or blog indexes that update periodically. Server-Side Rendering (SSR) builds HTML on each request and works for highly personalized or frequently changing content, though it adds time to first byte.

Comparison of SSG, ISR, and SSR rendering

According to Next.js Learn: SEO, SSG and ISR serve complete HTML and perform best for crawlers, while SSR remains indexable but increases latency. Client-side rendering (CSR) often leaves crawlers with an empty initial HTML shell, which the same guide advises against for anything you want indexed. Google's own crawling process queues rendering separately from fetching, so server-rendered HTML reduces the risk of a page sitting unindexed while it waits in that queue, a point confirmed in Google's JavaScript SEO guide.

Practical implementation in Next.js:

  • Use generateStaticParams for SSG routes you know at build time.
  • Set a revalidate value in your fetch calls or route segment config for ISR.
  • Default to SSR only when data must be fresh on every request.

Metadata API and Per-Route Metadata Best Practices

Every route needs unique titles, descriptions, and canonical tags, not a single copy-pasted template. The Metadata API, through the static metadata export or the dynamic generateMetadata function, centralizes this work but only runs inside Server Components, according to the Next.js metadata documentation.

Set metadataBase once in your root layout so relative Open Graph and canonical URLs resolve correctly across environments. Watch for shallow merging: child metadata replaces parent metadata objects rather than merging field by field, so a nested page can silently drop an Open Graph image defined higher up, as noted in the metadata and OG images guide.

  • Export generateMetadata on dynamic routes pulling titles from your data source.
  • Define metadataBase in the root layout, not on individual pages.
  • Audit nested layouts for dropped fields after any metadata refactor.

Pro Tip: When a crawler only fetches initial HTML, configure htmlLimitedBots in next.config.js so critical metadata ships without waiting on streaming.

Image Optimization: next/image, Formats, and Layout Stability

Every image on an indexable page should run through next/image, which emits responsive sources in modern formats and handles lazy loading automatically. According to Next.js documentation, explicit width and height attributes prevent the browser from reserving the wrong amount of space, which is a direct cause of layout shift.

For pages that need custom social preview images, the ImageResponse API generates Open Graph images dynamically at request time instead of requiring a static asset for every route.

  • Always set explicit width and height or use fill with a sized parent container.
  • Serve AVIF or WebP through next/image's automatic format negotiation.
  • Reserve layout space for offscreen images before they load to avoid shift.

Our image optimization guide walks through sizing and lazy-loading decisions in more depth.

Structured Data and JSON-LD: What to Include and Where

JSON-LD is the structured data format Google recommends, according to Google Search Central, because it stays separate from visible text and is easier to maintain at scale. Render it server-side inside the page so bots receive the markup in the initial HTML response without needing to execute JavaScript first.

Prioritize schemas by what the page actually is: BreadcrumbList for navigation context, Article or BlogPosting for editorial content, FAQPage for question-and-answer sections, and Product or LocalBusiness for commercial pages. Our copy-ready local schema snippets cover the LocalBusiness fields most service pages need.

  • Inject JSON-LD as a script tag rendered on the server, not appended client-side.
  • Match the schema type to the page's actual content, not a generic default.
  • Validate every schema with Google's Rich Results Test after each deploy.

Pro Tip: A tool like BabyLoveGrowth's JSON-LD generator can speed up drafting schema for pages without one yet.

Sitemap and Robots: Next.js File Conventions

Next.js generates sitemaps programmatically through a sitemap.js or sitemap.ts file that returns an array of URL entries with lastModified, changeFrequency, and priority fields, per the Next.js sitemap documentation. Large sites can split output into multiple sitemaps with a sitemap index, and the same conventions support image and video sitemap entries.

  1. Create app/sitemap.ts returning every indexable URL with an accurate lastModified date.
  2. Add app/robots.ts returning a Robots object with per-agent allow and disallow rules.
  3. Submit the sitemap URL in Google Search Console and recheck it after major site changes.

Keep lastModified honest: a sitemap that claims every page updated today when nothing changed trains crawlers to discount the signal.

Core Web Vitals and Performance: What to Measure

Google defines "good" thresholds as Largest Contentful Paint (LCP) at or under 2,500 milliseconds, Interaction to Next Paint (INP) at or under 200 milliseconds, and Cumulative Layout Shift (CLS) at or under 0.1, measured at the 75th percentile of page loads according to Web.

Field data beats lab data for ranking purposes: Google surfaces Core Web Vitals through the Chrome User Experience Report, so a page that looks fast in a local test can still fail if real visitors on slower connections experience something different.

  • Measure with PageSpeed Insights for lab data and Search Console for field data.
  • Add the web-vitals library or a RUM provider to capture real user metrics in production.
  • Fix render-blocking scripts, compress the largest above-the-fold image, and split large JavaScript bundles.
  • Push static assets to edge caching and break up long main-thread tasks that delay interaction response.

Our Core Web Vitals workflow for developers breaks down how to prioritize fixes by impact, and the partner piece on what actually moves rankings and conversions offers a useful outside perspective on where speed work pays off fastest.

Canonicalization, Duplicate Content, and Internal Linking

Add a canonical field inside your metadata object whenever a page is reachable through more than one URL, such as with tracking parameters, sort options, or trailing slash variants. Normalize trailing slashes and query parameters at the routing level rather than relying on search engines to guess which version matters.

Near-duplicate pages, like a paginated list and its filtered variants, should point their canonical tag at a single representative URL while still appearing in your sitemap under that canonical form.

  • Set alternates.canonical in metadata for any URL with duplicate or parameterized variants.
  • Normalize trailing slashes and sort/filter parameters before they reach the router.
  • Link internally with descriptive anchor text instead of generic "click here" phrasing.
  • Build hub pages that cluster related content and link outward to supporting pages.

Monitoring, Testing, and Deploy-Time Checks

A Next.js site's SEO health degrades quietly unless you check for it, so build the checks into your workflow rather than your memory.

  1. Review Search Console weekly for coverage errors, new manual actions, and Core Web Vitals report changes.
  2. Add Lighthouse CI or a GitHub Actions step that fails the build on an LCP or INP regression past your threshold.
  3. Collect field data through the web-vitals library and tie INP or CLS trends to conversion or bounce metrics you already track.

Treat a failed Lighthouse budget the same as a failed test: block the merge until someone explains the regression.

Forge Web Studio: Applied Next.js SEO Expertise

We build Next.js sites that include rendering strategy, metadata, and local search setup as core deliverables. Every project includes mobile-first layouts, lead generation flows, and Google Business integration from day one, built and reviewed directly by our founder.

  • We specialize in rapid Next.js builds for service businesses and restaurants.
  • Every site ships with mobile clarity, clear contact paths, and local SEO setup.
  • Our Next.js development services page details the stack and process.
  • A sample website audit shows how we diagnose SEO and performance issues before a rebuild.

When to Hire Help vs. Build In-House

Teams with tight timelines, strict Core Web Vitals targets, or a CMS more complex than a blog usually move faster with a developer who has shipped Next.js sites before. Smaller, slower-changing sites can often handle the checklist above in-house.

— Dylan

How Forge Web Studio Helps Deliver Next.js SEO Results

We turn this checklist into a shipped site: rendering strategy, metadata, structured data, and local SEO setup, built directly into every project rather than bolted on after launch.

Forge-web-studio

Check current pricing and scope on our pricing page to see where your project fits.

FAQ

Is Next.js SEO Friendly?

Yes. Next.js supports server-side rendering, static generation, and a built-in Metadata API, all of which Next.js Learn: SEO identifies as the core levers for crawlability and ranking performance.

Is SEO Dead Now With AI?

No. Search engines and AI summarizers both depend on crawlable, well-structured HTML and accurate metadata to understand a page, which is exactly what the Metadata API and JSON-LD are built to provide. The fundamentals covered here, rendering, metadata, and structured data, remain the basis for visibility in both traditional and AI-driven search results.

Is React Still Bad for SEO?

Plain client-side React can leave crawlers with an empty HTML shell, which Google's JavaScript SEO documentation flags as a risk since not all bots execute JavaScript reliably. Next.js solves this by rendering HTML on the server or at build time, so the underlying React code is not the issue, the rendering strategy is.

Is Next.js in High Demand?

Next.js is widely used for production websites that need both strong performance and SEO control, and its adoption has grown alongside the shift toward server-rendered JavaScript frameworks. Specific demand figures vary by source and are not tracked in this guide.

Sources