必须写在内且仅支持纯文本，直接编辑html文件中标签内容即可；需服务端渲染，客户端js修改无效，应填唯一、关键词前置、动词开头的120–160字符自然语句。
<title></title> 必须写在 里，且只接受纯文本；<meta name="description"> 必须服务端渲染进 HTML，客户端 JS 修改无效。
VS Code 里怎么改网页标题？直接编辑 <title></title> 标签
你不是在写 Word 文档，别想着点“标题样式”按钮。打开 HTML 文件，在 区域找到 <title></title> 标签，直接改里面的内容就行：
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>产品介绍｜XX科技</title>
- 确保它在
<meta charset="utf-8">之后、之前 - 别写成
<title><h1>首页</h1></title>—— HTML 不解析嵌套标签，只会原样显示字符 - 避免全角空格、零宽空格（U+200B）、不可见控制符，这些会导致标题栏显示异常或 SEO 截断错位
- 长度建议 ≤60 字符（含空格），微信分享和移动端标签页对长度更敏感
<meta name="description"> 填什么？每页唯一 + 开头带关键词 + 动词驱动
搜索引擎不靠它排名，但它就是你在搜索结果里的“第一眼广告”。填错等于把流量主动让给别人。
- 不能复制正文第一段，也不能全站共用同一段（比如“欢迎访问我们的网站”）
- content 值必须是自然语句，开头嵌入目标关键词，例如：
content="掌握 Next.js useHead 动态设置 title 和 description 的完整流程，修复 SSR 下 SEO 抓取失败问题" - 长度严格控制在 120–160 字符，超长会被截断加省略号，移动端尤其明显
- 别写“本网站提供……”，用动词开头：“了解”“避免”“修复”“配置”“生成”
为什么 document.title = 'xxx' 没用？爬虫根本看不到
这是单页应用（SPA）最常踩的坑：以为在 React 或 Vue 里调用 document.title = '新标题' 就万事大吉。错。
- Googlebot（尤其旧版）抓取时只读首屏 HTML，不等 JS 执行完
- 初始 HTML 中的
<title></title>是空的或固定占位符（如<title>My App</title>），爬虫看到的就是这个 - 即使用了
react-helmet或vue-meta，若没开启 SSR/SSG，它们只是操作 DOM，对首次抓取无意义 - Next.js 请用
useHead()，Nuxt 用组件，确保服务端生成时真实注入
Meta 标签顺序和位置有影响吗？有，而且很关键
<meta charset="utf-8"> 必须是 中第一个标签，<meta name="viewport"> 紧随其后。
- charset 放错位置可能触发浏览器重排字符集，导致中文乱码、FOIT（字体闪烁）甚至页面白屏
- viewport 缺失或位置靠后，iOS Safari 默认以 980px 渲染，移动端页面缩成一团、文字糊成一片
- 禁止用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">替代，兼容性差、解析慢 - 别写
user-scalable=no—— Google 已明确将其视为可访问性障碍，会拖累 Core Web Vitals 评分
最容易被忽略的是：标题和 description 是否在浏览器标签页、微信对话窗、收藏夹三处完全一致；图标是否在 iOS 主屏幕、PWA 安装界面、桌面标签页都正常加载——这些地方不会报错，但失效了你也看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
