2016年3月11日

H1 標籤使用圖片代替文字時, 該如何處理?

A+
h1-image-replace-text-H1 標籤使用圖片代替文字時, 該如何處理?前陣子處理一個案子時,被詢問到「網站標題使用圖片的話,會不會比較不容易被搜尋到?」顯然這位讀者是具備 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_web_search-H1 標籤使用圖片代替文字時, 該如何處理?

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-website-H1 標籤使用圖片代替文字時, 該如何處理?

Google 每隔幾天遇上特殊的紀念日子,就會更換 Google Doodle 的主題,上圖的畫面,我特地檢視了網頁原始碼,看看 Google 是怎麼處理 H1 標籤的。

結果竟然發現 → 整個頁面找不到 H1 標籤!

一方面 Google Doodle 的圖案並非 "圖片" (IMG),而是可以互動的程式,一方面 H1 標籤的設計可能不是用來塞這樣的程式碼,所以 Google 乾脆連 H1 都不用了。

連 SEO 的制訂者 Google,都可以不在乎網頁裡非常重要的 H1 標籤,我想這傳達給部落格站長一個重要的訊息:不必過度鑽研 SEO

有些站長可能會依照網路教學進行不少 SEO 優化,而不小心找到的是過時、錯誤的操作方法,反而會被 Google 扣分。在這樣的情況下:

  • 完全不理會 SEO 可能只是沒加到分
  • 學習了不正確的 SEO 資訊反而比沒做還不好

我想站長們更關心的是如何提升網站的流量,那麼可參考這篇「部落格網站是否加強 SEO 就能帶來流量?」,相信可以打破 SEO 的迷思,瞭解真正提升流量更重要的因素有哪些。


更多 SEO 相關技巧:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。