Canonical Tags

Overview

Canonical tags are used to prevent duplicate content issues in search engine rankings. In ToolStation Website, canonical tags are handled in the following way:

To add a canonical <link> tag in Nuxt-3, we use the built-in head composable. For example, in a shared layout or app.vue with Composition API:

const route = useRoute();
const requestURL = useRequestURL(); // Returns a URL object (origin, host, pathname etc.)

useHead(() => ({
  link: [
    {
      rel: "canonical",
      href: `${requestURL.origin}${route.path}`,
    },
  ],
}));

• useRequestURL() provides the current URL (origin, protocol, host) in both SSR and client mode.
• useHead() injects the <link rel="canonical"> into the page header. Wrapping it in a function makes it reactive to route changes.

This ensures the canonical tag is set during the initial server render and updated on client-side navigations.

In Nuxt, route.fullPath includes query parameters while route.path is only the pathname.

Product Listing

Use route.fullPath if you intentionally want to include filters/sorts in the canonical URL; otherwise, omitting query strings (route.path) will canonicalize to the base page.

Dynamic Updates on Route Change

Nuxt's reactive head management means canonical links are applied on every route change:

• On SSR initial render, useRequestURL() and route.path produce the correct URL and useHead() injects it into the HTML sent to the client.
• On client-side navigation, the arrow-function form of useHead() re-evaluates, updating <link rel="canonical"> automatically as route.path changes.

Why Canonical Tags Matter in E-commerce

Canonical tags prevent SEO issues caused by duplicate URLs. In e-commerce, many URL variants can exist for the same content (filters, sorts, tracking params, etc.):

• Filtering/Sorting (Category Pages): Applying filters (e.g. ?brand=X&color=Y) or pagination creates duplicates. Canonical tags point to the preferred URL, ensuring SEO value isn’t split.
• Product Variants: Products with minor differences (color, size) should have one main canonical product URL to avoid duplicate content.
• Tracking Parameters: Marketing query params (like ?utm_source=...) should be stripped out. Using route.path automatically omits these. Useful for product detail pages.

EU24-WEB Implementation

Summary

• Implement canonical tags with useRequestURL() + useRoute() inside useHead().
• Works on SSR render and client-side navigation.
• Ensures search engines index the correct version of each page.
• Helps consolidate SEO signals for e-commerce sites with filters, variants, and tracking params.

References

• Canonical Tags Introduction
• Canonical Tags In Ecommerce
• Nuxt-3 Head