我所做的主要类似于上面的方法，但是出于可访问性的原因，我需要支持在浏览器中禁用图像的可能性。因此，我没有将链接中的文本缩进到页面外，而是将<span>完全定位到<a>的全宽和高，并使用z-index将其按堆叠顺序置于链接文本之上。

价格是一个空的<span>，但我愿意有一些重要的东西，如<h1>。

<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样式和黑客，因为他们不对应的任务。它们可能只在特定情况下有用。

我觉得你会对H1的争论感兴趣。这是关于是将h1元素用于页面标题还是用于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>

当然，这取决于你的设计是否使用页面标题，但这是我在这个问题上的立场。

你错过了以下选项:

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

标题在href和img到h1是非常非常重要的!

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

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

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

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

我不知道，但这是我们用过的格式。

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

简单的，它没有做我的网站任何伤害，就我所见。你可以css它，但我不认为它加载更快。

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

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

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

一个新的(Keller)方法应该可以提高-9999px方法的速度:

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

推荐:http://www.zeldman.com/2012/03/01/replacing - - 9999 px -攻击-新-图像- replacement/

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

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

你的前半部分问题，关于图像替换，是一个有效的问题，我的观点是，对于一个标志，一个简单的图像;一个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将获得更好的成功。

SEO原因:

<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="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

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

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

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

W3C是怎么做的?

看看https://www.w3.org/就知道了。 图像的z指数为:1，文本在这里但在后面，因为z指数为:0耦合到位置: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>

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

在阅读了上述解决方案后，我使用了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;
}

如果你不想在<h1>中包装你的图像时应用浏览器样式，你可以使用属性role="heading"和aria-level="1"来获得与<h1>相同的可访问性和SEO改进。

例如，就画外音而言，这个

<标题> < a href = " / " > 堆栈溢出 < / > < / h1 >

和

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