H1 vs H2 vs Other网站标题/徽标和SEO

前端开发人员通常将网站标题或徽标放在H1标签中，将标题放在H2中。但是大多数时候，页面/文章的标题更为重要，因为它带有内容的价值。所以我的问题是从语义和SEO角度来看最好的方法是什么。例子：

• 徽标-H1，标题-H1
• 徽标-H1，标题-H2
• 徽标-H2，标题-H1
• 徽标-其他标签，标题-H1

如果您认为其他变体会产生更大的效果，请提供它们。

我通常不将徽标或网站标题放在H1中。我喜欢看的方式是每个页面都是一个文档。该文档是关于特定主题的，如页面标题和主要标题所示。网站本身只是文档的发布者。因此，从语义上讲，使用站点徽标或名称作为每个页面的主要标题是不正确的。徽标醒目地显示出来，以提醒用户徽标的位置和商标目的，但实际上它们并不是内容或文档的一部分。

我的意思是，当您观看新闻报道时，可能会在角落看到一个小的新闻频道徽标，但新闻报道的标题将不会是“ CNN”或“ BBC新闻”。标题将是关于故事的，而不是发布故事的网络。同样，当您阅读杂志时，标题中仅使用文章标题，而不使用出版物名称。

在徽标/站点名称中使用H1标签，在文档标题中使用H1标签在语义上也是不正确的。标题定义页面上内容的层次结构；使用一个作为网站名称，使用另一个作为文档标题，就像说，此页面有两个主要部分：“ mydomain.com”和“联系我们”。

请参阅Google SEO报告卡文档的第37页：

<h1>像上面的示例一样，大多数产品主页都有机会使用一个标签，但目前仅使用其他标题标签（<h3>在这种情况下）或较大的字体样式。在设置文本样式以使其看起来更大时，可能会实现相同的视觉效果，但不会为<h1>标签提供与搜索引擎相同的语义。该产品的名称和/或有关其功能的几句话非常<h1>适合放在产品主页的标签中。

根据Google对其产品的分析，我得出一个结论，即Google希望在H1中出现唯一的，特定于页面的值（链接文档中的插图对此进行了说明）。

这是一个很好的理由：您的徽标是图片，而不是<h1>

语义上，<h1>应使用页面标题，并且页面标题在每个页面上应该是唯一的。您的徽标或站点名称不是页面标题（也许不是主页）。

您的徽标/站点名称应为纯div，也许ID为“ heading”。或者，<header>如果使用HTML5 ，则为标签。

IMO在页面上应该只有一个H1。而且H1应该始终在H2之前-维护内容的正确层次结构。

徽标经常在每一页上重复，就像您说的那样，在大多数页上，标题几乎总是更加重要。

在主页上，我会考虑使用：
徽标/标题-H1 [，标题-H2]
虽然，徽标很可能是您的标题。

但是，在随后的所有页面上，我都会使用：
徽标-其他标签，标题-H1
适当时甚至将徽标作为背景图像。

您真正在H1标签中寻找的是页面标题或使该页面独特的原因。如果要在其中使用图像，则需要使用后备方法来实现图像的可降解性：

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

这样，您可以设置要在H1上显示的图像（人们经常将其误用作徽标区域），并且对于那些使用降级的Internet体验的人来说，其中仍然具有良好的内容。这也使您的SEO值感到高兴。

由于存在实践（和模板），因此这是一个了不起的问题。

就个人而言，考虑到以下因素，我喜欢参考“概述101”逻辑：

H1就像一个标题（肯定是您想要补充HTML标题），并且每页应该只有一个，就像一个页面只有一个标题一样

H2在轮廓上有点像罗马数字：I.，II。，III。等。

H3将等于A.，B.，C。

通常，很难在网页上准确地实施这种逻辑的实际使用-太多的偶然信息只是不累积到该层次结构中。但是，如果您坐下来尝试用这种逻辑来分解它，我觉得该学科是有好处的。

我是h1主角人。主要标题是装饰的站点名称，或您所说的徽标。重点在于-在网站标题中，徽标实际上不是徽标，而是图示网站的标题。设计师只是喜欢将其设计为徽标。

LOGO->有H1什么问题？

<div>Google</div>
<h1>About Us</h1>

现在，正如h1最重要的部分告诉访问者的全部内容一样，访问者无法理解页面，因为h1它太具体了。关于谁？

<h1>Google</h1>
<h2>About Us</h2>

此页面与Google有关。这是关于我们的部分。看-没问题吗？一切都清楚。

第二点。

页面结构。如果将站点主标题放入div或p，则没有任何关联。

<p>Google</p>
<h1>About us</h1>

如果h1出现问题，如何将“ About U”与Google相关联？因为之后所有的东西H1都与它相关联，所以与以前无关。

<h1>Google</h1>
<h2>About Us</h2>

“关于我们”属于Google。没有问题。

第三点。

HTML是描述信息的语言。因此，您不会显示信息，而是对其进行描述。并且每个页面都是独立的。因此，您描述一个页面是因为页面之间没有关联。只是链接各个页面的链接。

<p>Google</p>
<h1>About us</h1>

此页面是关于我们。谁/是什么？不清楚 它只是描述了一个叫做“关于我们”的东西。

<h1>Google</h1>
<h2>About Us</h2>

该网站描述了google。还有关于我们的部分。Us =最有可能是google，因为结构以这种方式描述了它。

我希望我能表达我的意思:)

PS！您不能使用h2-- h1，h3因为这是不合逻辑的，因此失败很大。仅仅因为w3c没说过它是不允许的，就没有使它有效。考虑一下，这是不合逻辑的。

徽标作为h2标签？

我只是在浏览SitePoint（www.sitepoint.com），这是一个WordPress博客，包含常规页面和博客。通常，我发现它们的页面标题为h1标签，徽标设置为h2。您可以在博客页面（如www.blogs.sitepoint.com/category/design/）上看到此内容。在网站周围漫游，您会发现不同的设置。我经常在主要产品页面（http://products.sitepoint.com/）上找不到h1标签。尽管在该页面上，如果单击任何特定产品以获取更多信息，请访问www.sitepoint.com/books/design2/，您会再次发现h1是页面标题，h2是徽标。典型的网页类似于博客（请参阅www.sitepoint.com/help/）。在这种情况下，FAQ的主题都是h2标签。

汤姆·罗杰斯

您的徽标不需要嵌套在标题中-只需一个简单的链接图像就header可以了。但是您的网站标题和页面/文章标题均应为<h1>。本文内容丰富：HTML5时代中有关多个H1标签的真相。