在header标签中使用图片合适吗？

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;
}

精明的Stackoverflow成员K Ivanov指出，通过使用" text -indent：-5000px“或其他东西将文本定位到远离页面的位置，使文本不可见可能会更好。

Answer 2

与overflow:hidden;一起使用text-indent:-9999px;作为标题是一种公认的做法(不是好的，也不是坏的)。

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

这意味着你可以在你的<header>中有一个漂亮的大的描述/标题，并有一个你想要的描述/标题的图像，这样你就可以两全其美了。

一个很好的例子是：http://www.sohtanaka.com/web-design-blog/

"LatestWord“部分是一个图像，但是如果您查看该部分的CSS，您将看到采用了这种技术。

Answer 3

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

您还可以查看他们生成的样式表，并尝试自己生成它们(假设您需要这样做)。