iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
Modern Web

意識界歸來的前端系列 第 1

logo 圖片取代文字 background、img 標籤差異

  • 分享至 

  • xImage
  •  

此篇會介紹常用的兩種 logo 常用的技巧 background、img 標籤,以及講述為什麼不建議 h1>a>img 架構。


img

  • img 會將文字設置為 alt 屬性的值。
<a href="index.html">
  <img src="./images/logo.png" alt="logo 描述">
</a>

background

  • background 會將文字設置為 h1 標籤文字內容,並加上 css 樣式將文字隱藏起來。
<h1>
	<a href="index.html" class="logo">logo圖片取代文字</a>
</h1>
.logo {
    background-image: url('./images/logo.png');
    width: 50px; 
    height: 55px;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
}

用法差異

下方演示兩種用法的 HTML 結構差異

<!-- background 結構:h1 > a -->
<h1>
	<a href="index.html" class="logo">logo圖片取代文字</a>
</h1>

<!-- img 結構:a > img -->
<a href="index.html">
  <img src="./images/logo.png" alt="logo 描述">
</a>

常遇到的問題是,兩種方式用起來有什麼差異哪一種方法設置 logo 比較好?

如果對於後端塞圖片路徑來說應該是 background 來說比較方便,使用 img 直接寫死會導致需要更換圖片時就要重新部署一次。

下方來看看其他網站的 logo 是使用哪種方法吧

amazon:background
amazon

apple:background
apple

stackoverflow:background
stackoverflow

google:img
google

從上方大網站來看只有 google 是使用 img 標籤,其它都是使用 background。

在台灣網站中有一個有趣的發現,PChome 底下的兩個電商分別採用兩種方法好神奇!!

PChome 24h 購物
PC hone 24h

PChome 商店街
PChome 商店街


SEO

Q:background、img 哪種方式對於 SEO 比較好?
A:從下方兩個參考文獻來看,對於圖片來說那 img alt 會是比較好的選擇。

[1] Google Images best practices

[2] Should I include my logo text using 'alt' or CSS?

google 表示:「使用 標籤 alt 勝過 使用 background 透過 css 將文字隱藏起來的方式。」

延伸閱讀


h1>a>img 架構為什麼不推薦?

一般常見的用法是前面提到的 h1>a、a>img 這兩種方法,而下方範例是一開始接觸切版時,logo 可能會設置的架構。

<h1>
	<a class="logo" href="index.html">
		<img src="logo.png">
	</a>
</h1>

先談談為什麼開始接觸切版時會出現這種架構?

  • 學習設置 標籤(有些文章會提到 logo 設置 有利於 SEO)
    這個觀念不能說錯,因為設置 確實多少可以提升 SEO,但沒有明確的文獻來表示 logo 設置 對於SEO 影響有多大。但現在主流的做法不是在 logo 設置 ,而是對網頁中「最重要的內容」來設置 ,例如:新聞網頁最重要的就是新聞標籤、產品展示網站最重要的是產品名稱。

  • logo 設置跳轉到首頁
    通常,logo 會有跳轉到首頁的功能,所以會建議設置 標籤並補上對應路徑,例如: logo 設置 href 跳轉到 index.html。

總結,目前主流 logo 不會設置 ,所以不會使用 、 兩者包裹的結構,而是直接設置 標籤就可以了。


conclusion

對於 logo 來說沒有絕對正確的方法,還是要依照不同的目的去選擇相較方便的方法。

reference


下一篇
多個 h1 標籤
系列文
意識界歸來的前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言