canonical-tag

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO Technical: Canonical

SEO技术：Canonical规范URL

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.

指导配置Canonical标签以整合重复内容并声明首选URL。

调用时机：首次使用时，如有必要，先用1-2句话说明此技能的覆盖范围及其重要性，再提供主要输出内容。后续使用或用户要求跳过介绍时，直接输出主要内容。

Scope (Technical SEO)

适用范围（技术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与HTTP；www与非www；带尾斜杠（/page 与 /page/）——选择其中一个版本，将其他版本通过301重定向
重复内容：使用Canonical标签；整合内容并301重定向至首选URL

Initial Assessment

初步评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read it for site URL and language structure.

Identify:

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

首先检查产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，请读取其中的站点URL和语言结构信息。

需明确：

站点URL：基础域名
重复内容场景：多语言、查询参数、分页、备用URL
开发框架：Next.js、React、静态站点等

Canonicalization Methods (Choose by Scenario)

规范URL化方法（按场景选择）

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.

方法	适用场景	优势
301重定向	首选方案；服务器可执行重定向	最强效——永久重定向
Canonical标签	无法执行重定向的场景（如参数、分页）	效果显著——HTML层面的信号
robots.txt	屏蔽非规范路径	效果较弱——仅为建议性设置

HTTP→HTTPS、www变体、尾斜杠问题推荐使用301重定向。参数、分页、UTM跟踪码场景推荐使用Canonical标签。

When to Use Canonical

何时使用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

多语言站点：每个语言版本都有自己的Canonical标签；需搭配hreflang标签与Canonical标签使用
同内容多URL：参数、分页、跟踪参数、www与非www、带尾斜杠与不带尾斜杠（/page 与 /page/）
自引用设置：Canonical标签应指向自身或首选版本
避免链式Canonical：A→B→C的链式设置无效

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

规则	说明
绝对URL	需包含 `https://`
一致性	必须与当前页面URL或选定的首选版本一致
禁止链式设置	A→B→C的链式设置无效

Implementation Patterns

实现方式示例

Next.js (metadata)

Next.js（元数据方式）

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",
    },
  },
};

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（通用方式）

html

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