Question

我已经在谷歌上做了相当多的谷歌搜索，但我还没有得到一个直接的答案。

就搜索引擎优化而言，将图像用于标题有多糟糕？这样做的原因当然是能够显示非标准字体。我知道使用图像代替标题是不好的，但是我想知道这种语法是否会做任何事情以使它更适合搜索引擎：

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

它与此具有相同的效果吗？：

<h1>Level 1 Header</h1>

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

Answer 1

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

所以你会做类似的事情：

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

Astute Stackoverflow成员K Ivanov指出，通过使用“text-indent：-5000px”或其他东西将文本放置在页面之外，可能会更好地使文本不可见。

Answer 2

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

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

这意味着您可以在<header>中找到一个很好的大型描述/标题，并且按照您希望的方式显示描述/标题的图像，这样您就可以获得两全其美的效果。

“LatestWord”部分是一个图像，但如果您查看该部分的CSS，您将看到使用此技术。

Answer 3

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

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