想到 SEO，你想到的是什麼？是內容的產出，還是關鍵字的分析，又或者精美的圖片？這些都對，但又沒點到對的位置，其實是 HTML 這個基本功，沒有了 HTML，任何爬蟲系統都不知道你的網站在做甚麼，想傳達什麼，網站架構樣式，說白了，沒有好的 HTML，會讓最聰明的爬蟲系統也變成瞎子。
剛進 SEO 公司時，我馬上就得面對各種 HTML 的盤查，文字是否有用<p>包住，H 標籤層級正確嗎？連結是否有 target=”_blank”可以讓連結另開新視窗，<div>不只包到表格，也包到所有文章。使用 F12 看圖片 Alt、Description、Title 等，都是 HTML 的關鍵，雖然並非一個個手打，但都必須瞭解這些意思為何，才算是一個 SEO 專業人員。
HTML 很重要，需要看懂<a>、<h1>-<h6>、<p>、<div>、<table>、<thead>、<tr>、<td>等等，因為這些是你告訴網路爬蟲你的網站結構的樣式。
Google 看的不是你的畫面，是你的 HTML
拿 Google 來講，Google 不會去看完整你所有的圖片內容、文字，因為在網路爬蟲裡面，都是用看數字與程式碼的，在網路上有數不清的網站和內容等著被爬取、收錄，要如何在有限資源中，獲得被爬取的機會，就是要把 HTML 層級分明，讓 Google 花最少時間就能讀懂你的網站。
當你層級架構不明確，就像是一張海報，全部的字體都是一樣大，讀者不會知道哪個是標題，哪個是重點，哪個是提醒，哪個是內文。對 Google 也一樣，他是透過 HTML 讀取網頁的，所以你必須給他一張重點讀取架構，讓他能迅速理解跟抓取要讀取的內容。
如何練習 HTML 呢，在電腦上按 F12 或按右鍵點選檢視網頁原始碼，就會看到你當前頁面的 HTML，通常都在 Elements 裡查看網站 HTML 狀態，另外左上角有一個箭頭與筆記本和手機的小圖案，分別為透過滑鼠滑動到指定位置，會顯示當前區塊 HTML，與電腦版模式與手機版模式瀏覽網站的狀態。
可以使用 Ctrl+F 搜尋自己的 H1、Description、Title、<p>段落等，逐步熟悉 HTML。
<p> 段落標籤：最基本也最重要
<p>段落對 Google 來說就是文章內文的概念，因為內文往往是整段內容的詳細重點，體現的是整個段落內文的價值，如現在這段，H2 標題是「<p> 段落標籤：最基本也最重要」，可是這只是一個提醒，並不足以體現重要性為何，所以內文會補充說明標題之下的詳細內容，展現出其主題內容的價值。
但要注意，<p>段落就像是一個句點或者逗點的樣子，讓一段內文詳細闡述，可是也要做好段落的分段，否則當<p>裡面包了上千百個字，不只 Google 會抓取不到重點，使用者在讀取文章時也會難以喘息。
人類閱讀習慣是「由上而下、分段呼吸」，搜尋引擎也非常在乎這種語意流動。
- 段落邏輯： 當你使用多個 <p> 標籤，爬蟲能更輕易地識別出文章的「節奏」。它能判斷哪些文字屬於同一組邏輯區塊。
- 語意斷點： 如果你把一大段文字全部塞在一個 <p> 裡，這對讀者（使用者體驗）和爬蟲（閱讀效率）都是災難。合理的段落劃分，能幫助爬蟲理解你的論點展開順序。
<p> vs <div> vs <br>：差在哪？
| 標籤 | 語意 | Google 怎麼理解 | 常見誤用場景 |
|---|---|---|---|
| <p> | 一段完整的話 | ✅ 知道是段落，可能被抓為精選摘要 | 把圖片包在<p> |
| <div> | 無語意容器 | ❌ 不知道裡面是什麼 | 把各種東西都包在<div>裡 |
| <br> | 行內換行 | ❌ 只是視覺斷行 | 使用<br>來當段落間的間隔 |
Elio小知識：
曾經看過圖片也包<p>，這對 Google 來說是浪費爬蟲資源，並且 Google 爬取後並未讀取到東西，對網站會有點不利。
什麼時候該用 <p>，什麼時候不該
✅ 該用：一般文章段落、產品描述、FAQ 的回答
❌ 不該用：列表資訊（應該用 <ul>/<ol>）、表格數據（應該用 <table>）、導覽連結（應該用 <nav>）
H1–H6 標題層級：給文章一個骨架
要注意不是把文字拉到超大就是標題，H 標籤像是書的「目錄」，H1 = 書名、H2 = 章節、H3 = 小節， Google 靠 H 標籤判斷文章在講什麼、哪個部分最重要。並且使用者也能透過標題層級來了解文章值不值得讀取，好的 H 標籤能降低跳出率。
H 標籤層級規則
一個網站只會有一個 H1，且盡量別跳 H 標籤的層級，如 H2 標題後馬上接 H4，這對爬蟲系統來說是很奇怪的事情，會讓你的文章語意斷掉。
| 標籤 | 角色 | 一篇文章用幾個 | 注意事項 |
|---|---|---|---|
| <H1> | 文章標題（書名） | 只能 1 個 | WordPress 通常要填寫在文章裡 |
| <H2> | 主要章節 | 3–6 個 | H2 盡量別太多，並且圍繞在 H1 標題 |
| <H3> | 章節下的細節 | 視內容而定 | 不是每個 H2 都需要 H3 |
| <H4>–<H6> | 更深的層級 | 盡量少用 | 用到 H4 以下通常代表結構太複雜 |
Title 標題裡要不要放關鍵字？
答案是要，但自然放，舉例對比：
- ❌ 硬塞：「SEO 教學 SEO 入門 SEO 怎麼學——最完整 SEO 教學」
- ✅ 自然：「SEO 入門指南：新手第一步該做什麼」
Title 內容通常是要為人寫，不是為爬蟲寫，因為那是使用者在搜尋關鍵字時，第一時間帶出你的網站訊息的重點。
Title 與 H1 可以是一樣的，也可以做不同變動，但建議都採用一樣的文字內容，以免讀者感到點擊前後不符，只是 Title 可以加上品牌名做辨識。
<strong> 與 <em>：加粗和斜體不只是樣式
很多人以為加粗只是讓字變粗，但 <strong> 和 <b> 對 Google 的意義完全不同。
- <strong> = 語意上表達的是很重要，Google 會多看一眼
- <b> = 純視覺粗體，Google 基本忽略
- <em> = 語意上「強調語氣」，像講話時加重音
- <i> = 純視覺斜體
- 在 WordPress 裡按 Ctrl+B 產出的是 <strong>，所以大部分人其實用對了，但不要濫用整段都加粗 = 沒有重點 = Google 也看不出重點
| 標籤 | 語意 | Google 在意嗎 | WordPress 怎麼產生 |
|---|---|---|---|
| <strong> | 重要內容 | ✅ 會參考 | Ctrl+B / 工具列加粗 |
| <b> | 純視覺粗體 | ❌ 基本忽略 | 手動寫 HTML 才會用到 |
| <em> | 強調語氣 | ✅ 輕微參考 | Ctrl+I / 工具列斜體 |
| <i> | 純視覺斜體 | ❌ 基本忽略 | 手動寫 HTML 才會用到 |
我通常一段只加粗想讓讀者能與此段落有關聯的字詞，讓讀者掃過去就抓到核心。
引言與知識框：用對標籤提升可讀性和語意
不同角色的內容要用不同的框，不能全部塞在 <p> 裡，因為引言框或知識框能迅速捕捉讀者的注意力。
- 引言框（<blockquote>）= 你的個人觀點、經驗分享、主觀看法
- 知識框（<aside>）= 定義、規則、客觀參考資訊
為什麼不能全部用 <p> 包到底
- 全部 <p> = 長篇流水帳，讀者看到就想滑走
- Google 也讀不出文章的資訊層次：哪些是重點、哪些是補充、哪些是作者觀點
- 用不同標籤 → 頁面停留時間變長 → 跳出率降低 → 間接幫助排名
HTML 實戰檢查清單：發文前掃一遍
在發文前先預覽或者發文後即時的瀏覽本身網頁狀態，使用 F12 檢查 H 標籤是否正確，Title、Description 的顯示狀態
| 檢查項目 | 怎麼檢查 | 常犯錯誤 |
|---|---|---|
| 只有一個 <h1> | 搜尋原始碼，Ctrl+F 搜 <h1 | WordPress 有些主題會在 sidebar 偷放 H1 |
| H 層級沒跳級 | 用 HeadingsMap 瀏覽器擴充功能 | H1 直接跳到 H3 |
| 段落用 <p> 不是 <div> | 檢視原始碼，看文字段落的外層標籤 | 有些頁面編輯器會亂包 <div> |
| 重點用 <strong> 不是 <b> | Ctrl+F 搜 <b> 看有沒有誤用 | 通常 WordPress 不會，但複製貼上可能帶入 |
| 列表用 <ul>/<ol> | 看步驟/清單有沒有正確用 <li> | 數字加標點符號當列點項目，但本質還是在<p>裡 |
| 圖片有 alt 屬性 | 搜尋 img，看後面出現的 alt 狀態 | 忘記填 alt 會缺失一些從 Google 圖片搜尋的人 |
結論
這些都是我在公司所學到的基本知識，好的 HTML 表達能很好的幫助Google爬蟲很好的讀懂你的網站，如果你想學好 SEO，這些細節千萬要記得，免得認真寫文章的心血就付諸東流了。
這些與過往的 SEO 基本功都很重要，希望你能先做好這些基礎事情，再往下去發展。
延伸閱讀【SEO 實戰篇【零】：先裝好你的「儀表板」】
延伸閱讀【SEO 實戰篇【上】：技術架構篇-讓 Google 爬得到、收得了】
更多 SEO 實戰知識將不定期更新，我是 Wudelay 站長 Elio，學習不算太晚，我們下次見。