Development · Tip
Hide Next.js Pages with Metadata Robots
Prevent search engines from indexing specific Next.js pages using metadata robots
This technique uses Next.js App Router metadata configuration to prevent search engine indexing on a per-page basis. Exporting a robots object with index set to false injects a noindex meta tag into the document head. Crucially, the page must not be blocked in robots.txt so crawlers can access the page to read the directive.
How it works
1. In your Next.js page file, import `Metadata` from `'next'` and export a `metadata` object:
```typescript
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Privacy Policy",
robots: {
index: false,
follow: true,
},
};
```
2. Next.js will inject `<meta name="robots" content="noindex, follow">` into the `<head>` of the page.
3. Crucial Rule: Do NOT block the URL in your `robots.txt` file (or `robots()` route handler). If blocked in `robots.txt`, search engine crawlers cannot crawl the page to read the `noindex` tag, and the URL could still appear in Google search results if other pages link to it.
What it's for
- Prevent staging, admin, or internal utility pages from appearing in Google search results
- Keep legal, thank-you, or confirmation pages out of public index lists
- Allow search crawlers to follow outbound links on unindexed pages
Key points
- Import Metadata type from 'next' in your Next.js App Router page
- Define and export a metadata object specifying robots settings
- Set robots: { index: false, follow: true } to block indexing while preserving link equity
- Next.js automatically renders <meta name="robots" content="noindex, follow"> in the head
- Avoid disallowing the path in robots.txt so crawlers can read the noindex directive
Pricing
Free
Details
- Type
- Tip
- Category
- Development
- Topic
- SEO Techniques
- Open source
- Yes
- Platforms
- Web, Code library
- For
- Next.js developers managing SEO and page visibility
- Tags
- nextjs, react, seo, webdev, app router
Why it was saved
- @codinginflow: Properly keeps private or utility pages (e.g., privacy policies, admin dashboards) out of Google search results without risking search engine leaks.
Related
Route-level loading.jsx vs granular React Suspense boundaries in Next.js App Router.
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Refined, copy-paste React and Tailwind CSS components with micro-interactions
Performance pattern for deferring below-the-fold components to accelerate perceived page load.
Open-source animated UI components and blocks built for shadcn/ui projects
Updated