h1 標籤 logo 常見迷思

2022 iThome 鐵人賽

DAY 18

Modern Web

意識界歸來的前端系列第 18 篇

14th鐵人賽

Kent

2022-10-03 23:58:42

941 瀏覽

分享至

此篇會探討如何運用 h1 標籤以及一些新手常見的錯誤迷思。

h1 用於公司名稱、logo
h1 logo 圖片取代文字
h1 文章標題

先來簡單複習一下 h1 標籤用途

MDN Heading：「Use only one <h1> per page or view. It should concisely describe the overall purpose of the content.」
白話文：「每頁或畫面上僅使用一個 h1，它應該要簡單地描述整個內容的目的。（例如：文章標題）」

h1 用於公司名稱、logo

根據在 search console help 上的這篇提問，google 有明確的提供建議：「Your h1 should be the main heading of a page and contain text that explains what the page is about. Typically that is not the name of the company that produces the website.」
白話文：「h1 應該要作為頁面主要的標題，包含解釋關於頁面內容的文字，通常，在頁面中不會作為公司名稱。」

所以不建議將 h1 標籤用於公司名稱。

方才的提問中 google 有對 logo 圖片提出建議：「If you display a logo image, then a good move is to add an alt attribute to it that states the name of the company associated with the logo.」
白話文：「如果要顯示圖片，那麼好的做法是添加 alt 屬性，並將公司名稱設為該屬性值。」

建議使用 alt 屬性來替代 h1。

google 還有提供了另一種方法 Logo (Organization) structured data。

h1 logo 圖片取代文字

上方 google 回答了「建議使用 img 標籤 alt 屬性來替代 h1」，但新手可能會覺得那是不是讓 h1 內有文字內容就可以了？

例如下方範例：「在 h1 添加文字並用 圖片取代文字 技巧隱藏」、「直接透過來設置 img 的 alt 作為 h1 文字內容」。

<!-- 透過圖片取代文字，將文字內容隱藏 -->
<h1>
  <a href="index.html">
    logo 的圖片取代文字
  </a>
</h1>

h1 a {
  background-image: url();
  width: 45px;
  height: 45px;
  display: block;
  text-indent: 101%;
  overflow: hidden ;
  word-spacing: nowrap;
}

<!-- alt 作為 h1 文字內容 -->
<h1>
  <a href="index.html">
    <img src="./images/logo.png" alt="logo">
  </a>
</h1>

下方將其拆為兩個方向來討論為什麼不推薦。