Canonical URLs in Nuxt · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

Learn SEO

Master search optimization

Nuxt

 Vue

[SEO Checklist](https://nuxtseo.com/learn-seo/checklist) [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

[Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/descriptions)
- [Image Alt Text](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text)
- [Social Sharing](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)
- [Rich Results](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/rich-results)
- [Schema.org](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org)
- [Twitter Cards](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards)

[ Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)

- [Robots Txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/robots-txt)
- [Sitemaps](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/sitemaps)
- [Robot Meta Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags)
- [Canonical Link Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)
- [HTTP Redirects](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects)
- [Duplicate Content](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/duplicate-content)
- [llms.txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/llms-txt)

[ Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)

- [URL Structure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/url-structure)
- [Pagination](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination)
- [Trailing Slashes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes)
- [Query Parameters](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters)
- [Hreflang & i18n](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/i18n)
- [404 Pages](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/404-pages)
- [Dynamic Routes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/dynamic-routes)
- [Internal Linking](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/internal-linking)
- [Programmatic SEO](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/programmatic-seo)
- [Rendering Modes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/rendering)
- [Security](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

[ Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)

- [Getting Indexed](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/going-live)
- [Google Search Console](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/search-console)
- [Core Web Vitals](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/core-web-vitals)
- [Indexing Issues](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexing-issues)
- [SEO Monitoring](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/seo-monitoring)
- [Site Migration](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/site-migration)
- [IndexNow](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexnow)
- [Debugging](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/debugging)
- [AI Search Optimization](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/ai-optimized-content)

1. [Learn SEO for Nuxt](https://nuxtseo.com/learn-seo)
2.
3. [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
4.
5. [Canonical Urls](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)

# Canonical URLs in Nuxt

Canonical URLs tell search engines which version of a page to index when duplicate content exists. Here's how to set them up in Nuxt.

[![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw)10 mins read Published Nov 3, 2024 Updated Jan 29, 2026

What you'll learn

- Canonical tags are hints, not directives. Google may choose differently
- In 2026, AI models use canonicals to consolidate data from multiple sources
- Always use absolute URLs ([https://mysite.com/page](https://mysite.com/page), not /page)
- Self-referencing canonicals recommended even for unique pages

Canonical URLs tell search engines and AI crawlers which version of a page is the primary copy when duplicate content exists at multiple URLs. In 2026, proper canonicalization matters for **AI Data Consolidation**, ensuring that AI models don't count your content as multiple separate (and potentially conflicting) sources.

Use canonicals for URLs with query parameters (filters, sorting), same content on multiple paths, paginated sequences, and cross-domain syndication. For choosing between canonicals and redirects, see [Duplicate Content](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/duplicate-content). For redirecting users, use [HTTP redirects](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects) instead. For blocking pages from search, use [meta robots](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags) with noindex.

## [Quick Setup](#quick-setup)

Add canonical URLs to your Nuxt pages using `useHead()`:

Basic Usage

```
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://mysite.com/products/phone'
    }
  ]
})
```

With Query Params

```
// Keep sort parameter in canonical
useHead({
  link: [
    {
      rel: 'canonical',
      href: \`https://mysite.com/products?sort=${sort}\`
    }
  ]
})
```

Cross Domain

```
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://otherdomain.com/original-article'
    }
  ]
})
```

[SEO Utils v8.1.72.4M125 SEO utilities to improve your Nuxt sites discoverability and shareability.](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) ## [Understanding Canonical URLs](#understanding-canonical-urls)

A canonical URL is implemented as a link tag in your page's head:

```
<link rel="canonical" href="https://mysite.com/page">
```

### [Canonical Tags Are Hints, Not Directives](#canonical-tags-are-hints-not-directives)

Google treats canonicals as [strong signals, not mandatory rules](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls). Google's Joachim Kupke: "It's a hint that we honor strongly. We'll take your preference into account, in conjunction with other signals, when calculating the most relevant page to display in search results."

Google may choose a different canonical than you specify when:

- Content differs significantly between URLs
- Multiple conflicting canonical declarations exist
- Google believes a different page is more authoritative

[Google uses the canonical page](https://developers.google.com/search/docs/crawling-indexing/canonicalization) as the main source to evaluate content and quality. Non-canonical URLs may still be crawled but usually won't appear in search results.

### [Self-Referencing Canonicals](#self-referencing-canonicals)

[Self-referencing canonicals are recommended](https://searchengineland.com/canonicalization-seo-448161) even for unique pages. They establish a clear preferred URL and prevent search engines from guessing when tracking parameters or alternate URL formats appear.

Google's John Mueller: "I recommend using a self-referential canonical because it makes it clear to us which page you want to have indexed, or what the URL should be when it is indexed."

### [Important Notes](#important-notes)

- Must use absolute URLs ([Google documentation](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls))
- Only one canonical per page (multiple declarations cause Google to ignore all hints)
- Must be server-side rendered (crawlers don't run JavaScript)
- Include canonical pages in [sitemaps](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/sitemaps), exclude non-canonical pages
- Don't combine canonical with noindex [meta robots](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags). Sends conflicting signals

## [Common Patterns](#common-patterns)

### [Filter and Sort Parameters](#filter-and-sort-parameters)

pages/products/[category].vue

```
const route = useRoute()
const { sort, filter, page } = route.query
const category = route.params.category

useHead({
  link: [{
    rel: 'canonical',
    // Only include sort in canonical, remove filter and pagination
    href: sort
      ? \`https://mysite.com/products/${category}?sort=${sort}\`
      : \`https://mysite.com/products/${category}\`
  }]
})
```

### [Pagination](#pagination)

Paginated pages need self-referencing canonicals. [Don't point them all to page 1](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading), because each page in the sequence has unique content and should be indexed separately. See the [Pagination SEO guide](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination) for implementation details.

### [Mobile/Desktop Versions](#mobiledesktop-versions)

If you have separate mobile URLs (m.domain.com), [keep the desktop URL as canonical](https://www.lumar.io/office-hours/separate-mobile/) even with mobile-first indexing. Google uses canonicals to understand which pages belong together, then internally selects the mobile version for indexing.

pages/products/[id].vue

```
const route = useRoute()
const id = route.params.id

useHead({
  link: [{
    rel: 'canonical',
    // Mobile site (m.mysite.com) points to desktop
    href: \`https://mysite.com/products/${id}\`
  }]
})
```

[Don't switch canonicals from desktop to mobile URLs](https://www.seroundtable.com/google-m-dot-urls-the-canonical-37809.html). Google advises against this. Use responsive design with a single URL instead.

### [Cross-Domain Syndication](#cross-domain-syndication)

[Google no longer recommends cross-domain canonicals](https://searchengineland.com/google-no-longer-recommends-canonical-tags-for-syndicated-content-406491) for syndicated content. Instead, syndication partners should use noindex meta robots to block indexing.

pages/article/[slug].vue

```
// If syndicating TO other sites, have them use noindex
useSeoMeta({
  robots: 'noindex, follow'
})
```

pages/original-article.vue

```
// If this IS the original, use self-referencing canonical
useHead({
  link: [{
    rel: 'canonical',
    href: 'https://mysite.com/articles/original-slug'
  }]
})
```

Exception: News publishers syndicating to Google News should still use cross-domain canonicals per [Google's news publisher guidance](https://developers.google.com/search/blog/2009/12/handling-legitimate-cross-domain).

## [Testing](#testing)

### [Verifying Canonicals](#verifying-canonicals)

Use [Google Search Console's URL Inspection tool](https://support.google.com/webmasters/answer/9012289) to compare your declared canonical with Google's selected canonical. For a full detection workflow, see [Duplicate Content](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/duplicate-content#finding-duplicate-content).

### [Important Checks](#important-checks)

- Validate absolute URL format
- Check for canonical chains (A → B → C)
- Verify SSR implementation (view page source, not inspected HTML)
- Test with and without parameters
- Don't combine canonical with noindex [meta robots](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags)

## [Handling Edge Cases](#handling-edge-cases)

### [Multiple Language Versions](#multiple-language-versions)

For multilingual sites, combine canonicals with hreflang:

```
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://mysite.com/en/page'
    },
    {
      rel: 'alternate',
      hreflang: 'fr',
      href: 'https://mysite.com/fr/page'
    }
  ]
})
```

### [Protocol/WWW Variations](#protocolwww-variations)

Handle through [server redirects](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects) in `nuxt.config.ts`:

nuxt.config.ts

```
export default defineNuxtConfig({
  routeRules: {
    // Redirect /old-page to /new-page
    '/old-page': { redirect: { to: '/new-page', statusCode: 301 } }
  }
})
```

Or handle with Nitro middleware:

server/middleware/canonicalize.ts

```
export default defineEventHandler((event) => {
  const host = getRequestHost(event)
  if (!host.startsWith('www.')) {
    return sendRedirect(event, \`https://www.${host}${event.path}\`, 301)
  }
})
```

### [Dynamic Canonicals](#dynamic-canonicals)

For dynamic routes, create a composable for consistent canonical URLs:

composables/useCanonical.ts

```
export function useCanonical(path: string) {
  const config = useRuntimeConfig()
  return {
    link: [{
      rel: 'canonical',
      href: \`${config.public.siteUrl}${path}\`
    }]
  }
}
```

nuxt.config.ts

```
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://mysite.com'
    }
  }
})
```

[The 2026 SEO Checklist for Nuxt & Vue Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

[Robot Meta Tag Control page-level indexing with meta robots tags. Block search results pages, manage pagination, and prevent duplicate content in Nuxt apps.](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags) [HTTP Redirects 301 redirects preserve SEO value when content moves. Nuxt handles server-side redirects through routeRules to pass link equity and maintain rankings.](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects)

On this page

- [Quick Setup](#quick-setup)
- [Understanding Canonical URLs](#understanding-canonical-urls)
- [Common Patterns](#common-patterns)
- [Testing](#testing)
- [Handling Edge Cases](#handling-edge-cases)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)