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