需唯一、关键词前置、55–60字符内；meta description是点击广告位，145–155字符、动词+数字+结果导向；charset必须为head首个标签，viewport必备；canonical须用绝对url指向规范页。
title 标签直接决定搜索结果里的第一眼印象
搜索引擎把 <title></title> 当作页面最权威的主题声明，不是“可能相关”，而是“就认这个”。它出现在 SERP 顶部、浏览器标签页、收藏夹里，用户和爬虫都靠它快速判断是否点进来。
常见错误现象：标题全站统一写成“首页 | 公司名称”，或堆砌关键词如“seo优化_网站排名_关键词排名工具_SEO教程”；电商列表页用“第2页”这种无意义后缀。
- 长度控制在 55–60 字符内，超长会被截断——Google 实际按像素宽度裁切，中文一般别超 30 字
- 核心关键词必须前置，
“Python 爬虫入门：requests + beautifulsoup 实战”比“实战：Python 爬虫入门——requests + BeautifulSoup”更容易被匹配到搜索意图 - 每个页面的
<title></title>必须唯一，CMS 自动生成时要防模板漏填，比如产品页没填型号就默认输出“商品详情”
meta description 不影响排名，但左右你有没有人点
<meta name="description"> 是你在搜索结果里唯一的“广告位”。Google 不用它排序，但会直接拿它当摘要展示——除非它觉得页面正文更贴切，那就弃用你的描述，换一段它自己扒的。
使用场景：内容型站点（博客、文档、教程）收益最大；纯交互型页面（登录页、后台面板）可设为 noindex，不写 description 也无妨。
立即学习“前端免费学习笔记（深入）”；
- 长度建议严格卡在 145–155 字符，含空格。太短（160）会被截断且破坏语义
- 动词+数字+结果导向，比如
“学会用 CSS Grid 布局响应式卡片组件，3 步实现等高列，兼容 chrome/firefox/safari” - 避免重复 title 内容，也不要用“欢迎访问…”“本网站提供…”这类无效开场白
viewport 和 charset 是移动端 SEO 的隐形门槛
没设 <meta charset="UTF-8">，中文页面大概率乱码；没设 <meta name="viewport">，手机端会以桌面视口渲染，文字小到无法阅读——这两项不是“加分项”，是“不过线就出局”的硬指标。
性能影响：charset 放错位置（比如不在 最开头）会导致浏览器重排解析；viewport 缺失会让 Google 视为非移动友好，直接影响移动搜索排名权重。
-
<meta charset="UTF-8">必须是中第一个标签，早于所有<title></title>和其他<meta> -
<meta name="viewport" content="width=device-width, initial-scale=1.0">足够应对绝大多数响应式站点；加user-scalable=no反而伤害可访问性，不推荐 - 多语言站点若混用编码（如 UTF-8 页面引入 GBK 外部 js），乱码风险极高，需统一构建流程校验
canonical 标签解决的是“我到底算哪个 URL”这个信任问题
当同一内容能通过多个地址访问（比如带/不带 www、http/https、带参数的分享链接、分页列表），搜索引擎会困惑：该索引谁？权重怎么分？不明确指定，轻则分散排名，重则被判定为复制内容降权。
典型误用：把 canonical 指向首页，或指向 301 跳转后的 URL（应指向最终规范 URL，而非跳转链中的中间地址）。
- canonical 必须是绝对 URL，例如
<link rel="canonical" href="https://example.com/blog/html-meta-seo"> - 分页场景下，第 2 页及之后的页面 canonical 应指向自身，而不是第 1 页（除非你明确想让所有分页流量归集到首页）
- 服务端渲染（SSR）或静态生成（SSG）站点，canonical 需随路由动态生成，硬编码会出错
真正难的不是写对这几个标签，而是让它们在整站生命周期里保持一致——CMS 模板、前端路由、CDN 缓存、A/B 测试分支，任何一个环节漏掉或覆盖了 meta 逻辑，前面写的全白费。