用徽标图像替换H1文本：SEO和可访问性的最佳方法？

我不知道，但这是使用的格式...

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

简单，据我所知，它并没有对我的网站造成任何损害。您可以使用它，但我看不到它的加载速度更快。

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

一种新的（Keller）方法应该比-9999px方法提高速度：

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

在这里推荐：http : //www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

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

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

W3C怎么做？

只需看看https://www.w3.org/即可。图片中有个z-index:1，文字在这里，但是后面是因为z-index:0与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>

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

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

这对于SEO来说是个不错的选择，因为SEO赋予H1标签较高的优先级，而h1标签内应是您的网站名称。使用此方法，如果您在SEO中搜索站点名称，它也会显示您的站点徽标。

您要隐藏网站名称或文本，请使用负值的text-indent。前

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

您错过了<a>元素中的标题。

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

我建议将title放在<a>element中，因为客户希望知道该图像的含义。因为您已经text-indent为此设置了测试，<h1>所以前端用户将鼠标悬停在徽标上时可以获得主要徽标的信息。

如果可访问性的原因很重要，则使用第一个变体（当客户希望看到没有样式的图像时）

<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样式和技巧，因为它们与任务不符。它们可能仅在特定情况下有用。

我这样做的方式与上面的类似，但是出于可访问性的原因，我需要支持在浏览器中禁用图像的可能性。因此，而不是从缩进在页面链接的文本，我完全被定位覆盖它<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>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

H1的href和img中的标题非常非常重要！