# Document does not have a valid rel=canonical: what it means and how to fix it

**Audit ID:** `canonical` · **Category:** SEO

<!--QA-->
> **Quick answer:** This audit fails when the canonical link is missing, relative, or points to a redirect. Add one self-referential, absolute https rel=canonical per page that returns a 200 status. It consolidates duplicate-URL ranking signals so Google indexes and ranks the URL you actually want.
<!--/QA-->

Lighthouse fails this audit when your page is missing a `<link rel="canonical">`, or has one that is malformed, relative, points to a redirect, or conflicts with other signals. The canonical tag tells Google which URL is the authoritative version of a page when several URLs serve similar content.

## TL;DR

- **What:** No valid `<link rel="canonical">` in `<head>`, or it points somewhere Google can't trust.
- **Why it matters:** Without it, duplicate URLs (tracking params, trailing slashes, http vs https, www vs apex) split ranking signals and Google may index the wrong one.
- **Fix:** Add one self-referential, absolute, `https` canonical per page that returns `200`.

## What does the rel=canonical audit check?

Lighthouse verifies that the page has at most one `rel=canonical` link, that it is a valid absolute URL, and that it is not obviously broken (empty, relative-only, or pointing at a non-indexable target). It does not judge whether the *chosen* canonical is strategically correct. That part is on you.

## Why does the canonical tag matter for SEO?

Most sites serve the same content under several URLs without realizing it:

- `https://example.com/page` and `https://example.com/page/`
- `?utm_source=...` and other tracking parameters
- `http://`, `https://`, `www.`, and apex variants
- Paginated or filtered views of the same list

Google treats each as a separate URL. Ranking signals (links, engagement) get split across them, and Google may index a parameter-laden variant instead of your clean URL. A correct canonical consolidates all of that into one page.

## How do I add a valid canonical tag?

Add a self-referential canonical to `<head>`:

```html
<head>
  <link rel="canonical" href="https://example.com/audits/canonical-tag" />
</head>
```

Rules that make a canonical valid and effective:

- **Absolute URL.** Use the full `https://` URL, not `/audits/canonical-tag`.
- **Self-referential by default.** Each page points at its own preferred URL. Only point elsewhere when the page is a genuine duplicate.
- **Resolve to 200.** The canonical target must be indexable: no redirect, no 404, not blocked by robots.
- **One per page.** Multiple conflicting canonicals make Google ignore all of them.
- **Consistent with other signals.** The canonical, the sitemap URL, internal links, and any `hreflang` entries should all agree.

## What are common canonical mistakes?

- **Canonical points to a redirect.** If `/page` canonicalizes to `/page/` and `/page/` 301s back, Google sees a loop and ignores it.
- **Relative URLs.** Some frameworks emit `href="/page"`. Always render the absolute URL.
- **Every page canonicalizing to the homepage.** A frequent CMS misconfiguration. It tells Google your inner pages don't exist.
- **Canonical to a `noindex` page.** Contradictory: you're saying "rank this" and "don't index this."
- **Mismatched protocol or host.** Canonical says `http://www.` while the live page is `https://` apex.
- **Parameter URLs canonicalizing to themselves.** `?utm_source=twitter` should canonicalize to the clean URL, not to the tracked one.

## How do I set the canonical in Next.js, WordPress, or Astro?

### Next.js (App Router)

```jsx
export const metadata = {
  alternates: { canonical: 'https://example.com/audits/canonical-tag' },
};
```

### Next.js (Pages Router)

```jsx
import Head from 'next/head';

<Head>
  <link rel="canonical" href={`https://example.com${router.asPath.split('?')[0]}`} />
</Head>
```

### WordPress

Yoast SEO and Rank Math emit a self-referential canonical automatically. Do not also hardcode one in the theme: two tags conflict. Override per-page only for genuine duplicates.

### Astro

```astro
---
const canonical = new URL(Astro.url.pathname, Astro.site).href;
---
<link rel="canonical" href={canonical} />
```

## How do I verify the canonical is valid?

1. Re-run Lighthouse: the audit should pass.
2. View source (Cmd+U) and confirm exactly one `rel="canonical"` with an absolute `https` URL.
3. Open the canonical URL directly: it must return `200`, not redirect.
4. Google Search Console → URL Inspection → check "User-declared canonical" matches "Google-selected canonical".

## Related audits

- [Document does not have a meta description](/audits/meta-description), the search snippet
- [Document does not have a title element](/audits/document-title), the primary SEO signal
- [Does not use HTTPS](/audits/use-https), protocol consistency feeds canonical correctness

---

Audit your URL at https://lighthouse-md.com.
