head 里的 title 是整页唯一的必需标签之一:浏览器标签页、收藏夹、历史记录、分享卡片都显示它,更重要的是它是搜索结果里最醒目的蓝色大标题,点击率的第一决定因素。写法上把核心关键词放前面、品牌名放后面,控制在 30 个汉字以内,超出会被搜索结果截断显示省略号。它同时也是分享卡片、收藏夹与社交预览的显示文字,值得反复打磨。
title 的内容直接影响 SEO 排名与点击率,属于权值最高的标签之一。常见错误是全站共用一个 title(每个页面其实是独立机会)、堆砌关键词(被算法判定为作弊)、或者写得像口号而不是搜索词。用户搜索时输入的是需求而非品牌,所以标题要回答意图:价格、教程、对比、解决方案,这几个字比自夸式文案有效得多。改版时优先改 title,是性价比最高的搜索优化动作。
<style> .mock-tab { background: #dee5ec; border-radius: 8px 8px 0 0; padding: 6px 14px; display: inline-block; border: 1px solid #c3ccd6; border-bottom: none; } .mock-page { border: 1px solid #c3ccd6; border-radius: 0 8px 8px 8px; padding: 14px; } </style> <head> 中这样写: <pre style="background:#f4f6f8;padding:10px;border-radius:6px"><title>CSS 入门教程:从零掌握网页样式 | 前端 Wiki</title></pre> <p>渲染在浏览器标签页与搜索结果中的效果示意:</p> <div> <span class="mock-tab">CSS 入门教程:从零掌握网页样式 | 前端 Wiki</span> <div class="mock-page">页面正文内容……</div> </div>