iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 06:優化SEO- 將 h1 圖片取代文字!

  • 分享至 

  • xImage
  •  

首先我們要先知道什麼是SEO?

https://ithelp.ithome.com.tw/upload/images/20200308/201248795P7nNrBojv.png

沒有SEO,人們只有5.59%的機會找到你

SEO為什麼重要?讓人們看見你

以Google的角度而言 :
Google不斷的更新演算法,並調整網站的排名,以提供使用者最佳答案的過程。
以圖書館的角度而言 :
圖書館員透過整理書的擺放位置,並隨時引進新書及報章雜誌,以提供讀者最新資訊及最佳答案的過程。
※以我的角度而言 :
了解搜尋引擎的運做規則,透過一些調整網站的方法,取得好的網站排名。

這樣我們就瞭解為何要將 h1 (主標題)內的文字置換成精美的 LOGO 圖片了

h1 (主標題)佔搜尋引擎搜索優化部分非常重!
假如我希望使用者一搜尋 就能找到網站,但我也希望 h1 是一張美美的 LOGO,那我是不是會寫成下面的格式呢?

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
}
</style>

但這樣一來,我們就會得到以下的畫面

https://ithelp.ithome.com.tw/upload/images/20200308/20124879iIjLBIWJ50.png
但是我們希望 h1可以讓搜尋引擎找到但文字不會出現,這時候怎麼辦呢?
我們可以這樣寫

方法一

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
  text-indent:-9999px;
}
</style>
  • text-indent:-9999px,讓文字向左偏移 9999px、出現在螢幕之外的地方,也等於是隱藏文字
  • 在為 h1 設定背景圖片(background),就完成了 "h1 標籤以圖片取代文字" 這件事

方法二

<h1>我要搜尋貓咪</h1>
<style>
h1{
  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  width: 500px;
  height: 333px;
  text-indent: 101%;
  white-space: nowrap;
  overflow: hidden;
}
</style>
  • text-indent: 101%
    強迫文字縮排至原本的區域外
  • white-space: nowrap
    規定段落中的文字不得進行換行,常用於避免字數過多時自動換行導致閱讀效果變差
  • overflow: hidden
    將超出範圍的內容隱藏

這樣一來我們就可以得到美美的 LOGO 圖,又可以讓瀏覽器搜尋到我們的h1標籤!
https://ithelp.ithome.com.tw/upload/images/20200308/201248790OjPovLbwf.png

總結

SEO是一門很深的學問,我也還在學習,利用css設定樣式,既可以得到美美的logo圖,又可以優化SEO。

小孩子才做選擇,我全都要!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言