What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To make a Next.js website more search-friendly, give each route accurate metadata and a deliberate canonical URL, let crawlers reach the pages you want indexed, expose important content and links in HTML, publish a current sitemap, and validate the deployed result. Next.js provides the implementation tools; Google decides what it crawls, renders, indexes, and displays in search.
How do I add SEO metadata in Next.js?
In the App Router, metadata belongs to the route. Use the Metadata API rather than manually duplicating title and description tags. A route with fixed values can export a metadata object; a route whose metadata depends on parameters or fetched content can export generateMetadata. Both are Server Component APIs. See the Next.js Metadata API documentation.
As an Amazon Associate I earn from qualifying purchases.
Use static metadata for fixed pages
For a page whose title and description do not vary, export the values from its layout or page:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'About our team',
description: 'Meet the people behind our company.',
}
Generate metadata for content-driven routes
For pages such as articles or product records, derive metadata from the route and its content. Return a meaningful fallback when a record is missing, and keep titles and descriptions specific to the page:
#1 Best Overall
- How search engines work: Because knowing your enemy is half the battle.
- SEO Basics: Like how to start a website and submit it to Google.
- Keyword Research: Find the most promising keywords for your business.
- SEO Content: Create content that even search engines want to binge-read.
- On-Page SEO: The most effective way to explain your pages to search engines.
import type { Metadata } from 'next'
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>
}): Promise<Metadata> {
const { slug } = await params
const page = await getPage(slug)
return {
title: page.title,
description: page.description,
}
}
Adapt the data lookup and parameter types to your route and Next.js version. Do not return generic or duplicated metadata simply to fill the fields: descriptions should accurately summarize the page, and titles should help a person decide whether it is relevant. Google may construct a search-result title from several page sources, and snippets usually come from page text, though Google may sometimes use the meta description. Neither tag guarantees the exact wording shown in results; see Google’s title-link guidance.
How do I set a canonical URL in Next.js?
A canonical identifies the URL you prefer for a page when duplicate or near-duplicate URLs exist. Configure a stable public origin in the root layout’s metadataBase, then define the canonical for each page or route pattern with alternates.canonical:
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://www.example.com'),
alternates: {
canonical: '/articles/example',
},
}
With metadataBase, relative metadata URLs resolve against the intended site origin. For dynamic pages, generate the canonical path from the route’s actual public URL. Avoid deriving it from an untrusted host header or allowing a preview deployment’s hostname to leak into production metadata. Next.js documents this pattern in its Metadata API guide.
Rank #2
A canonical is a signal, not a command. Google describes redirects and rel="canonical" as strong canonicalization signals and sitemap inclusion as a weaker one; aligned signals help clarify your preference. When an old duplicate URL should no longer serve visitors, a redirect may be more appropriate than relying only on a canonical annotation. Include preferred URLs in the sitemap and avoid contradictory signals. Google can select a different canonical or infer one if you omit it. Read Google’s duplicate-URL consolidation guidance.
How do I generate robots.txt and a sitemap in Next.js?
Next.js App Router supports special route files for both crawler rules and sitemaps. They are cached by default unless dynamic behavior or configuration changes that, so check how your deployment handles updates if the file depends on changing data.
Set crawler access with app/robots.ts
Use MetadataRoute.Robots to define user-agent rules and point crawlers to your sitemap. Replace the example origin with your production domain:
import type { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: '/private-area/',
},
sitemap: 'https://www.example.com/sitemap.xml',
}
}
Only disallow paths that crawlers should not fetch. A robots.txt rule controls crawling; it is not a reliable way to keep a URL out of search results. A blocked URL can remain indexed without its content because the crawler cannot see page-level instructions. If a page should be excluded from search but remain accessible to crawlers, use a noindex directive and do not block crawling of that page. Use authentication for genuinely private content. Google explains the distinction in its robots.txt documentation and indexing-blocking guidance.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallPublish discoverable URLs with app/sitemap.ts
For a small, stable site, a static sitemap is straightforward. For a site whose page list comes from a content store, generate entries from that source and include only public URLs that should be discoverable:
import type { MetadataRoute } from 'next'
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const pages = await getPublicPages()
return pages.map((page) => ({
url: `https://www.example.com/${page.slug}`,
lastModified: page.updatedAt,
}))
}
Use the canonical production URLs, not preview URLs or alternate duplicates. Next.js also supports optional change-frequency, priority, and image fields; include them only when their values are accurate. Google sets a limit of 50,000 URLs per sitemap file, as noted in the Next.js sitemap documentation. For larger URL sets, Next.js supports splitting sitemaps with generateSitemaps. A sitemap helps discovery, but inclusion does not guarantee crawling or indexing.
| Approach | Best fit | What to watch |
|---|---|---|
| Static sitemap | A small site with a stable set of pages | Update it when public URLs change. |
| Generated sitemap | Content-driven sites with URLs that change over time | Check caching and ensure the generator emits only current canonical URLs. |
| Split sitemap | A site whose URL set exceeds a single file’s capacity | Google’s documented limit is 50,000 URLs per sitemap file. |
Does Google index Next.js websites?
Google can process JavaScript, so a Next.js site is not automatically excluded from search. But crawling, rendering, and indexing are separate stages, and JavaScript rendering can take additional time or encounter limitations. Googlebot discovers pages through links, sitemaps, and redirects; it does not promise to index every discovered URL.
Make important copy available in the document and connect pages with ordinary links such as <a href="/guides/example">Read the guide</a>. Do not make the only route to essential content a button or event handler that crawlers cannot follow. Server-side rendering or prerendering can make content available earlier in the HTML and help bots that do not execute JavaScript. Google’s guidance says server-side or pre-rendering is still a good idea because it can make a website faster for users and crawlers, and not all bots run JavaScript. See Google’s JavaScript SEO basics and its SEO Starter Guide.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →When should I add structured data?
Add structured data when a supported schema accurately describes the visible content on that page. It can help search engines understand the page and may make it eligible for a rich result, but eligibility does not mean Google will display one. Do not add markup for content users cannot see or for details that are not true.
Next.js recommends rendering JSON-LD in a <script type="application/ld+json"> element from the relevant page or layout. Build the object from that page’s data. If any string comes from users or another untrusted source, sanitize it before serialization: JSON.stringify alone does not make malicious text safe to embed in a script. Follow the Next.js JSON-LD guide and Google’s structured-data introduction.
How do I check the production result?
Validate the deployed site, not just the source code. A successful build cannot show whether production metadata points at the right host, crawler rules block an intended page, or a rendered page contains its important content.
- Inspect a representative URL in Google Search Console. Use URL Inspection to check whether Google can access the URL and view its rendered result. Test a typical page and important dynamic route patterns.
- Check the actual page output. Confirm the HTTP status, title, description, canonical link, robots directives, internal links, and important text in the returned or rendered HTML. Ensure the canonical and sitemap point to the preferred public URL.
- Open the crawler endpoints. Visit
/robots.txtand/sitemap.xmlon the production domain. Confirm that they return the intended rules and current canonical URLs, and that deployment caching is not serving stale content. - Test structured data when applicable. Use Google’s Rich Results Test for the structured-data features it supports. A passing test checks eligibility-related markup, not whether Google will show a rich result.
- Review performance with both lab and field data. Run Lighthouse against a production build for a simulated lab view, then compare it with field Core Web Vitals. Lighthouse is not a substitute for measurements from real user experiences; see Next.js’s production checklist.
These checks can reveal implementation problems, but they cannot guarantee a ranking, search appearance, or indexing outcome. Google controls those decisions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
