没有人提到的一点是，h1属性应该特定于每个页面，使用网站标志将有效地在网站的每个页面上复制h1。

我喜欢为每个页面使用z索引隐藏h1，因为最好的SEO h1通常不是最好的销售或美学价值。

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

这是SEO的好选择，因为SEO给H1标签高优先级，在H1标签里面应该是你的网站名称。使用这种方法，如果你在搜索引擎优化中搜索网站名称，它也会显示你的网站标志。

如果你想隐藏网站名称或文本，请使用负文本缩进。前女友

h1 a {
 text-indent: -99999px;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

您在<a>元素中错过了title。

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

我建议将title放在<a>元素中，因为客户端想知道该图像的含义是什么。因为您已经为<h1>的测试设置了文本缩进，因此，前端用户在徽标上悬停时可以获得主徽标的信息。

说得有点晚了，但还是忍不住了。

你的问题有一半是错误的。让我解释一下:

你的前半部分问题，关于图像替换，是一个有效的问题，我的观点是，对于一个标志，一个简单的图像;一个Alt属性;和CSS对其定位是足够的。

你问题的后半部分，关于logo H1的“SEO值”，是决定不同类型内容使用哪些元素的错误方法。

logo不是一个主要的标题，甚至根本不是一个标题，在你网站的每一页上使用H1元素标记logo会(稍微)对你的排名弊大于利。从语义上讲，标题(H1 - H6)适用于:内容的标题和副标题。

In HTML5, more than one heading is allowed per page, but a logo isn't deserving of one of them. Your logo, which might be a fuzzy green widget and some text is in an image off to the side of the header for a reason - it's sort of a "stamp", not a hierarchical element to structure your content. The first (whether you use more depends on your heading hierarchy) H1 of each page of your site should headline its subject matter. The main primary heading of your index page might be 'The Best Source For Fuzzy Green Widgets in NYC'. The primary heading on another page might be 'Shipping Details for Our Fuzzy Widgets'. On another page, it may be 'About Bert's Fuzzy Widgets Inc.'. You get the idea.

旁注:尽管听起来不可思议，但不要从谷歌拥有的网页属性中寻找正确标记的例子。这是一个完整的帖子。

要从HTML及其元素中获得最大的“SEO价值”，请查看HTML5规范，并在搜索引擎之前根据(HTML)语义和对用户的价值做出标记决定，这样您的SEO将获得更好的成功。

在阅读了上述解决方案后，我使用了CSS网格解决方案。

创建一个包含h1文本和图像的div。 在相同的单元格中定位两个项目，并使它们都处于相对位置。 使用旧的zeldman.com技术来隐藏文本，使用文本缩进、空白和溢出属性。

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}