HTML 看似複雜，其實簡單易學。透過這篇文章，我們希望向那些對 HTML 毫無經驗的人掌握基本知識，並介紹 7 個對 SEO 極其重要的 HTML 標籤，助您提升網站的搜尋引擎排名。
HTML 基礎知識
什麼是 HTML？
HTML（英語：HyperText Markup Language，簡稱：HTML），也可以稱為超文本標記語言，是一種用來建立網頁的標準標記語言。 HTML 通過使用各種標籤和屬性來格式化文本、插入圖像和建立超連結等，我們可以透過使用不同的標籤和屬性來定義網頁的結構和外觀，同時它也是整個網頁開發過程的基礎。
就像人們需要語言來溝通一樣，人們依靠語言來說明需求和意圖，而人們與瀏覽器之間的溝通則是需要依靠 HTML 語言。它的運作過程有點複雜，本篇不在此多著墨，簡單來說當我們在瀏覽器中打開一個網頁時，瀏覽器會解析 HTML 代碼並將其轉譯為我們看到的視覺內容，這個轉換過程被稱為渲染（Render）。
HTML 的基本結構
HTML 是建立網頁的基本工具，透過使用不同的標籤和屬性，我們可以控制網頁的結構、外觀和功能，就像建造一座房子需要使用各種建材和工具一樣，建立網頁內容也需要 HTML 作為基礎材料。
在 HTML 的基本結構中，我們可以將它分為宣告、Head 和 Body 三個主要部分，每個部分都扮演著不同的角色，接下來該段落會介紹這三個部分的功能，讓您對 HTML 結構有更清晰的了解，從而消除對 HTML 原始碼的困惑。
- 宣告
儘管宣告只有一個標籤，但它是必不可少的。
(每個網頁都需要宣告)
在 HTML5 普及之前，需要冗長的宣告說明，不過從全球資訊網協會（W3C）於 2014 年 10 月完成標準制定後，只需要在文件開頭的寫入 <!DOCTYPE html> 就可以向瀏覽器宣告網頁使用 HTML5 編程，而這個宣告的意義是讓瀏覽器知道網頁使用 HTML 來撰寫網頁，以利協助瀏覽器能夠正確地解析我們的編碼資料，並且提供給使用者完整的內容。
- 標頭（Head）
(標頭區塊 Head 放置網頁的名稱等重要訊息)
網頁中的「Head」部分是 HTML 的一個重要區塊，它包含了網頁的名稱、css 樣式、JavaScript 程式碼以及其他相關的資訊。這些資訊不會直接顯示在網頁上，但它們對於網頁的結構、樣式和功能都至關重要。簡單來說，「Head」提供了瀏覽器關於網頁的重要指示，幫助瀏覽器正確地解析和顯示網頁內容。
- 網頁內容主體（Body）
(網頁主體 Body 放置我們在網頁上看到的所有內容)
網頁主體「Body」承載了網頁中所有我們在網頁上看到的內容，常見的包括文字、圖片、表格、連結等等 ，在網頁主體「Body」除了文字、圖片外，我們還可以加入文章目錄、產品列表和其他內容，所有顯示在網頁上的內容都放置在「Body」中，並且這些內容都直接呈現給使用者，使用者可以閱讀文章、觀看圖片、填寫表單等與之互動。
值得一提的是，HTML 不僅僅是單個標籤的排列，像 <div> 這樣的標籤通常包含著其他多個標籤，然後再形成一個包含多種標籤的區塊。例如，一個 <div> 可以包含著活動商品清單、活動日期和商品連結等內容，這些元素共同構成了一個獨立的區塊，為使用者提供更完整的資訊和體驗。
關鍵 HTML 標籤：提升網站 SEO 的七個秘訣
在這個數位時代，了解如何運用 HTML 標籤最大程度地優化您的網站至關重要。接下來，我們將向您介紹 7 個關鍵的 HTML 標籤，它們與 SEO 緊密相關。正確運用這些 HTML 標籤，能夠為您的網站帶來更好的 SEO 效果，讓我們一起認識這些 HTML 標籤，並了解如何利用它們來提升您網站的能見度和效果。
網頁標題 （Title）
程式碼：<title>頁面標題</title>
網頁標題（Title）在 SEO 中扮演著關鍵的角色，因為它是使用者在搜尋引擎結果中首先看到的內容，一個吸引人又富含關鍵字的標題是至關重要的。為了避免標題在搜尋結果（SERP）中被截斷，包含標點符號，建議將標題總字數控制在約 30 個中文字左右（約 60 個字符）。
網頁描述 （Meta description）
原始碼：<meta name=”description” content=”頁面描述內容” >
網頁描述（Meta description），在搜尋結果（SERP）提供了網頁內容的摘要，雖然它們不直接影響搜尋排名，但引人入勝的描述可以影響頁面的點擊率，建議將頁面描述內容的總字數控制在 75 到 80 個中文字左右（約 150 到 160 個字元）。
相關文章：Meta Title Description 怎麼寫？別小看標題、摘要，SEO 老司機就是你！
網頁內容的標題標籤（Heading Tags）
原始碼：<h1>標題名稱</h1> （其他 H 標籤寫法雷同）
網頁文章內容的標題標籤，常見的有 <h1>、<h2> 和 <h3>，其中 <h1> 代表頁面的主標題，而 <h2> 和 <h3> 則分別用於副標題和其子標題。
適當地使用這些標籤來代表文章內容的標題，不僅增強了使用者的可讀性，同時也有助於搜尋引擎理解內容的層次結構和相關性。
相關文章：如何透過H標籤做好網站 SEO？H 標籤重要性介紹
圖片的文字描述（img alt 屬性）
原始碼： <img src=”圖片位址” alt=”圖片文字描述”>
搜尋引擎的爬蟲無法直接理解圖片的內容，因此透過 <img> 標籤的 alt 屬性提供的文字描述，可以讓搜尋引擎能夠更好地理解圖片的內容和意義。此外，它還能提供更友善的閱讀環境，對於視覺障礙的使用者，或者因為網路問題等原因無法正確載入圖片的狀態，可以透過 alt 文字對圖片的文字描述，協助使用者能夠理解圖片的內容和意義，從而提高網站的無障礙訪問性。
相關文章：
HTML Image Alt 全攻略！簡單四原則，讓 Google 輕鬆看懂你的圖片！
連結和連結標題（a 標籤和其 title 屬性）
原始碼：<a href=”網址” title=”指向連結的描述性文字”>錨文字標題</a>
在 SEO 中，可以使用 <a> 標籤來定義超連結，它可以將特定的文字或圖片轉換為「可點擊的連結」，並且引導使用者透過「可點擊的連結」訪問站內或站外的其他網頁。這對於建立網頁之間的內部連結和外部連結很重要，同時也有助於提升網站的搜尋引擎排名和網站流量。
另外，除了使用 <a> 標籤建立「可點擊的連結」外，還可以使用「a 標籤的 title 屬性」優化連結標題，寫入準確的解釋連結意思的描述性文字，可以協助使用者在連結上懸停時獲取有關連結的附加資訊、鼓勵他們點擊並進一步探索。
相關文章：
什麼是內部連結？3 分鐘搞懂內部連結策略規劃，邁向 SEO 成長之路
SEO 外部連結建立指南：7 個技巧＋wiki 操作案例解析
Meta Robots 標籤
原始碼：<meta name=”robots” content=”參數指令”>
Meta Robots 標籤（Meta Robots Tag）的主要用意是在網站的 HTML 頁面中為搜尋引擎的爬蟲（如 Googlebot）提供指示，網站擁有者可以透過它告訴搜尋引擎如何檢索和索引網站內容，擋掉一些不需要被收錄的網站等，以利確保搜尋引擎收錄的頁面有較高的品質。
以下是 Meta Robots 標籤的一些常用的參數設定：
| 參數設定 | 解釋 | 寫法 |
| Index | 屬於默認條件，意即告訴搜尋引擎可以索引網頁的內容。 | <meta name=”robots” content=”index”> |
| Noindex | 告訴搜尋引擎不要索引網頁的內容，通常用在測試中的網站、不需要公開的內容，以及站內的重複內容。 | <meta name=”robots” content=”noindex”> |
| Follow | 屬於默認條件，告訴搜尋引擎可以追蹤網頁上的所有連結。 | <meta name=”robots” content=”follow”> |
| Nofollow | 告訴搜尋引擎不要追蹤網頁上所有連結，防止因連結的設定，將頁面權重傳遞給指定的連結。 | <meta name=”robots” content=”nofollow”> |
相關文章：
使用”noindex”等 4 種方式禁止特定網頁被收錄，提升網站整體 seo 品質
link canonical
原始碼：<link rel=”canonical” href=”標準網址”>
重複內容會分散頁面的權重，並削弱單個頁面的相關性，通過設定 link canonical 標籤，網站擁有者可以指定單個網址作為標準網址，向搜尋引擎表明應該優先考慮哪個版本的網頁進行索引和排名。
相關文章：Canonical 標準網址操作指南，操作 SEO 不再苦惱
正確使用這些 HTML 標籤能夠有效提升網站的 SEO 表現，吸引更多潛在訪客。對於每個網站擁有者來說，理解並靈活運用這些標籤是應該重視和學習的關鍵。在這篇文章中，我們深入探討了 7 個與 SEO 密切相關的 HTML 標籤，從標題 Title 到 img alt 屬性，再到 Meta Robots 標籤，每個標籤都扮演著關鍵的角色，影響著網站的搜尋引擎排名和流量，希望這些內容能對您有所幫助，並為您的網站帶來更好的表現！
如有任何網站流量成長相關問題與需求、或想瞭解更多 awoo SEO／SEM 服務歡迎立即諮詢，將有 awoo 專業顧問與您聯繫。
▎延伸閱讀：2024 Google I/O 大會 —— AI Overviews & SGE 未來四大新功能｜Google SGE 快訊 2024 Vol.2
