在阅读了上述解决方案后，我使用了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>
    <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它，但我不认为它加载更快。

我所做的主要类似于上面的方法，但是出于可访问性的原因，我需要支持在浏览器中禁用图像的可能性。因此，我没有将链接中的文本缩进到页面外，而是将<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 */  }

我觉得你会对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>

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

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>

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

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

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