页面标题和meta description必须服务端渲染进html head，客户端js更新无效；字符数需严格控制（title 50–60，description 120–160），且每页唯一、动态生成、语义准确。
页面标题和 meta description 必须在服务端渲染完成时就写进 HTML 的 里，客户端 JS 更新无效——Googlebot（尤其旧版）不等 JS 执行完就抓取。
title 标签必须在首屏 HTML 中静态存在
纯 React/Vue SPA 如果只靠 document.title = 'xxx' 设置标题，初始 HTML 里的 <title></title> 是空的或固定占位符（如 “My App”），爬虫看到的就是这个。即使你用了 react-helmet 或 vue-meta，若没走 SSR/SSG，它只是操作 DOM，对首次抓取无意义。
- Next.js/Nuxt：用
useHead()或Head组件，确保服务端生成时注入真实值 - Hugo/Jekyll 静态站：在模板中直接写
<title>{{ .Title }} | {{ .Site.Title }}</title>，别留空变量 - PHP/Node 模板：标题字段必须从路由或数据上下文动态拼接，避免硬编码
<title>首页</title> - 字符数控制在 50–60 字符（含空格），超长会被截断；移动端标签页只显示前半段
meta description 要每页唯一且主动重写
复制正文第一段、全站共用同一段描述、或留空，是三个最常见错误。Google 不用它排名，但它就是你在搜索结果里的“广告文案”，直接影响点击率。
- 长度严格控制在 120–160 字符（含空格），
description内容过短会显得不专业，过长被截断加省略号 - 开头嵌入目标关键词，但必须是自然句式，比如：“教你用
useHead动态设置 Next.js 页面 title 和 description，解决 SEO 抓取失败问题。” - 避免“本网站提供……”“欢迎访问……”这类无信息量开场；用动词驱动，如“掌握”“了解”“避免”“修复”
- CMS 如 WordPress，确认主题或插件（如 Yoast）没把所有文章 description 回退到默认摘要
charset 和 viewport 必须放在 head 最前面
<meta charset="utf-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1"> 的位置不是“随便放”，它们影响浏览器解析行为和渲染性能。
-
<meta charset="utf-8">必须是中第一个标签，否则可能触发浏览器重排字符集，导致中文乱码或 FOIT（字体闪烁） -
viewport紧随其后，iOS Safari 默认以 980px 渲染桌面宽度，没它会导致移动端页面缩得太小、文字模糊 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">替代，它兼容性差，且比charset属性慢 - 禁止写
user-scalable=no，Google 已明确将其视为可访问性障碍，影响 Core Web Vitals 评分
canonical 和 robots 要按 URL 状态动态生成
重复内容（如带参数的 URL、分页、测试环境）不处理 canonical，容易被搜索引擎判为低质或分散权重。
- 每个页面的
<link rel="canonical" href="https://example.com/page">必须是绝对 URL，且指向该内容的规范版本 - staging 环境或本地开发服，统一加
<meta name="robots" content="noindex, nofollow">，防止被误收录 - 分页列表页（如
/blog?page=2）应设rel="canonical"指向第一页，或用rel="next"/rel="prev"声明关系 - 不要在生产环境漏掉 canonical；也不要给所有页面都写同一个 href，那等于没写
真正难的不是写对单个标签，而是让整套模板在不同路由、不同数据状态、不同部署环境下，始终输出语义准确、长度合规、URL 唯一的 <title></title> 和 <meta name="description"> —— 这需要模板逻辑兜底，而不是靠人工检查每一页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
