Question

我正在处理的网站使用CSS中定义的图像作为主要徽标。 html代码如下所示：

<h1>Something.com | The best something ever</h1>

我想只显示CSS中定义的图像，并将信息从h1标签传递给搜索引擎。

这样做的正确方法是什么？ Google对此非常严格，我知道显示：没有错，可见性如何：隐藏？

提前致谢！

Answer 1

visibility: hidden你应该没问题。

也就是说，如果您的图片是内容的一部分（我敢说公司徽标是内容，而不是演示文稿），并且您关心可访问的HTML，您应该考虑更改您的代码将图片包含为img元素，其中包含title和alt ernate文本，而不是css background-image。

此外，如果您希望将搜索引擎吸引到<h1>元素中的关键字，您可能希望在页面中多次包含这些字词。例如，页面标题比h1元素更相关。

Answer 2

最简单，最简单，最适合SEO解决方案的是

<h1><img src=logo.png alt="Something.com | The best something ever"></h1>

Answer 3

将图像设置为h1的背景（设置宽度/高度以使其适合），然后将文本缩进设置为像-9999px一样疯狂的东西。这样当css被禁用（例如被抓取）时，机器人将在标题中看到文本而不是背景。

示例：

CSS

#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}

HTML

<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>

Answer 4

执行此操作的“正确”方法是将文本放在标题栏或页面的元文本中。

Answer 5

如果您首先隐藏h1，并且第二次在h1中使用通用短语，那么您将不会获得良好的搜索引擎优化结果。

不要只使用h1来调整大小，你可以使用类来设置样式。

H1标签应包含关键字丰富的信息，例如：

汽车维修

汽车维修是与我理论上正在处理的特定页面相关的关键字。

希望这是有道理的。

Answer 6

<h1 style="font-size: 0px; margin: 0px;">Something goes here</h1>

像魅力一样......; - ）

Answer 7

我认为能见度：隐藏;会工作得很好。你试过了吗？

Answer 8

您的网站只包含一个页面吗？

否则，您应该将每个页面的标题放在h1标记中，而不是网站的标语。在每个页面上重复相同的标题会使它几乎无用。

Answer 9

调整块的大小可以起作用：

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

Answer 10

此处解释了此问题的完整文章https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ 因此，当我工作时，我使用此代码来支持屏幕阅读器以及隐藏一些h1＆s并使用图片而不是像（徽标）

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

查找更多信息，请点击链接

隐藏<h1>标记并且不被Google禁止的正确方法是什么？</h1>

10 个答案: