3.2　创建页面标题

3.1节HTML基础代码中仅为占位符，现在开始讨论title元素。

每个HTML页面都必须有一个title元素。每个页面的标题都应该是简短的、描述性的，而且是唯一的，如图3.2.1所示。在大多数浏览器中，页面标题出现在窗口的标题栏（Chrome是个例外），如图3.2.2所示。如果支持标签浏览（所有近年发布的主流浏览器都支持），页面标题也会出现在标签上。页面标题还会出现在访问者浏览历史列表和书签里，如图3.2.3所示。

或许更为重要的是，页面标题会被Google、Bing、Yahoo!等搜索引擎采用，从而能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示，如图3.2.4所示。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8" />
  5.      <title>Antoni Gaudí - Introduction </title>
  6. </head>
  7. <body>
  8.  
  9.  
  10. </body>
  11. </html>

图3.2.1　title元素必须位于head部分，将它放置在指定字符编码的meta元素后面

3.2　创建页面标题 - 图1

图3.2.2　在大多数浏览器（如Firefox）中，页面标题既显示在标题栏，也显示在标签上。不过，Chrome（下图）只在标签上显示页面标题

3.2　创建页面标题 - 图2

图3.2.3　页面标题也出现在访问者的History面板（如图）、收藏夹列表以及书签列表中

总之，要让每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。

3.2　创建页面标题 - 图3

图3.2.4　或者最重要的是，页面标题通常是Google等搜索引擎的搜索结果中链接的文字，它也是判断搜索结果中页面相关度的重要因素。此处为Google中显示的页面标题和部分主体内容

创建页面标题的步骤

  • 将光标放在文档head中的和之间。

  • 输入网页的标题。

提示　title元素是必需的。

　

提示　title中不能包含任何格式、HTML、图像或指向其他页面的链接。

　

提示　创建新页面时，有的代码编辑器会预先为页面标题填上默认文字，除非已经按照3.1节中介绍的方法使用了特定的开头代码。要注意到这些默认文字，确保用自己的标题替换它们。

　

提示　如果页面标题中包含特殊字符（如重音）或某些符号，那么它们必须是页面所用编码的一部分（如果使用UTF-8，则一般不会产生问题），否则就必须用引用来编写它们（可用的字符实体引用列表参见www.elizabethcastro.com/html/extras/entities.html）。同时，别忘了在保存页面时选择恰当的编码（如UTF-8），从而确保特殊字符被正确地保存（参见2.3节）。

　

深入探讨页面标题

很多开发人员不太重视title元素，甚至那些相当用心、很有经验的开发人员也是这样。他们只是简单地输入网站名称，并将其复制到全站每一个网页。或者更糟糕，让title文字仍然保存为代码编辑器默认添加的文字。如果流量是网站追求的指标之一，这样做对建站者和潜在的访问者都会产生巨大的损害。

不同搜索引擎确定网页排名和内容索引规则的算法是不一样的。不过，title通常都扮演着重要的角色。搜索引擎会将title作为判断页面主要内容的指标，并将页面内容按照与之相关的文字进行索引。有效的title应包含几个与页面内容密切相关的关键词。

作为一种最佳实践，选择能简要概括文档内容的文字作为title文字。这些文字既要对屏幕阅读器用户友好，又要有利于搜索引擎排名。其次，将网站名称放入title（这不是必需的）。将网站名称放在title的开头是很常见的做法，不过将页面特有的文字放在开头是更好的做法。

建议将title的核心内容放在前60个字符（含空格）中，因为搜索引擎通常将超过此数目（作为基准）的字符截断。不同浏览器显示在标题栏里字符数的上限不尽相同，不过也不会超过60。浏览器标签会将标题截得更短，因为它占的空间较少。