html - 在 header 标签内使用图像是否合适？

Question

我已经在谷歌上搜索了很多，但没能得到直接的答案。

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

<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 成员(member) K Ivanov指出通过使用“text-indent: -5000px”或其他方式将文本定位在远离页面的位置来使文本不可见可能会更好。