我觉得你会对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是非常非常重要的!

在阅读了上述解决方案后，我使用了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的争论感兴趣。这是关于是将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将获得更好的成功。