CSS_圖片取代文字(SEO優化)

本文总阅读量次

SEO搜尋優化

文字在SEO中的影響力仍然大於圖片，但我們也不可忽視圖片搜尋的趨勢。要兼顧排版及SEO，建議以圖文並茂、相輔相成的方式進行，若是因為版面限制，則可以運用其他可以放文字的區塊、頁面，將圖片中的內容轉換成文字，讓搜尋引擎爬蟲知道你的網站中也有這些內容！

瀏覽器爬蟲網頁的過程會以搜尋文字為主，採用此形式協助網站做SEO優化

目的：標題內新增圖片，讓logo背景蓋住文字內容

1
2
3
4
5
6
7
8
9
.logo h2{
    background-image: url(/photo/logoword.jpg);
    width: 200px;
    height: 300px;
    display:block;
    overflow: hidden;
    text-indent:101%;
    white-space:nowrap;   
}
  • text-indent: 101% 這是表示 段落首字縮排，將文字推出logo背景
  • overflow: hidden;超出 div 父元素時，自動隱藏該元素
  • white-space: nowrap：規定段落中的文字不得進行換行，常用於避免字數過多時自動換行導致閱讀效果變差