HTML title 标签：网页标题、长度与 SEO

title 标签放在哪里

每个页面都需要在 <head> 里放一个 <title> 元素。它的文本就是页面名称，浏览器把它显示在标签页和书签中，搜索引擎通常把它显示为搜索结果的标题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

标题本身从不出现在页面内容里。这个预览运行在 Coddy 文档页面内部，所以你的浏览器标签页仍然显示文档的标题；这段小脚本会打印出，如果你把示例单独作为一个文件打开，标签页会显示什么。修改 <title> 里的文字，这一行就会更新。

写出好的标题

标题往往是别人在搜索结果或一排标签页中最先读到的关于你页面的内容。几条规则就能覆盖大多数页面：

• 具体且唯一。 网站上的每个页面都应该有描述该页面的独立标题：写“巧克力曲奇食谱”，而不是“首页”或“第 1 页”。
• 重要的词放在前面。 标签页很窄，搜索结果也会截断长标题。把关键短语放在前 50 到 60 个字符左右以内。
• 网站名称放在末尾，用 | 或 : 隔开，这样页面主题仍然排在最前面。
• 为人而写。 堆满重复关键词的标题看起来像垃圾内容，搜索引擎可能会改写它。

这个模拟标签页会按真实标签页的宽度截断标题。试试更短或更长的标题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

网站名称放在最后，即使标签页被截断，也能看出页面讲的是什么。如果把顺序反过来（“Bake Club | How to...”），你网站的每个标签页都会以同样的两个词开头。

title 标签、h1 与 title 属性

title 和 <h1> 的意思通常一致，但 title 可以按搜索习惯来写并带上网站名称，而标题可以更短。title 属性虽然名字相同，却和它们无关。把鼠标悬停在带下划线的词上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

title 属性的提示框在触摸屏上不会出现，屏幕阅读器也不一定会读出来，所以不要把重要信息只放在这里。

title 里只能放文本

浏览器把 <title> 和 </title> 之间的所有内容都当作纯文本读取。标签不会被解析，但 & 这样的字符引用会被解码，连续的空白也会合并成一个空格：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

结果是 Salt & Pepper <b>Bold?</b>：实体变成了 &，三个空格变成了一个，<b> 标签保留为字面字符。标题里无法加粗或强调。

用 JavaScript 修改标题

document.title 可读也可写。网页应用用它在标签页中显示未读数量或当前状态：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

在真实页面上，浏览器标签页会和这里的模拟标签页同时变化。会执行 JavaScript 的搜索引擎能看到脚本设置的标题，但对于需要被收录的内容，直接写在 HTML 里的标题才是可靠的选择。

常见错误

• 完全没有 title。 浏览器会退而显示 URL 或文件名，而且页面不是有效的 HTML。每个页面都要加上，在模板里把它和 meta viewport 标签放在一起。
• 每个页面都用同一个标题。 标签页、书签和搜索结果就无法区分了。
• 把 <title> 放在 <body> 里。 浏览器仍会使用它，但它应该放在 <head> 里，而且有些工具会找不到它。
• 两个 <title> 元素。 只有第一个有效。删掉其余的。
• 每个标题都以网站名称开头。 先写页面主题；网站名称放在最后。