前陣子處理一個案子時，被詢問到「網站標題使用圖片的話，會不會比較不容易被搜尋到？」顯然這位讀者是具備 SEO 概念的，一般來說，網站標題會放在最重要的 H1 標籤，而且使用文字敘述。由於 SEO 非我的專長，還是看看專家怎麼說比較保險。然而在尋找資料的過程中，發現用 "H1 標籤 圖片 代替 文字" 這幾個關鍵字去搜尋，前幾篇竟然全是錯誤的作法。
當然 SEO 的操作方法每一年都有可能變動，但是若排名在前的文章都不是正確資訊時，我相信沒幾個人知道這件事該怎麼做。為了讓讀者能接收到正確的訊息，還是寫一篇標準作法比較好。
(圖片出處: pickupimage.com)
一、text-indent: -9999px
在開始之前，如果讀者對 H1 標籤的意義不太清楚，可先參考這篇「符合 SEO 的 H1 H2 H3 標籤配置研究」。
而從接觸網頁設計的領域以來，就不斷看到 text-indent: -9999px 這個神奇的技法，用在 H1 標籤。他的原理是這樣的：
- 當網站標題需要使用圖片呈現時(比較美觀)，H1 標籤就不能讓文字出現
- 但又怕搜尋引擎機器人沒有讀取到 H1 的網站標題文字，導致 SEO 受影響，於是仍在 H1 塞入文字。
- 以前的 SEO，如果直接用
display: none 隱藏文字，會被搜尋引擎扣分 - 所以出現了這招
text-indent: -9999px ，讓文字向左偏移 9999px、出現在螢幕之外的地方，也等於是隱藏文字 - 最後再為 H1 設定背景圖片(background)，就完成了 "H1 標籤以圖片取代文字" 這件事
在以前的年代，相信這是 SEO 高手為了對付 Google 想出的高招。不過我一直覺得這技法很不自然，且對 SEO 優化不太積極，所以沒有很想用這招。
二、Google 官方說法
這個國外討論串「For SEO of the company name, should we use a logo with alt text or a company name div replaced in CSS with an image?」正是本文的主題，回答者引述了 Google 搜尋引擎部門龍頭 Matt Cutts 的話，這真是太好了！由 SEO 制訂者本人說出的話，大家就能奉為圭臬了。Matt Cutts 的說明影片如下：
雖然回答者很貼心的附上 Matt Cutts 英文逐字稿，但很顯然他的聽力不太好，其實看不太懂逐字稿是什麼意思，那麼以下是我針對 Matt Cutts 口述內容的簡單翻譯：
- 有人詢問 "想把公司 Logo 放在網站時，為了做好 SEO，有什麼好方法可以加入文字呢，應該使用 ALT 屬性嗎？如果用 CSS 把文字隱藏起來會不會有影響？"
- 以下都是 Matt Cutts 的回答：(用 CSS 把文字隱藏起來)當然有影響(對SEO不太好)，最好的方法是直接使用圖片，然後在圖片 IMG 標籤 的 ALT 屬性，放入你要加入的文字敘述。
- 這個作法會比使用各種 CSS 技法來隱藏文字來得好，就像是 text-indent: -9999px 這樣的 CSS 隱藏文字技巧。
- 這就是為什麼要為 IMG 標籤設計 ALT 的原因，所以放心的使用 ALT 吧！搜尋引擎會辨識且讀取 ALT 的文字。
- 如果是我，就不會使用任何 CSS 隱藏文字的方法。IMG 的 ALT 屬性是個最簡單又方便的作法，可以達到 SEO 的目的。
好了，相信大家都知道該怎麼做了，而且這個影片還是 2009 年 6 月發佈的喔！可見這件事以訛傳訛至少將近七年了。
三、Google 官網
來舉個實例，看看 Google 是怎麼做這件事的，下圖是我們每天都會拜訪的 Google 網站：
Google 官網並沒有網站標題文字 "Google"，而是用各種顯示 "Google" 字樣的圖片、每天都可能更換，那麼 H1 標籤是如何設定的呢？檢視了網頁原始碼後，長的像這樣：
<h1><a id="logo" href="https://www.google.com.tw/webhp?hl=zh-TW" title="Google 首頁"><img width="167" height="410" src="/images/nav_logo242_hr.png" alt="Google"></a></h1>我們可以看得很清楚，H1 標籤之內放了 IMG 標籤，且使用了 ALT，內含網站標題 "Google" 文字。
所以處理 "網站標題使用圖片" 這件事變得很簡單、也很直覺，當 Google 都這麼做時，那麼我們也依樣畫葫蘆就行了。
四、打破 SEO 的迷思
瞭解 H1 標籤如何正確設定是重要的事，不過 2016/3/9 看到的這個 Google 官網畫面，覺得可以給讀者更深層面的思考：
Google 每隔幾天遇上特殊的紀念日子，就會更換 Google Doodle 的主題，上圖的畫面，我特地檢視了網頁原始碼，看看 Google 是怎麼處理 H1 標籤的。
結果竟然發現 → 整個頁面找不到 H1 標籤！
一方面 Google Doodle 的圖案並非 "圖片" (IMG)，而是可以互動的程式，一方面 H1 標籤的設計可能不是用來塞這樣的程式碼，所以 Google 乾脆連 H1 都不用了。
連 SEO 的制訂者 Google，都可以不在乎網頁裡非常重要的 H1 標籤，我想這傳達給部落格站長一個重要的訊息：不必過度鑽研 SEO。
有些站長可能會依照網路教學進行不少 SEO 優化，而不小心找到的是過時、錯誤的操作方法，反而會被 Google 扣分。在這樣的情況下：
- 完全不理會 SEO 可能只是沒加到分
- 學習了不正確的 SEO 資訊反而比沒做還不好
我想站長們更關心的是如何提升網站的流量，那麼可參考這篇「部落格網站是否加強 SEO 就能帶來流量？」，相信可以打破 SEO 的迷思，瞭解真正提升流量更重要的因素有哪些。
更多 SEO 相關技巧：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。