如何使用 title 标签定义 HTML 文档标题?

front end scriptsjavascriptweb development

<title> HTML 元素定义文档的标题,该标题显示在浏览器的标题栏或页面的选项卡中。它对文档内容进行了简短而准确的描述。如果用户希望将网页添加到书签中,它也是使用的默认名称。

语法

<title> 页面标题内容 </title>

<title> HTML 在页面搜索引擎优化中起着重要作用,它可以帮助搜索引擎用户决定点击您的网站而不是其他网站。格式错误的标题标签会损害您的搜索排名,并使您的链接吸引力降低,即使它出现在 Google 的第一页上,因此首先正确设置它们非常重要。

搜索引擎在对页面进行排名时会考虑内容页面标题,因此标题标签的内容在 SEO(搜索引擎优化)中非常重要。较长的描述性标题比较短的标题更有优势。标题内容是帮助搜索引擎算法组织网页在搜索结果中显示方式的组件之一。除此之外,标题也是在搜索中吸引用户注意力的第一件事

标题标签的不同用途使它们对 SEO、可用性和社交共享非常重要。总结一下,title 标签用于 −

  • 显示在浏览器窗口顶部的页面简短标题和描述
  • 用户创建书签的默认名称
  • 搜索引擎排名
  • 搜索结果的可点击标题
  • 在社交媒体上分享链接时的标题

创建优秀 HTML 标题标签的技巧

  • 字符长度在 50 − 60 个字符之间 - 搜索引擎只会显示页面标题的前 55 - 60 个字符,因此尽量不要让标题超过这个长度。如果标题很长,那么请确保重要信息在 55 - 60 个字符之间。
  • 有意义的标题− 对于词汇表或参考样式的页面,始终使用描述性短语或术语定义配对。
  • 包含重要关键字− 最好将重要关键字放在标题的开头,品牌或公司名称可以放在结尾。因为用户主要关注的是产品,而不是公司或品牌。因此,关键关键字应放在首位。
  • 与页面相关的标题− 创建标题时,请始终牢记标题应与页面相关,否则搜索引擎将在搜索结果中显示不同的标题。
  • 人类可读− 请记住,虽然搜索引擎会对您的页面进行排名,但实际阅读和使用它们的人是人类。人性化的标题标签可让您的页面在 SERP 上可点击,并在书签中令人难忘。
  • 每个页面都有唯一的标题 − 标题标签应始终与页面内容相符,因此每个页面都需要自己的标题标签,以帮助将其与其他页面区分开来。每个页面也很可能需要几个不同的关键字,因此请相应地优化每个标题标签。

示例 1

<title>Awesome interesting stuff</title>

示例 2

<title>Comprehensive DevOps Prime Pack - Tutorialspoint</title>

示例 3

<title> Shopping Cart details - Tutorialspoint </title>

可访问性问题

提供准确而简洁的标题来描述页面的目的非常重要。

辅助技术用户常用的导航技术是阅读页面标题并推断页面包含的内容。这是因为导航到页面以确定其内容可能是一个耗时且可能令人困惑的过程。标题对于网站的每个页面都应该是独一无二的,理想情况下首先显示页面的主要目的,然后显示网站的名称。遵循这种模式将有助于确保屏幕阅读器首先宣布页面的主要目的。这比用户在同一个网站中导航到的每个页面都必须先听网站名称,然后再听唯一的页面标题,提供了更好的体验。

示例

<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>

相关文章