此篇會介紹常用的兩種 logo 常用的技巧 background、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

apple：background

stackoverflow：background

google：img

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

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

PChome 24h 購物

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 表示：「使用 img 標籤 alt 勝過 使用 background 透過 css 將文字隱藏起來的方式。」

延伸閱讀

• Image SEO: The Ultimate Step-by-Step-Guide For Ranking In Google Images

conclusion

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

reference

• Google Images best practices
• Should I include my logo text using 'alt' or CSS?