此篇會介紹常用的兩種 logo 常用的技巧 background、img 標籤,以及講述為什麼不建議 h1>a>img 架構。
<a href="index.html">
<img src="./images/logo.png" alt="logo 描述">
</a>
<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 底下的兩個電商分別採用兩種方法好神奇!!
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、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 不會設置 ,所以不會使用 、 兩者包裹的結構,而是直接設置 標籤就可以了。
對於 logo 來說沒有絕對正確的方法,還是要依照不同的目的去選擇相較方便的方法。