<title>、<meta name="description">、<meta name="viewport">、<link rel="canonical"> 是搜索引擎明确抓取并用于排序、展示、索引的四大核心标签，其中 title 影响排名与展示，description 提升点击率但不参与排名，canonical 解决重复内容归属，viewport 保障移动友好性以满足索引前提。
<title>、<meta name="description">、<meta name="viewport">、<link rel="canonical"> 这四个是当前搜索引擎（Google、Bing 等）明确抓取并用于排序、展示、索引的核心标签。其他如 keywords 已基本被忽略，author 或 robots 属于辅助控制类，不直接影响排名。
title 标签：搜索结果中第一个可见的权重项
搜索引擎在标题栏、搜索结果页（SERP）和书签中都优先提取 <title> 内容。它不是“可有可无”的装饰，而是页面主题的最强信号。
- 必须唯一且准确反映当前页面内容，避免全站统一写法（如“首页 - XX公司”）
- 长度控制在 50–60 字符（含空格），超长会被截断，中文建议 ≤30 字
- 关键词尽量前置，比如
<title>咖啡豆选购指南｜精品手冲入门 - CoffeeLover</title>比倒置更有效 - 禁止堆砌，如
<title>咖啡 豆 咖啡豆 手冲 咖啡机 咖啡教程</title>反而触发质量怀疑
meta description：控制搜索摘要，不参与排名但影响点击率
<meta name="description" content="..."> 不是排名因子，但 Google 会直接用它生成搜索结果下的摘要（有时会替换为正文片段）。写得好，能显著提升 CTR。
- 每页独立撰写，长度建议 120–155 字符，确保关键信息在前 100 字内出现
- 避免泛泛而谈，例如“本网站提供各种咖啡相关服务”，应具体如“详解埃塞俄比亚耶加雪菲水洗豆风味特征、冲煮参数与保存方法”
- 不要重复
<title>文字，也不要用标点堆砌或无意义符号 - 如果未设置，Google 可能从正文自动摘取，但不可控
link rel="canonical"：解决重复内容的归属问题
当同一内容可通过多个 URL 访问（如带/不带 www、含参数分页、HTTP/HTTPS 混用），<link rel="canonical" href="https://example.com/coffee-beans"> 明确告诉搜索引擎“以这个为准”，防止权重分散或被判定为复制内容。
立即学习“前端免费学习笔记（深入）”；
- 必须指向一个真实可访问、返回 200 状态码的 URL
- 不能指向 301 跳转后的地址，也不能是相对路径（除非全站 base 严格一致）
- 动态页面（如商品列表页第2页）慎用 self-referencing canonical，容易误伤分页收录
- 与服务器端 301 重定向配合使用效果更稳，但二者逻辑不同：301 是强制跳转，canonical 是“建议首选”
meta viewport 和结构化数据虽不直连 SEO，但间接决定是否被索引
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 本身不被 Google 当作排名信号，但它影响移动友好性——而“移动可用性”是索引前提。没有它，页面可能被降权甚至拒收。
- 缺失 viewport 标签时，Google 的移动抓取器常将页面渲染为桌面缩放模式，导致内容溢出、文字过小，触发“非移动友好”警告
- 结构化数据（如 JSON-LD）不放在
<head>就无法被 Google Rich Results Test 工具识别，也就拿不到富媒体展示（星级、价格、面包屑等） - 这两者都不提升“关键词匹配度”，但决定了你的页面有没有资格进入 SERP 的高质量展示队列
真正容易被忽略的，是 canonical 的动态生成逻辑和 description 的页面粒度控制——很多人用 CMS 模板批量填充，结果所有详情页 description 都一样，等于主动放弃搜索摘要的差异化表达机会。
