H1图像替换替代答案

【问题标题】：H1 image replace alternativeH1图像替换替代
【发布时间】：2012-06-08 08:30:05
【问题描述】：

我希望在标题中添加一个 h1 元素，但是我在标题中使用标签（不是背景图像），当屏幕分辨率发生变化时它们会相互替换。

我看过技术

<h1 class="technique-four">
<a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>


h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}

...但是由于我的布局是流畅的，所以当图像发生变化时可以看到背景。

甚至有必要用图像替换 h1 吗？我就不能这样做：

<h1 class="headerhone">kb-k bwf-kb</h1> 

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/></a>

（忽略php）

然后给 h1 的高度为零：

h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

} /*this was suggested to me as an alternative to the -9999px; thing.*/

这行得通吗？是否会对 SEO 产生负面影响或可用性问题？

【问题讨论】：

标签： css image header seo replace

【解决方案1】：

在第二种解决方案中，在屏幕阅读器上，您的 h1 内容将为“kb-k bwf-kb”，屏幕阅读器将无法理解下图的 alt 属性实际上是您的 h1。

对于 Google，这第二种解决方案似乎是您想在 h1 标记中隐藏内容：不好。

一个直观的例子会很有用，我不明白你想要实现的所有目标。

【讨论】：

【解决方案2】：

Google 从来没有对在 <h1> 标签中隐藏文本和使用图像有任何积极的评价，所以我总是犹豫是否推荐它作为解决方案。您的最后一种技术几乎肯定会属于向搜索引擎提供不同内容的范畴，因此我也建议不要这样做。

不过，您的第二个想法是正确的。您要做的是使用responsive design 来确定布局的宽度并相应地调整图像。事实上，Google has been writing a lot about it in their blog lately。我强烈建议学习如何做到这一点。

【讨论】：