[HTML]说明如何使用标题标签!正确使用h1到h6 [对于SEO来说很重要]

“标题标签有6种类型,我应该使用哪一种?在哪里?”
“ h标签作为SEO措施的效果如何?”

创建网站时很少使用标题标签的情况很少。尽管它是一个经常使用的“ h标记”,但是它有六种类型,因此初学者会对如何使用每种类型感到困惑。实际上,您不是很好地理解了每个h标签的重要性,是否只考虑设计的必要性,而倾向于说“正确使用它”?

但是不用担心。这次,我将解释这个h标签。我将特别着重回答以下问题。这些是最常见的问题。

  • 如何使用h1-h6的标题标签有区别吗?
  • 通过设置标题有SEO效果吗?
  • h标签有使用规则吗?

该说明是为刚开始学习HTML的初学者编写的。有经验的人已经知道所有信息,因此如有必要,请跳过它。

什么是标题标签?

标题标签的意义

创建标题的是“ h标记”,但是为什么必须首先创建标题呢?这有两个含义。

第一点是用户易于理解。设置标题使用户更容易理解页面的内容。

第二点是通过使用标签向搜索引擎清楚地显示页面的结构。这使搜索引擎可以确定信息的类型并了解信息的内容和重要性。如果内容合适,搜索引擎将确定其值。存在h标签可帮助做出此决定。不限于此标题,阐明页面的结构(适当地使用符合结构目的的标签)是编码人员的一项基本技能。

标题标签类型

标题标签有6种类型,即h1-h6。为什么有订单而不是订单?它与标题信息的重要性有关。并非所有标题都具有相同的重要性。如果您构建页面,则较高级别的内容将包含较低级别的内容,而您希望用户知道的信息则更加概括。上图中的标题1和标题3对此页面不能具有相同的重要性。作为网站创建者,我希望您注意标题1而不是标题3。如果是这样,请使用不同的标签显示重要性上的差异。

作为测试,我们最多显示h1-h6。您会看到为每种类型自动设置了字体大小。

<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
<h3>これはh3です。</h3>
<h4>これはh4です。</h4>
<h5>これはh5です。</h5>
<h6>これはh6です。</h6>

以下是显示结果。

h标签的大小可以使用CSS进行调整。一个常见的错误是,由于设计需要,例如将h1或h2用于不太重要的信息(否则为h4或h5)。在这种情况下,h2将低于h3层次结构,因此这不是一个非常理想的页面结构。请记住,根据内容而非设计的重要性,我们将使用不同类型的标签。

结构澄清

现在,让我们再检查一下HTML的结构。如下所示,由于设计问题而具有不同的标签类型也可以吗? 

总之,这没什么大不了的。但是,初学者承认它会导致一个混乱的站点,忽略结构。在保持基础方面,最好匹配标题级别并组织站点的层次结构。为了使站点易于理解,请尝试根据层次结构从h1开始按顺序使用它。

使用标题标签强调重要文本
通常,标题标签显示的标签中包含的文本大于页面上的正常文本,从而向用户提供视觉提示,表明该文本很重要以及标题文本之后的内容。内容会更容易理解。以正确的顺序使用多个标题大小会创建内容的层次结构,从而使用户更容易浏览文档。
搜索引擎优化(SEO)入门指南

SEO效果

顺便说一句,这个搜索引擎优化的效果如何? 

标题本身是否具有SEO效果的答案是“不是没有,但绝不是很强”。在过去,曾经有人真正相信过使用非常重要的h1作为标题并将其填充到关键字中的想法,但现在情况并非如此。 “标题标签对网站的结构有所帮助,但这不是确定的。”用Google的John Mueller的话说

但是,甚至不要认为没有SEO效果。在SEO领域中,关键字“结构的优化”非常重要。如果标题下的文本的摘要信息以易于理解的方式放置在h标签中,则后面的文本的含义将正确地传达给搜索引擎。换句话说,仅要求标题与其下的文本相关。使用SEO度量技术并简单地排列与下面的文本无关的关键字远非优化,而且很难将页面内容正确地传达给搜索引擎。应避免以下情况。

  • 在一页中毫无意义地使用h1。
  • 在h标签中随意添加关键字。
  • h标签的内容杂乱无章,具有悠久的文化。

h1标签和标题标签之间的区别

由于我们在上面提到了SEO,因此在这里我们还将介绍与title标签的区别。 h1标签和title标签都向用户提供了“此页面上显示类似内容”的信息。这就提出了一个问题:“ h1和title标签应该相同吗?”

标题设置在头部,并显示为搜索结果的标题。这是直接影响用户是否点击的重要因素。另一方面,将h1安装在正文中,并放置代表页面的单词。另外,不要忘记放置用户期望的关键字。
但是,请注意不要包含与内容无关的关键字或关键字。

找到感兴趣主题的用户会在预期该信息时单击它。如果h1中的信息提供的信息令人失望,则用户可能会立即离开。因此,答案是:“即使它们相同也没有问题,但是如果h1标签的内容满足用户的期望甚至更好。”如果您是初学者,则应避免显示与标题完全不同的内容。

如何使用标题标签

标题标签顺序

同样,h标签的顺序由其结构确定。一次设计页面布局是一个好主意。在组织页面时,信息的重要性会有所不同。基于此,排列h1至h6。如果结构很深,则h5和h6会起作用,但实际上,您可能没有太多机会使用它们。切勿根据设计中字体大小的大小来确定标签的类型。

如何使用H1标签

h1标签用作“页面摘要”,告诉您页面是什么。至少,它不应该用作页面内容的标题(相对而言不太重要)。它是较低的h标签而不是h1的角色。

例如,“创意”网站在h1中没有标题为“创意”的标题。站点名称“ creive”由p个标签组成。

在博客标题中使用了h1标签。您可以判断这是页面内容的摘要。 h1标签是一个示例,其中网站标题并不总是出现,这是信息重要性的一个很好的例子。

但是,尽管结构上很低(对于信息而言不太重要),但不希望像创建者所喜欢的那样在此处使用h1标签。如果您认为基础信息很重要,则可能需要基于该信息重新访问页面的结构。清楚地向用户传达他或她想要传达的内容。

使用h1标签的次数

就语法而言,在一页中使用多个h1标签并不是错误。在HTML5中,h1标签可以在页面中多次使用。这并不意味着您可以忽略页面结构,而是应该了解易于理解的页面结构设计。

如果您是初学者,则可能希望保持较低的h1数量,以便可以正确设计页面结构。如果有多个h1标签,则意味着页面的目的是分散的。换句话说,用户可能难以理解页面在浏览时想要传达的内容。对于搜索引擎而言,这绝非易事。在设计时也请考虑分开页面。

如何使用H2-H6标签

与h1标签不同,取决于页面结构的深度,h2-h6标签可以多次使用。通常,您通常会为页面或博客的标题指定h1,并为其下面的每个章节或段落的标题(直接在下面)指定h2。如果这样做,将不可避免地增加使用标题标签直到h2-h4的频率。相反,除非页面结构很深,否则很少使用h5和h6,并且如果您是初学者,请设计深度更深的页面结构,尤其是从易于与用户沟通的角度来看。最好不要。

在网站标题图片使用h1标签时

考察各种站点,某些站点在h1标签中使用img标签。他们说出要传达给图像的内容,而不是文字。这样做本身很好,但是请记住,在显示重要内容时,基本上是使用文本而不是图像。基于这种认识,如果您仍然认为在图像中显示它的行为合适,那么在计划使用alt属性中的字符构成h1标签时,最好始终包含内容。

<img src="index.html" alt="ここにテキストを記載する">

概要

感谢您阅读本文。我希望您强烈理解h标记的用法取决于页面的布局(结构)。有诸如SEO措施之类的效果,但是首先,请尝试以一种简单的方式传达您想要传达的内容,而不是太了解它。人们常说标题应该以“主题”,“具体”和“意外”等要点考虑。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。