需核心词前置、50–60字符、自然主谓宾结构；要120–155字符、行动导向、每页唯一；须绝对url、动态生成、避免指向错误页面。
怎么写才不被搜索引擎截断或降权
标题超长、关键词堆砌、动态页面漏渲染，是
失效的三大主因。浏览器标签页和搜索结果只显示前 50–60 字符，超出部分一律省略为“…”；Google 也会对模板化、无差异的标题（如每页都带“- 官方网站”）打低分。<p>实操建议：</p>
<ul>
<li>
<code><title></title></code>内容必须按「核心词前置 + 自然主谓宾结构」组织，例如<code><title>HTML title 标签 SEO 写法 - 前端实操指南</title></code>优于<code><title>前端实操指南 - HTML title 标签 SEO 写法</title></code>
</li>
<li>字符数用<code>title.length</code>检查，注意空格和中文都算 1 字符；移动端尤其敏感，超过 60 就大概率被切</li>
<li>CMS 或 SSR 模板里禁用硬编码，改用变量插值，比如<code><title>{{ page.title }} | {{ site.name }}</title></code>，避免首页/列表页/详情页共用同一段占位文字</li>
<li>单页应用（React/Vue）务必在服务端或静态生成阶段注入<code><title></title></code>，不能只靠<code>document.title = 'xxx'</code>客户端更新——旧版爬虫不等 JS 执行完就走了</li>
</ul>
<h3>为什么<meta name="description">写了却没出现在搜索结果里</h3>
<p>因为 Google 明确不把它当排名因子，且有完全自主的摘要生成逻辑：它可能忽略你写的<code>meta name="description"</code>，直接从正文抽一段更匹配用户 query 的句子。但如果你留空、超长、堆砌或写成“欢迎访问…”，它反而更可能放弃使用，导致摘要不可控。</p>
<p>实操建议：</p>
<ul>
<li>每页单独写，长度控制在 120–155 字符（含空格），开头嵌入主关键词，比如<code><meta name="description" content="详解 HTML <link rel=" canonical> 标签的作用、设置方法及常见误用场景..."></code>
</li>
<li>禁用引号、破折号、特殊符号（如 »、•），部分爬虫解析异常；也别写“专业提供”“权威解读”这类无效话术</li>
<li>右键「查看网页源代码」，搜索<code><meta name="description">，确认内容是 HTML 响应体里原生存在的，不是 JS 运行后插入的</code>
</li>
<li>Next.js 用户优先用<code>generateMetadata</code> API，Nuxt 用<code>useSeoMeta</code>，而非<code>mounted</code>钩子改<code>document</code>
</li>
</ul>
<h3>
<link rel="canonical">设错比不设还危险</h3>
<p>设成相对路径、指向 404、指向跳转中间页，或多个页面互相 canonical，都会让搜索引擎困惑，轻则收录混乱，重则把权重分给错误页面，导致主页面降权。尤其在参数页（如<code>/article?id=123</code>）、www 与非 www、HTTP/HTTPS 混用时，问题最典型。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9431" title="Plan Family Law Practice Local Seo Faq Cluster"><img
src="https://img.php.cn/upload/skill/000/000/081/179258960255454.jpg" alt="Plan Family Law Practice Local Seo Faq Cluster" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9431" title="Plan Family Law Practice Local Seo Faq Cluster" class="overflowclass">Plan Family Law Practice Local Seo Faq Cluster</a>
<p class="overflowclass">调研本地问题并归类，为家庭法业务撰写可直接使用的常见问题（FAQ）文案，适用于本地SEO工作。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9431" title="Plan Family Law Practice Local Seo Faq Cluster" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>实操建议：</p>
<ul>
<li>
<code>href</code>值必须是**绝对 URL**，协议、域名、路径全写，例如<code><link rel="canonical" href="https://example.com/article/123"></code>，不能写<code>/article/123</code>
</li>
<li>动态页面（如 CMS、SSR）禁止写死，需根据当前请求 URL 实时计算并输出；Next.js 中<code>getServerSideProps</code>或<code>generateMetadata</code>里必须传入真实路径</li>
<li>页面本身就是规范页时，<code>href</code>应指向自己；不要指向带 utm 参数的分享链接，也不要指向 staging 环境（如<code>staging.example.com</code>）</li>
<li>检查方式：打开 Chrome DevTools → Network → 刷新 → 查看响应 HTML 中<code><link rel="canonical">是否生效，且<code>href</code>值与当前地址栏 URL 一致</code>
</li>
</ul>
<h3>哪些 meta 标签现在基本可以忽略</h3>
<p><code>meta name="keywords"</code> 已被所有主流搜索引擎弃用多年，写不写都不影响索引或排名；<code>meta name="robots"</code> 在绝大多数公开页面也不需要显式声明，因为默认就是<code>index, follow</code>；<code>meta http-equiv="refresh"</code> 会触发强制跳转，已被视为过时且不利于 SEO 和用户体验。</p>
<p>真正要盯住的只有三个：<code><title></title></code>、<code><meta name="description"></code>、<code><link rel="canonical"></code>。其他像 Open Graph 或 Twitter Card 是为了社交平台分享效果，不属于搜索引擎抓取范畴；而<code><meta charset="utf-8"></code>和<code><meta name="viewport"></code>属于基础可用性保障，不是 SEO 标签，但缺失会影响 LCP/CLS 等 Core Web Vitals，间接拖累排名。</p>
<p>容易被忽略的一点：图片<code>alt</code>属性虽不参与传统 SEO 排名，但它是图像被 Google Images 收录的唯一依据，也是无障碍访问强制要求——漏掉一张图的<code>alt</code>，等于主动放弃一次长尾流量入口和合规风险缓冲。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
