Question

我想在我的标题中添加一个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影响或可用性问题吗？

Answer 1

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

对谷歌而言，第二种解决方案似乎要隐藏在h1标签中的内容：坏。

一个直观的例子很有用，我不明白你想要达到的目标。

Answer 2

谷歌在隐藏文本和使用<h1>标签中的图片方面从来没有任何积极的说法，因此我总是犹豫是否建议将其作为解决方案。你的最后一种技术几乎肯定不属于为搜索引擎提供不同的内容，因此我也建议不要使用它。

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

H1图像替代替代品

2 个答案: