# Missing canonical link in Vue

> How to fix missing canonical link in Vue — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `canonical-missing` · Severity: info_

The same content is often reachable at several URLs — with and without a trailing slash, with query or tracking params, at www and apex. Without `<link rel="canonical">`, search engines may treat these as separate pages and split ranking signals between them. AI-built apps generate lots of parameterised and duplicated routes, making this common.

## The fix for Vue

Add a link entry to `useHead`.

```ts
useHead({ link: [{ rel: 'canonical', href: 'https://acme.com/pricing' }] })
```

### Steps

1. Pick one canonical URL convention (host, trailing slash) and apply it everywhere
2. Emit `<link rel="canonical">` with the clean absolute URL on every page
3. Point duplicate/parameterised variants at the same canonical

## How VibeCheck detects it

The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Missing canonical link`
- **Threshold:** no <link rel="canonical">

## FAQ

### Should a page canonicalise to itself?

Yes. The preferred version should carry a self-referencing canonical. Duplicate variants then point at that same URL.

### Does canonical fix duplicate content penalties?

There is no “penalty” per se, but canonical consolidates ranking signals onto one URL so duplicates do not compete with each other.

### Absolute or relative canonical URL?

Use absolute URLs. They are unambiguous to crawlers. In Next.js a relative path is fine because `metadataBase` makes it absolute at build time.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-canonical-url.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-canonical-url. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt