Canonical Tag

# SEO Technical: Canonical

Guides canonical tag configuration to consolidate duplicate content and declare preferred URLs.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope (Technical SEO)

- **Duplicate site versions**: HTTPS vs HTTP; www vs non-www; trailing slash (/page vs /page/) — choose one, 301 redirect others
- **Duplicate content**: Canonical tags; consolidate and 301 to preferred URL
- **HTTPS**: SSL/TLS; secure connection; ranking signal since 2014

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for site URL and language structure.

Identify:
1. **Site URL**: Base domain
2. **Duplicate scenarios**: Multi-language, query params, pagination, alternate URLs
3. **Framework**: Next.js, React, static, etc.

## Canonicalization Methods (Choose by Scenario)

| Method | When | Strength |
|--------|------|----------|
| **301 redirect** | Preferred; server can redirect | Strongest — permanent redirect |
| **Canonical tag** | Cannot redirect (e.g. params, pagination) | Strong — HTML signal |
| **robots.txt** | Block non-canonical paths | Weak — advisory only |

Use 301 for HTTP→HTTPS, www variants, trailing slash. Use canonical for params, pagination, UTM.

## HTTPS & Security

HTTPS is a ranking signal ([Google, 2014](https://developers.google.com/search/blog/2014/08/https-as-ranking-signal)). Users and crawlers should access only the HTTPS version.

| Requirement | Action |
|-------------|--------|
| **SSL/TLS certificate** | Install valid certificate; use Let's Encrypt for free |
| **301 redirect** | HTTP → HTTPS; all HTTP requests redirect to HTTPS |
| **Mixed content** | No HTTP resources on HTTPS pages; fix mixed content warnings |
| **HSTS** | Optional; `Strict-Transport-Security` header for repeat visitors |

**WWW vs non-WWW**: Choose one preferred version; 301 redirect the other. See canonical rules above.

## When to Use Canonical

- **Multi-language**: Each language version has its own canonical; use **hreflang** with canonical
- **Same content, multiple URLs**: Params, pagination, tracking params, www vs non-www, trailing slash (/page vs /page/)
- **Self-referencing**: Canonical should point to self or the preferred version
- **Avoid chain canonical**: A→B→C is invalid

## Rules

| Rule | Note |
|------|------|
| **Absolute URL** | Include `https://` |
| **Consistency** | Must match current page URL or the chosen preferred version |
| **No chains** | A→B→C is invalid |

## Implementation Patterns

### Next.js (metadata)

```tsx
export const metadata = {
  alternates: {
    canonical: "https://example.com/page-slug",
    languages: {
      zh: "https://example.com/zh/page-slug",
      en: "https://example.com/page-slug",
      "x-default": "https://example.com/page-slug",
    },
  },
};
```

### HTML (generic)

```html
<link rel="canonical" href="https://example.com/page-slug" />
```

### Server Redirects (301)

**Apache (.htaccess)**:
```apache
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
```

**Nginx**:
```nginx
return 301 https://$host$request_uri;
```

## Relationship to Other Technical SEO

- **Sitemap**: URLs in sitemap should match canonical
- **IndexNow**: Submit canonical URLs

## Output Format

- **Canonical URL** for each page type
- **Implementation** (metadata or HTML)
- **Multi-language** setup if app