在 HTML5 中使用 H1 徽标答案

【问题标题】：Using a H1 logo in HTML5在 HTML5 中使用 H1 徽标
【发布时间】：2014-08-20 13:16:25
【问题描述】：

关于“带有图像的 h1 标签”的争论似乎与时间本身一样古老，但对于 HTML5 explicitly allowing multiple H1 tags as part of its spec，之前关于该主题的所有问题似乎都已过时。

据我了解，以下内容与HTML OA 完美搭配：

<body>
  <header>
    <h1>
      <a href="http://www.example.com"> 
        <img src="logo.png" alt="Ernie's Restaurant - Great Italian food">
      </a>
    </h1>
  </header>

  <nav><!-- the site-wide navigation --></nav> 

  <article>
    <h1>About us</h1>
    <p>…</p>
  </article>

</body>

但我正在与一家网站上的 SEO 公司合作，他们告诉我：

“标志链接不能是H1。没有意义。”

他们是对的吗？上面的文档大纲有什么不好的地方吗？如果你不能把logo放在H1标签里，为什么the W3C do it themselves on their website？

这些人据说是 SEO 专家，但我就是不明白他们的抱怨。我错过了什么？

【问题讨论】：

标签： html seo html-heading

【解决方案1】：

大多数时候，您希望将图像包裹在一个锚点中，该锚点也有一个标题...请参阅This answer 和 This answer。

也许他们只是因为缺少合适的锚而感到紧张？ img 标签是完全合法的。

【讨论】：

Doh。好眼力。实际网站上有一个<a> 标签。我只是忘了包括它。没有title= 属性，所以可能就是这样。

【解决方案2】：

是的，您可以将img 元素作为h1 元素的内容。
是的，将img-logo 设置为h1 是有意义的（如果它属于body 分区根，就像在您的示例中那样）。

如果您的网站没有显示单独的文字名称，您绝对应该这样做。否则，文档大纲可能是错误的（如果您没有在需要的地方使用分段元素），或者至少大纲会有一个未标记的顶级条目，这不是非常用户友好/可访问的。

如果您有一个站点徽标和一个文本站点名称，则可以讨论：要么将 img 与文本一起包含在同一个 h1 中，要么只包含其中一个元素h1（其中一个是可能的）并将另一个作为“alternative title”，例如，一起在一个 header 元素中。

例如，请参阅我关于 SO（1、2、3）和代码审查（1、2、3）的一些相关答案。

（您的“SEO 专家”并不是唯一一个对此有问题的人，正如您在我的链接答案的一些 cmets 中看到的那样。我还没有看到反对它的论点……。）

【讨论】：