Question

＆＃34; h1标签带有图片＆＃34;辩论似乎与时间本身一样古老，但在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公司合作，他们告诉我：

＆＃34;徽标链接不能是H1。这没有意义。＆＃34;

他们是对的吗？上述文件大纲有什么不好之处吗？如果您不能将徽标放在H1标签中，为什么要the W3C do it themselves on their website？

这些人应该是SEO专家，但我不理解他们的抱怨。我错过了什么？

Answer 1

大多数情况下，您希望将图像包装在一个锚中，该锚也有一个标题...请参阅This answer和This answer。

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

Answer 2

是的，您可以将img元素作为h1元素的内容是的，将img - 徽标设为h1是有意义的（如果它属于body切片根，就像在您的示例中一样）。

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

如果您有一个站点徽标和一个文本站点名称，则可以讨论：将img与文本同时包含在h1中，或者只包含一个h1中的这些元素中的任何一个（可能是一个）并且另一个元素为＆＃34; alternative title＆＃34;，例如，在header元素中一起。

例如，请参阅我的一些相关答案（1，2，3）和代码审核（1，2，{ {3}}）。

（你的＆＃34; SEO专家＆＃34;并不是唯一一个有这个问题的人，正如你在我的链接答案的一些评论中看到的那样。我还没有看到反对它的论点...... ）

在HTML5中使用H1徽标

2 个答案: