HTML页面SEO核心是<title>、<meta description>和<link canonical>三标签：标题需唯一、关键词前置、50–60字符；描述需每页定制、120–155字符、自然语言开头嵌主词；canonical须用绝对URL动态生成，解决重复内容。
HTML <title> 标签必须唯一且精准
页面标题是搜索引擎判断内容主题的第一依据，也是用户在搜索结果里看到的点击入口。写得模糊、堆砌关键词或重复使用同一标题，会直接降低点击率和排名权重。
实操建议：
-
<title>内容控制在 50–60 个字符（含空格），确保在搜索结果中不被截断 - 核心关键词前置，比如电商商品页优先写「无线蓝牙耳机｜降噪旗舰｜XX品牌」，而非「XX品牌官方旗舰店｜无线蓝牙耳机」
- 每个页面的
<title>必须唯一，CMS 模板里避免硬编码固定值，用动态变量填充，如<title>{{ product.name }}｜{{ site.name }}</title> - 不要用「首页」「关于我们」这类无信息量的词当主标题；首页可写「前端开发工具与实战指南｜CodeCraft」
<meta name="description"> 不是 SEO 排名因子，但影响点击率
Google 明确表示 description 不参与排名计算，但它常被直接用作搜索结果摘要。写得差，再好的内容也没人点。
常见错误现象：留空、复制正文前几句、堆砌关键词、超过 155 字被截断显示“…”
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每页单独撰写，长度控制在 120–155 字符（含空格），用自然语言描述本页能解决什么问题
- 开头嵌入主关键词，比如「
<meta name="description" content="详解 HTML <link rel="canonical"> 标签的作用、设置方法及常见误用场景，附 Nginx 和 Next.js 配置示例。">」 - 避免使用引号、特殊符号（如 »、•）——部分爬虫解析异常；也别写「欢迎访问…」「专业提供…」这类无效话术
<link rel="canonical"> 解决重复内容最有效的手段
URL 参数不同（如 /article?id=123 和 /article/123）、HTTP/HTTPS 混用、www 与非 www 版本共存，都会让搜索引擎认为是多个页面，稀释权重。
不设 canonical 或设错，轻则收录混乱，重则主页面被降权。
实操建议：
- 所有可能产生重复内容的页面，都应在
<head>中添加<link rel="canonical" href="https://example.com/correct-url/"> - href 值必须是**绝对 URL**，且协议、域名、路径全部写全；相对路径（如
/article/123）可能被解析成当前页地址，导致指向错误 - 服务端渲染（SSR）或静态站点生成（SSG）时，务必动态输出 canonical，而不是写死；Next.js 用户注意
getStaticProps中需传入正确路径 - 如果页面本身是规范页，
href应指向自己；不要指向 404 页面或跳转中的中间页
<meta charset>、<meta name="viewport"> 和 <link rel="icon"> 是基础但常被漏掉的三项
这三项不直接影响关键词排名，但缺失会导致页面渲染异常、移动端适配失败、收藏图标不显示，间接影响用户体验和跳出率——而 Google 已将 Core Web Vitals 纳入排名信号。
容易踩的坑：
-
<meta charset>必须放在<head>最前面，否则早期解析的文本可能乱码；写成<meta charset="utf8">（缺横线）是常见拼写错误 -
<meta name="viewport" content="width=device-width, initial-scale=1">缺失时，移动端会以桌面宽度渲染，文字极小，用户需双指放大——Google 把这算作严重 UX 问题 -
<link rel="icon">建议同时提供.ico和.svg两种格式，且href使用绝对路径；用相对路径时，子目录页可能加载失败
真正难的不是加标签，而是让每个页面的 <title>、<meta name="description">、<link rel="canonical"> 都随内容动态准确生成——模板逻辑一错，几百页就全错。手动生成只适合单页站，稍大点的项目必须靠数据驱动渲染。
