在标题标签中使用图像是否合适？答案

【问题标题】：Is it proper to use images inside header tags?在标题标签中使用图像是否合适？
【发布时间】：2011-02-16 07:41:35
【问题描述】：

我已经在谷歌上搜索了很多，但我无法得到一个直接的答案。

就 SEO 而言，在标题中使用图片有多糟糕？这样做的原因当然是能够显示非标准字体。我知道使用图像代替标题是不好的，但我想知道这种语法是否可以使它对搜索引擎更友好：

<h1><img src="header.jpg" alt="Level 1 Header" /></h1>

和这个有一样的效果吗？：

<h1>Level 1 Header</h1>

我怀疑这个问题的答案是否定的。我认为搜索引擎可能不会喜欢这样，因为您可以将任何文本放在 alt 属性中，而不会实际显示在页面上。那么在这种情况下，在不牺牲 SEO 的情况下使用图片作为标题的最佳方法是什么？

【问题讨论】：

标签： html seo

【解决方案1】：

一个老技巧是将真实文本放入<h1> 框中，然后使用 CSS 使文本不可见并将图像置于背景中。

所以你会做这样的事情：

h1 {
  color: transparent;
  background-image: url(your/cool/image.png);
  width:400px; height: 300px;
}

精明的 Stackoverflow 成员 K Ivanov 指出，最好通过“text-indent: -5000px”之类的方式将文本放置在远离页面的位置，从而使文本不可见。

【讨论】：

【解决方案2】：

将text-indent:-9999px; 与overflow:hidden; 一起用于标题是一种公认的做法（无论好坏）。

这会大量偏移文本，然后使用溢出来隐藏它。

这意味着您可以在您的 <header> 中有一个漂亮的大描述/标题，并以您希望的方式显示带有描述/标题的图像，这样您就可以两全其美。

“LatestWord”部分是一张图片，但如果您查看该部分的 CSS，您会发现采用了这种技术。

【讨论】：

该技术通常称为"CSS Image Replacement"，并且有一个相对较新的（好吧，3 岁）overview of pros and cons of various approaches here。
我们不应该通过使颜色与背景颜色相同或将其移出视图部分来隐藏 h1 标签或使 h1 标签对用户不可见。这将被谷歌爬虫检测到并处罚

【解决方案3】：

另一种解决标题中非标准字体问题的可能方法是使用Google Fonts API，假设它们可用的字体满足您的需求。

您还可以查看它们生成的样式表并尝试自己生成它们（假设您需要）。

【讨论】：