How to Use Meta Robots Tags in Vue

Meta robots tags give page-level control over search engine indexing, on top of the site-wide rules in 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 instead.

Setup

Add the robots meta tag with Unhead in your Vue components. Put it in the initial HTML response where practical. Google can also process JavaScript-generated tags, but rendering can fail.

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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

<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; Nuxt includes it by default.

How Meta Robots Tags Work

The robots meta tag goes in your page's <head> and tells crawlers what to do with that specific page (Google's documentation):

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

Without a robots meta tag, crawlers assume index, follow by default (MDN reference).

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: 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:

<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, 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).

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

<script setup lang="ts">
// Filter pages, thank you pages, test pages
import { useSeoMeta } from '@unhead/vue'

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

<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. Google recommends blocking these with noindex or robots.txt:

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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

<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. Noindex removes the page from Search.

Pagination

Google no longer uses rel="next" and rel="prev" tags. Link to next/previous pages with regular <a> tags and let Google discover the sequence naturally. See the Pagination SEO guide 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:

<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 instead (MDN reference):

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 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 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. Sudden spikes indicate accidental noindexing of important pages.

Checklist

Using Nuxt? Nuxt SEO handles much of this automatically; see the Nuxt meta robots tags guide.