你少了一个选项：

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

將href中的標題和img轉換為h1非常非常重要！

我主要使用与上述类似的方式，但出于可访问性的原因，我需要支持浏览器禁用图像的可能性。因此，我不会将文本从页面的链接缩进，而是通过将<span>的绝对定位覆盖到<a>的整个宽度和高度，并使用z-index将其置于堆叠顺序中链接文本的上方。

价格是一个空的，但是对于像

这样重要的东西，我愿意让它在那里。

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

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

如果可访问性原因很重要，则使用第一种变体（当客户希望在没有样式的情况下查看图像）

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

不需要遵守想象中的SEO要求，因为上面的HTML代码具有正确的结构，只要您决定是否适合您的访问者即可。

你也可以使用较少的 HTML 代码变体。

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

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

请注意，我已删除所有其他CSS样式和小技巧，因为它们不符合任务。它们可能只在特定情况下有用。

有点晚了，但是我忍不住要说。

你的问题有一半是有缺陷的。让我解释一下：

你的问题的前半部分，有关图像替换，是一个有效的问题，我的意见是对于标志，简单的图像；一个替代属性；和CSS来定位是足够的。

您问题的后半部分关于标志的H1的“SEO价值”，这种方法不正确，不能用来决定不同类型的内容使用哪些元素。

一个标志不是主标题，甚至不是标题，使用H1元素在您网站的每个页面上标记标志将对您的排名造成（轻微）损害，语义上，标题（H1-H6）适合，好吧，就是标题和内容的副标题。

在HTML5中，每页允许多个标题，但标志不应该算是其中之一。您的标志可能是一个模糊的绿色小部件和一些文本，出于特定原因，它是在页眉旁边的图像中 - 它是一种“印章”，而不是构建内容的分层元素。您网站每个页面的第一个H1应该是其主题的标题（是否使用更多取决于标题层次结构）。首页的主要标题可能是“纽约市最好的模糊绿色小部件来源”。另一页的主要标题可能是“我们的模糊小部件运送细节”。在另一页上，它可能是“关于Bert的模糊小部件公司”。您明白了。

顺便说一句：虽然听起来难以置信，但不要查看谷歌拥有的 Web 属性的来源以获取正确标记的示例。这是一个完整的帖子。

为了从HTML及其元素中获取最多的“SEO价值”，请查看HTML5规范，并根据（HTML）语义和用户的价值制定标记决策，而不是首先考虑搜索引擎，这样您的SEO效果会更好。

How W3C does?

Simply have a look a look at https://www.w3.org/. The image has a z-index:1, the text is here but behind because of the z-index:0 coupled to the position: absolute;

原始的HTML：

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

The original CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

I think you d be interested in the H1 debate. It s a debate about whether to use the h1 element for the page s title or for the logo.

就我个人而言，我会选择你的第一个建议，类似这样的：

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url( logo.png ); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Of course this depends on whether your design uses page titles but this is my stance on this issue.

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

这是SEO的好选择，因为SEO将H1标签视为高优先级，H1标签中应该包含您的站点名称。使用这种方法，如果在SEO中搜索网站名称，则会显示您的网站标志。

you want to hide the site name OR text please use text-indent in negative value. ex

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

您在元素中缺少标题。

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

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

recommended here:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

After reading through the above solutions, I used a CSS Grid solution.

1. Create a div containing the h1 text and the image.
2. Position the two items in the same cell and make them both relatively positioned.
3. Use the old zeldman.com technique to hide the text using text-indent, white-space, and overflow properties.

<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;
}

If you don t want the browser styles applied when wrapping your image in an <h1>, you can get the same accessibility and SEO improvements with the <h1> by using the attributes role="heading" and aria-level="1"

For example, as far as the voice over is concerned, this

<h1>
    <a href="/">
        Stack Overflow
    </a>
</h1>

is the same as

<div role="heading" aria-level="1">
    <a href="/">
        <img src="https://via.placeholder.com/150" alt="Stack Overflow" />
    </a>
</div>

I don t know but this is the format have used...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Simple and it has not done my site any harm as far as I can see. You could css it but I don t see it loading any faster.

For SEO reason:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

<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});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}