---
title: "How to Use Meta Robots Tags in Vue"
description: "Set noindex, nofollow, and AI Overview opt-outs with useSeoMeta in Vue, and avoid the mistakes that silently deindex working pages."
canonical_url: "https://nuxtseo.com/learn-seo/vue/controlling-crawlers/meta-tags"
last_updated: "2026-10-05"
---

> Index of every page on this site: [llms.txt](https://nuxtseo.com/llms.txt)

::key-takeaways
- `noindex` prevents a page from being indexed; `nofollow` tells Google not to follow links on that page
- `nosnippet` blocks a page from search snippets and prevents AI Overviews and AI Mode from using it as input
- Use the `data-nosnippet` HTML attribute to exclude one section, like a pricing table, from snippets without noindexing the whole page
- Put robots tags in initial HTML where practical. Google can also process JavaScript-generated tags when rendering succeeds
::

Meta robots tags give page-level control over search engine indexing, on top of the site-wide rules in [robots.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/robots-txt). Use them to block filtered pages from indexing, control indexing of low-value pages, or opt specific content out of search snippets and AI Overviews. For non-HTML files (PDFs, images) use [X-Robots-Tag HTTP headers](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#xrobotstag) instead.

## Setup

Add the robots meta tag with [Unhead](https://unhead.unjs.io/) in your Vue components. Put it in the [initial HTML response](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering) where practical. Google can also process JavaScript-generated tags, but rendering can fail.

```vue [Block Indexing]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'noindex, follow'
})
</script>
```

```vue [Control Snippets]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'
})
</script>
```

Vue apps need [manual Unhead installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation); Nuxt includes it by default.

## How Meta Robots Tags Work

The robots meta tag goes in your page's `<head>`{lang="html"} and tells crawlers what to do with that specific page ([Google's documentation](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag)):

```html
<meta name="robots" content="index, follow">
```

Without a robots meta tag, crawlers assume `index, follow` by default ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/robots)).

### Common Directives

- `noindex`: exclude from search results
- `nofollow`: don't follow links on this page
- `noarchive`: ignored by Google Search because cached result links no longer exist
- `nosnippet`: no snippet in search results, and no use of the content as input for AI Overviews or AI Mode; the trade-off is it can hurt click-through rate since there's no preview text to draw someone in
- `max-snippet:[number]`: limit search snippets and the amount of page content Google may use as direct input for AI Overviews and AI Mode
- `max-image-preview:[setting]`: control image preview size (`none`, `standard`, `large`)
- `max-video-preview:[number]`: limit video preview to N seconds

Combine directives with commas. When two conflict, [the more restrictive one wins](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag): a page with both `max-snippet:50` and `nosnippet` gets `nosnippet` applied.

### Excluding Specific Content: data-nosnippet

`nosnippet` blocks snippets for the whole page. To exclude one section instead, mark it with the `data-nosnippet` HTML attribute:

```vue
<template>
  <div>
    <p>This content can be used in search snippets.</p>
    <div data-nosnippet>
      This content is excluded from search snippets.
    </div>
  </div>
</template>
```

Useful for pricing tables, spoilers on review pages, or any block you want public but not quoted verbatim in results.

### Critical Requirements

Initial HTML makes robots tags available without JavaScript rendering. Google crawls a page first and renders its JavaScript in a separate, later step, with no published timeline for when that happens, so a tag injected only after hydration may not exist yet when the crawler reads the page. SSR puts the tag in the HTML response immediately.

If you block the page in robots.txt, crawlers [never see the meta tag](https://developers.google.com/search/docs/crawling-indexing/block-indexing), so don't combine robots.txt blocking with noindex: the noindex directive won't fire.

Target specific crawlers by replacing `robots` with a user agent token like `googlebot`. For Google, combine applicable rules. A specific crawler tag does not cancel a restrictive general robots rule.

## Noindex Follow vs Noindex Nofollow

Use `noindex, follow` to request exclusion from search while allowing link discovery. This does not guarantee crawling or ranking credit for the linked pages ([Google's robots meta tag docs](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag)).

Use `noindex, nofollow` when both exclusion and restricted link discovery fit the page. Protect private content with authentication.

```vue [Noindex Follow - Preserve Links]
<script setup lang="ts">
// Filter pages, thank you pages, test pages
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'noindex, follow'
})
</script>
```

```vue [Noindex Nofollow - Block Everything]
<script setup lang="ts">
// Login pages, admin sections
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'noindex, nofollow'
})
</script>
```

`follow` doesn't force crawling, it only allows it; pages can still be crawled less often over time once they're noindexed.

## Common Use Cases

### Search Results and Filtered Pages

Internal search results and filter combinations can create [duplicate content](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/duplicate-content). [Google recommends](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading) blocking these with noindex or robots.txt:

```vue [pages/search.vue]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'noindex, follow'
})
</script>
```

```vue [pages/products/[category\\].vue]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'
import { useRoute } from 'vue-router'

const route = useRoute()

useSeoMeta({
  // Example policy: this application excludes pages with its filter parameter.
  robots: () => route.query.filter !== undefined ? 'noindex, follow' : 'index, follow'
})
</script>
```

This policy excludes the application's filter URLs. Tracking and pagination parameters remain indexable. Define your policy from the actual content, and parse malformed query values at your router boundary.

Choose indexing exclusion or canonical consolidation according to the page's purpose. [Google recommends canonicals rather than noindex for duplicate consolidation](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls). Noindex removes the page from Search.

### Pagination

[Google no longer uses](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading) `rel="next"` and `rel="prev"` tags. Link to next/previous pages with regular `<a>`{lang="html"} tags and let Google discover the sequence naturally. See the [Pagination SEO guide](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination) for implementation details.

You don't need to noindex pagination pages; Google treats them as part of the sequence. Only noindex if the paginated content is duplicate or low-value.

### User-Generated Content

Limit snippet length for public user profiles:

```vue [pages/user/[id\\]/profile.vue]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  robots: 'index, follow, max-snippet:50'
})
</script>
```

## X-Robots-Tag for Non-HTML Files

The meta robots tag only works in HTML. For PDFs, images, videos, or other files, use the [X-Robots-Tag HTTP header](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#xrobotstag) instead ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Robots-Tag)):

```
X-Robots-Tag: noindex, nofollow
```

X-Robots-Tag supports the same directives as the meta tag. Use a header for non-HTML resources or server-wide rules. Google combines applicable header and meta rules, applying the more restrictive rule when they conflict.

## Verification

Use [Google Search Console's URL Inspection tool](https://support.google.com/webmasters/answer/9012289) to verify your robots meta tag:

1. Enter the URL
2. Check "Indexing allowed?" status
3. View the rendered HTML to confirm the tag appears

If a noindexed page still appears in search results, check whether Google has recrawled it and seen the directive: depending on the page's importance, [it can take months](https://developers.google.com/search/docs/crawling-indexing/block-indexing) for Google to revisit and apply the directive. Request a recrawl via the URL Inspection tool.

Monitor "Excluded by 'noindex' tag" reports in [Search Console](https://nuxtseo.com/learn-seo/vue/launch-and-listen/search-console). Sudden spikes indicate accidental noindexing of important pages.

## Checklist

::checklist{#vue-meta-robots-tags}
- Set `useSeoMeta({ robots: ... })`{lang="ts"} on components that need noindex, nofollow, or snippet control
- Use `noindex, follow` to block indexing while allowing link discovery; use `noindex, nofollow` for pages with no valuable links
- Never combine robots.txt blocking with a noindex meta tag on the same page
- Use `data-nosnippet` for sections you want public but excluded from snippets
- Use X-Robots-Tag, not the meta tag, for non-HTML files like PDFs
- Verify the tags in initial and rendered HTML with Search Console's URL Inspection tool
::

Using Nuxt? [Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) handles much of this automatically; see the [Nuxt meta robots tags guide](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags).

## Sitemap

See the full [sitemap](https://nuxtseo.com/sitemap.md) for all pages.