以 <h1> 包覆 logo: 圖與文字可同時被搜尋到的技巧

Photo by Szabo Viktor on Unsplash

在開始撰寫 HTML 之前，我們需要先規劃好 <h1>~<h6> 標籤，<h1> 為網頁中最重要的標題，通常一個網頁中只會有一個 <h1>，其餘 <h2>~<h6> 則按照資訊的重要性安排它們的順序。

撰寫網頁時，若決定選用 <h1> 標籤來包覆 logo 圖片，則代表這是網頁中最重要的資訊，在 HTML 結構中，會以 <h1> 來包覆 <a>：

而在 CSS 則用 background-image 在 <a> 置入 logo 背景圖片，也必須特別注意要加上 display: block 才能將 <a> 由行內元素轉為區塊元素，也才能完整顯示圖片的寬高：

此時，在瀏覽器上除了顯示 logo 圖案，在圖片之上也會出現 <a> 內的文字 Karen’s Coding Notes：

到這裡，問題出現了，既然在網頁 SEO 的規則中，<h1> 意味著主要標題，一個網頁中也只能有一個 <h1>，既然用 <h1> 來包覆 logo 圖示，是代表 logo 被認定為這一頁的重要資訊，因此，google 爬蟲程式需要在 <h1> 讀到與圖片相關的文字，否則將會判定不符合 SEO 規定，因此 <h1> 內勢必要有文字。

那麼，到底該如何才能在網頁中以圖片取代文字呢？

由於 <h1> 本身就是一個區塊元素，因此，可以運用將文字推出區塊元素的原理，來進行文字的挪移。

text-indent: 101%; 將文字推出 <h1> 之外
overflow: hidden; 將溢出區塊的部分都隱藏起來
white-space: nowrap; 則是強制這一串文字不換行。

最後，文字被推出 <h1> 區塊，即可得到以下畫面：