二.結構與語意標籤-HTML改善SEO的重要技巧

--- disqus: aboo-front-note --- 二.結構與語意標籤-HTML改善SEO的重要技巧 === <h2>前言</h2> --- <article> 本篇介紹HTML的**結構標籤**與**語意化標籤**，結構標籤是最基本的HTML架構，換個有趣的比喻，就像是網頁的身分證一樣，如果沒有的話，瀏覽器可能無法判斷這些文字是HTML，進而無法正確顯示在瀏覽器上；語意化標籤是告知瀏覽器這些文字內容重要性與位置，就如同文章大多會有，開頭、主要內容、結尾等篇章結構，雖然沒使用語意化標籤仍可以正常的編寫與呈現網頁，但正確編寫語意化標籤的網站，除了在共同協作能省去一些麻煩外，在SEO(search engine optimization,搜尋引擎最佳化`,下附補充文章)也會有加分作用。 <ul style="background-color: lightskyblue; border-radius:20px;padding: 5%;"> <li>結構標籤</li> <ul> <li><!DOCTYPE html> </li> <li><html></li> <li><head></li> <li><body></li> <li><meta charset="utf-8"></li> <li><title></li> </ul> <li>語意化標籤</li> <ul> <li><header></li> <li><nav></li> <li><footer></li> <li><article></li> <li><aside></li> <li><section></li> </ul> </ul> </article> <H6> 延伸閱讀:[SEO是什麼? SEO怎麼做? SEO搜尋引擎最佳化入門指南](https://awoo.ai/zh-hant/blog/technical-or-content-2/) </H6> <h2> 1.結構化標籤</h2> --- 結構化標籤是HTML的必要元素，除了告知瀏覽器文件本身是HTML檔案外，還包含了網站使用的語言、編碼資訊，以及網站的標題呈現等資訊。基本上有固定的格式套版，許多HTML編碼器也都有預設功能，來一次化處理這些標籤，不過多了解這些標籤，能讓我們在翻玩前端網站時有更多變化。讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：[Dealing with files](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files)）： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body> </html> ``` 我們可以看到： * ` <!DOCTYPE html> `— 文件類型（doctype）。在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。 * ` <meta http-equiv="X-UA-Compatible" content="IE=edge"> `— 設置IE兼容模式，此段設定為什麼版本IE 就用什麼版本的標準模式。透過這段元素，能強制網頁用IE瀏覽器開啟的話，該使用哪個版本IE的架構，通常非常早期的網頁才需要特別設定。 ###### *詳細可參考：[X-UA-Compatible設置IE兼容模式](https://injerry.pixnet.net/blog/post/57042465)* * `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 設定網頁螢幕預設解析度，可幫助在RWD時確保網頁的視覺完整性。此段設定為指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。 ###### *詳情可參考:[RWD基礎 : <meta name=”viewport” > 設定](https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8)* * `<html></html> `— `<html>` 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。 * `<head></head> `— ` <head>` 元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。 * `<body></body>` — `<body>` 元素，包含了所有會顯示於網頁瀏覽者眼前的內容。無論是文字、圖片、影面、互動遊戲...等。 * `<meta charset="utf-8">` — 這個元素指定了你的文件使用utf-8這種字元編碼，建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。 * `<title></title>` — 呈現於網頁瀏覽者眼前的網頁標題。 <h6> *本段改寫自[MDN Web Docs-HTML：超文本標記語言初學者教學](https://developer.mozilla.org/zh-TW/docs/Web/HTML)* </h6> <h2>2.語意結構標籤</h2> --- 語意結構標籤，是讓瀏覽器知道段落功能與重要性的標籤，並非是HTML編寫上的必要元素，但在編寫HTML合適的使用語意結構標籤的話，能讓搜尋引擎更好的辨識出網站的主要資訊，進而提升網站在搜尋引擎的排名，也能幫助維護人員更快了解HTML的編寫邏輯。 * `<header></header>`：標題宣告，此區塊裡面可以有標題、網站名稱、網頁介紹、LOGO、導覽列(`<nav>`)、搜尋表單等內容。 * `<nav></nav>`：導覽列宣告，網站的導覽列。※影響SEO * `<footer></footer>`：結尾宣告，是網頁最下面的頁尾區，可能包含作者、版權、聯絡資訊、公司地圖等。 * `<article></article>`：文章宣告，完整的獨立內容區塊。※影響SEO * `<aside></aside>`：附加宣告，跟主要內容關係不大，可能是補充資訊或是廣告。※影響SEO * `<section></section>`：章節宣告，不屬於上述任一種，有自己特別含意的區塊。實際的使用範例如下圖： ![](https://i.imgur.com/LZ0lELN.jpg) 製圖參考:Fooish 程式技術-HTML5 SEO 語意結構區塊 https://www.fooish.com/html/SEO-semantic-layout.html <h2>結語</h2> --- 除了上面說的結構與語意標籤外，其實還有不少功能相似或相關的標籤，像是`<div>、<h1>`等，在SEO或是功能性上都有相似的地方。思考很久之後，打算繼續依照*HTML&CSS：網站設計建置優化之道*這本書的目錄架構，繼續寫下去。日更第三天，持續加油努力~ <h6>參考資料: [五倍紅寶石- I’m coding it! 微痛轉職工程師線上課程](https://iamcoding.tw/) [MDN Web Docs](https://developer.mozilla.org/zh-TW/docs/Web/HTML) [HTML&CSS：網站設計建置優化之道](https://www.books.com.tw/products/0010546014)(作者：Jon Duckett　出版社：碁峰 ) </h6> - [↳回筆記首頁](https://hackmd.io/@a91929s/SJdkV0okY) ###### tags: `六角筆記王` `阿布的前端學習筆記` `HTML` {%hackmd Iiu5mOixR7yWkPHKCkabBg %} <iframe class="LikeCoin" height=210 src="https://button.like.co/in/embed/a91929s/button?referrer=https://hackmd.io/@a91929s" width="100%"></iframe>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.