Canonical Link Tag in Vue & Nuxt

Introduction

Canonical URLs tell search engines which version of a page is the "master" copy when similar content exists at multiple URLs. They're crucial for preventing duplicate content issues and consolidating SEO value.

✅ Good for:

• URLs with query parameters (e.g., filters, sorting)
• Same content on multiple paths
• Mobile/desktop variations
• Cross-domain syndicated content
• Paginated content
• HTTP/HTTPS duplicates

❌ Don't use for:

• Entirely different content
• Redirecting users (use HTTP redirects instead)
• Blocked pages (use meta robots with noindex)
• Cross-language content (use hreflang instead)

Quick Setup

Add canonical URLs to your Vue pages using Unhead composables:

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

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

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

Using Nuxt? The Nuxt SEO Utils module can handle this automatically.

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

Key Behaviors

• Search engines transfer ranking signals to the canonical URL
• Non-canonical URLs may still be crawled but usually won't be indexed
• Canonical tags are seen as strong hints, not directives
• Self-referential canonicals (pointing to the current URL) are valid and recommended

Important Notes

• Must use absolute URLs
• Only one canonical per page
• Should be server-side rendered
• Combining with meta robots can send mixed signals
• Consider alongside your sitemap strategy
• Check interaction with crawler directives

Common Patterns

Filter and Sort Parameters

// pages/products/[category].vue
const { sort, filter, page } = useRoute().query

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

// pages/blog/[page].vue
useHead({
  link: [{
    rel: 'canonical',
    // Point all pages to first page
    href: 'https://mysite.com/blog'
  }]
})

For alternative pagination strategies, see Google's pagination guidelines.

Mobile/Desktop Versions

// pages/products/[id].vue
useHead({
  link: [{
    rel: 'canonical',
    // Point mobile site (m.mysite.com) to desktop version
    href: `https://mysite.com/products/${id}`
  }]
})

Consider using responsive design instead of separate mobile sites. See Google's mobile site guidelines.

Cross-Domain Syndication

// pages/article/[slug].vue
useHead({
  link: [{
    rel: 'canonical',
    // Point to original article source
    href: article.originalUrl
  }]
})

Testing

Using Google Search Console

1. Use URL Inspection tool
2. Check "Canonical Tag" section
3. Verify Google's selected canonical
4. Monitor for canonical conflicts

Important Checks

• Validate absolute URL format
• Check for canonical chains (A → B → C)
• Verify SSR implementation
• Test with and without parameters
• Monitor indexing changes
• Check for conflicting meta robots directives

Handling Edge Cases

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

Handle through server redirects rather than canonicals:

// server/middleware/redirects.ts
export default defineEventHandler((event) => {
  const host = getRequestHost(event)
  // Redirect non-www to www
  if (!host.startsWith('www.')) {
    return sendRedirect(event, `https://www.${host}${event.path}`, 301)
  }
})

Dynamic Canonicals

For dynamic routes, ensure canonical URLs are consistent:

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

Related

Core Concepts

• Understanding Crawler Control - How crawlers work
• Security Best Practices - Secure implementation

Implementation Methods

• Meta Robots Guide - Page-level crawler directives
• HTTP Redirects - URL migration strategies
• Robots.txt Usage - Site-wide crawler rules

Additional Resources

• Google's Canonical Guidelines
• Sitemap Integration - URL discovery optimization