• 優良的語意化網頁結構才有辦法讓搜尋引擎 ( SEO ) 友善的收錄 。
• 對網頁來說 H1 ~ H6 越前面權重越大。
• 段內容都要視權重標示清楚正確的網頁標籤，優良的語意化網頁結構才有辦法讓搜尋引擎友善的收錄
• 網頁中只會有一個權重最大的 H1 標籤。如果使用多個 H1 標籤，爬蟲在網頁中會無法辨識哪個才是最重要的資訊。

LOGO 圖片取代文字

為什麼要使用圖片取代文字的方式來寫LOGO?

因為 google 機器人無法搜尋到圖片，只會認文字內容，所以為了讓搜尋引擎能夠找到網站重要內容，建議用圖片取代文字的方法。

LOGO 圖片取代文字步驟 ( CODEPEN 範例連結 )

• 設 H1 表示此 LOGO 為此網頁權重最重 。
• H1 內設 a 連結 & 文字 ( 搜尋引擎在搜尋時可以搜尋到文字內容，也可保有連結 )。

<h1 class="logo">
	<a href="#">公司LOGO</a>
</h1>

• logo 背景圖位置寫在 a 連結，才能點擊的到。
• a 連結為行內元素，記得寫 display:block 變區塊元素logo圖才會正確顯示

display:block;
background:url('logo圖片路徑') no-repeat;

• 加入下方 css 屬性， logo圖就會取代文字

text-indent:101%; /*首行縮排*/
overflow:hidden; /*自動隱藏超出的文字或圖片*/
white-space:nowrap; /*希望元素在第一排上面，沒有斷行*/

EX01. 選單中加入logo ( 圖片取代文字 ) 。 ( CODEPEN 範例連結 )

此範例使用 float

1. 以 h1 與 a 連結寫出一個logo
2. 以 ul 與 li 做出選單
3. 要讓 logo 與選單排成一列，需使用到 float
   1. logo 靠左 ，選單們先靠右在靠左
4. 有使用到浮動的元素都需要進行清除浮動的動作 clearfix:after
5. 再依喜好調整 logo 與選單的距離即可
6. 文字很抽象， 請搭配範例服用XD

HTML 中使用 img 標籤 與使用背景圖 background-img 差異 ?

使用背景圖

<h1 class="logo"><a href="#">公司LOGO</a></h1>

• 使用 background-img 背景圖可把文字與圖片寫在同一個標籤上，在一個結構即可完成，不用再多寫一個 img 標籤，較簡潔。另外因為搜尋引擎無法辨別圖片，可辨別文字所以使用圖片取代文字。
• 用 H1 包覆，則是方便搜尋引擎爬取網頁時，瞭解這此為網頁中最重要的內容。
• 綜合以上，所以使用 H1 標籤 " LOGO 圖片取代文字 " ，這些都有助於 SEO 優化。

在 HTML 使用 img 標籤

<a><img src="" alt=""></a>

• img 標籤 ，會把替代文字寫在 alt 屬性內，除了圖片失效時會顯示，也有助於搜尋引擎的優化。

資料來源

• 六角學院 : 使用 HTML、CSS 開發一個網站
• 優良的語意化網頁結構才有辦法讓搜尋引擎 ( SEO ) 友善的收錄 。
• Goodbye -9999px: A New CSS Image Replacement Technique