必须每页唯一、关键词前置、50–60字符;需手写、120–155字符、首句嵌主词;须用绝对url动态生成,三者任一出错均易致降权或索引异常。

<title></title> 必须每页唯一、关键词前置、50–60 字符;<meta name="description"> 要手写、120–155 字符、自然语句开头嵌主词;<link rel="canonical"> 必须用绝对 URL 动态生成——这三件事做错任意一个,页面就大概率被降权或不被准确索引。
如何设置不被截断也不堆砌的 <title></title>
Google 搜索结果里标题超过 60 字符会被截断成“…”;放次要词在前,核心词靠后,用户根本看不到重点。CMS 模板里写死 <title>首页</title> 是最常见错误。
-
<title></title>内容严格控制在 50–60 字符(含空格),可用浏览器开发者工具的 Elements 面板实时测长 - 核心关键词必须前置,比如商品页写
<title>无线蓝牙耳机|主动降噪|XX品牌旗舰款</title>,而非<title>XX品牌官方旗舰店|无线蓝牙耳机</title> - 服务端渲染(如 Next.js)中,务必从数据上下文注入,例如
<title>{{ post.title }} | {{ site.name }}</title>,禁止硬编码 - 避免使用「关于我们」「联系我们」这类无信息量词;首页可写
<title>前端开发实战指南 | CodeCraft</title>
为什么 <meta name="description"> 不能自动生成
这个标签不参与排名计算,但 Google 经常直接把它当搜索结果摘要。留空、复制正文前两句、堆关键词、超长或带特殊符号,都会导致摘要显示异常,点击率暴跌。
- 每页单独手写,长度 120–155 字符(含空格),可用在线字符计数器验证
- 第一句话必须嵌入主关键词,例如:
<meta name="description" content="详解 HTML <link rel=" canonical> 标签的作用、设置方法及 Nginx/Next.js 配置示例。"> - 禁用引号(“”)、破折号(—)、项目符号(•)、箭头(»)等非 ASCII 符号,部分爬虫解析失败
- 别写「欢迎访问」「专业提供」「一站式服务」这类无效话术;聚焦“本页解决什么问题”
什么时候必须加 <link rel="canonical">,怎么加才对
URL 参数不同(/article?id=123 vs /article/123)、HTTP/HTTPS 混用、www 与非 www 共存,都会让搜索引擎当成多个页面,权重被稀释甚至主页面被降权。
- 所有可能产生重复内容的页面都必须加,包括分页、筛选页、UTM 参数页
-
href值必须是**绝对 URL**:完整协议 + 域名 + 路径,例如<link rel="canonical" href="https://example.com/html-seo-guide"> - 相对路径(如
/html-seo-guide)或协议相对路径(如//example.com/html-seo-guide)会导致解析错误,指向当前页 - SSR/SSG 场景下,canonical 必须随页面动态输出;Next.js 用户注意
getStaticProps或generateMetadata中传入真实路径
真正容易被忽略的是:<main></main> 标签没包裹主体内容、<img> 的 alt 留空或写“图片”、<h1></h1> 缺失或出现多次——这些不是“加分项”,而是爬虫判断“这页有没有正经内容”的基本依据。结构一乱,再准的 <title></title> 也白搭。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











