在標題標籤內使用圖像是否合適？

我在Google上做了很多搜索，但是我一直沒能得到直接的答案。在標題標籤內使用圖像是否合適？

在SEO方面，使用頭像的方式有多糟？這樣做的理由當然是能夠顯示非標準字體。我知道這是不好的到位頭使用的圖片，但我想知道，如果這種語法會做任何事情，使之更加搜索引擎友好：

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

是否有相同的效果這?:

<h1>Level 1 Header</h1>

我懷疑這個問題的答案是否定的。我認爲搜索引擎可能不會這樣，因爲您可以將任何文本放在alt屬性中，而不會實際顯示在頁面上。那麼在那種情況下，在不犧牲搜索引擎優化的前提下使用頭像的最佳方式是什麼？

不推薦，因爲抓取工具不能解釋圖像，但他們可以文本...所以它不是明智的SEO，但我猜有效。 – JCOC611 2011-02-15 22:54:34

一個古老的訣竅是將真實文本放在<h1>框中，然後使用CSS使文本不可見並將圖像置於背景中。

所以，你會做這樣的事情：

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

精明的成員＃1 K Ivanov指出，它可能會更好，使文本通過它定位方式了與「TEXT-INDENT頁面無形： - 5000px「或什麼的。

2011-02-15 22:55:22 Pointy

使某種意義上的隱形使用像文字縮進：-1000px;或文本的絕對定位，否則屏幕閱讀器也不會選擇它，除非你不關心是否符合Section 508標準 – 2011-02-15 23:02:55

@K Ivanov這是一個非常好的點！謝謝，我會更新答案。 – Pointy 2011-02-15 23:12:32

另一個可能的解決方案是使用Google Fonts API，這是假設他們可用的字體滿足您的需求。

你也可以看看他們生成的樣式表，並嘗試自己生成它們（假設你需要）。

2011-02-15 23:15:14 Thomas

對於標題，使用text-indent:-9999px;和overflow:hidden;是公認的做法（既不好也不壞）。

這會使文本大量偏移，然後使用溢出來隱藏它。

這意味着你可以有一個漂亮的大描述/標題在<header>，並有圖像與描述/標題，你希望它出現的方式，這樣你得到兩全其美。

的「LatestWord」部分是圖像，但如果你看看CSS的部分，你會看到這種技術使用。

2011-02-15 23:41:35

回答