在标题标签内使用图像是否合适？

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"或其他东西将文本放置在页面之外,可能会更好地使文本不可见.

在某种意义上使隐形使用像文本缩进的东西:-1000px; 或者文本的绝对定位,否则屏幕阅读器也不会选择它,除非你不关心符合Section 508标准 (2认同)

Answer 2

将标题text-indent:-9999px;一起使用是公认的做法(既不好也不坏)overflow:hidden;.

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

这意味着你可以拥有一个漂亮的大型描述/标题,<header>并拥有一个你希望它出现的描述/标题的图像,这样你就可以获得两全其美的效果.

"LatestWord"部分是一个图像,但如果您查看该部分的CSS,您将看到使用此技术.