網頁使用圖片設計，如何 SEO 優化

由於中文字型在網頁應用上的稀少與顧及頁面美觀的原因，大多數的網頁設計師會選擇直接使用圖片進行排版。但圖片的問題，就是無法讓搜尋引擊搜尋到內容，所以通常使用 <img> 標籤的時候，就務必要將內容都打在 alt 屬性中才行！但如果是圖片背景呢？

狀況一 ：連結標籤
連結標籤 <a> 使用 background-image 設定背景時，那麼還可以打 alt 屬性嗎？當然是不行！ alt 屬性是屬於 <img> 標籤所使用的，在這個時候你就要改用 title 屬性來取代！

狀況二：分區標籤
分區標籤 <div> 使用 background-image 設定背景時，這個時候你還是可以用 title 屬性來取代，但是！通常使用 <div> 來放置背景圖片，表示你的內容也是滿多的，打一推文字在 title 屬性，結果滑鼠移上去的，就會顯示一大串的文字提示泡泡，甚至沒有排版！

解決的辦法就是文字內容照樣打在 <div></div> 之間，然後將此 <div> 加上 CSS 樣式  text-indent: -9999px;  就可以把文字排到九霄雲外去啦！然後你還可以針對內容加上 <h1> <h2> ...等標題標籤 與 <b> <strong> 來引導搜尋引擊抓取重點文字！不僅頁面美觀又能強化 SEO 是不是很不錯呢！

其他的辦法，例如使用 display: none; 或 visibility:hidden; 的  <span> 標籤包住文字，同樣也可以做到隱藏文字，這個方法確實有用！但卻是被搜尋引擊認定的作弊方法，反而遭到處罰！當然 text-indent: -9999px; 也是屬於作弊方法，但這個方法使用多年至今搜尋引擊還是無法判定作弊的！如果你還是有疑慮，範例如下

div {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}

這個方法是基於 text-indent 再加上溢出隱藏，這樣的好處可以讓瀏覽器描繪時，不再產生 9999px 的區塊，進而改善網頁效能！ 

文章出處：網頁設計便利貼