技術 SEO 是什麼？前端工程師的 30 項上線檢查清單
技術 SEO（Technical SEO）指的是讓搜尋引擎能順利 爬到、渲染出、理解並收錄 網頁的那一整套實作。它不管內容寫得好不好，只管內容有沒有機會被看見。
判斷一件事屬不屬於技術 SEO，有個簡單的標準：它是不是寫在程式碼或伺服器設定裡。是的話就是工程師的責任範圍，這篇要談的就是這一塊。
技術 SEO 的責任範圍
技術 SEO 可以拆成五層，由下往上依序解決「能不能被讀到」到「呈現得漂不漂亮」的問題。
| 層次 | 要解決的問題 | 對應章節 |
|---|---|---|
| 1. 可爬取 | 爬蟲進不進得來 | 索引控制 |
| 2. 可渲染 | 爬蟲看不看得到內容 | 渲染模式 |
| 3. 可理解 | 搜尋引擎讀不讀得懂結構 | 語意化結構 、結構化資料 |
| 4. 可呈現 | 搜尋結果與社群預覽長什麼樣 | 檔頭 meta 標籤 |
| 5. 體驗好 | 使用者進來之後順不順 | 網站體驗核心指標 |
由下往上做。第一層沒過，上面四層做得再完美也沒有意義，一個被 robots.txt 擋住的頁面，結構化資料寫得再漂亮也不會出現在搜尋結果裡。
30 項上線檢查清單
「必備」缺一項就可能讓整頁無法被正確收錄；「加分」則依專案性質取捨。
檔頭標記（8 項）
| # | 檢查項目 | 等級 |
|---|---|---|
| 1 | 每頁都有唯一的 <title> ，長度控制在中文 30 字內 | 必備 |
| 2 | 每頁都有唯一的 meta description ，長度約 80 字內 | 必備 |
| 3 | charset 宣告為 UTF-8，且放在 <head> 最前面 | 必備 |
| 4 | 有 viewport 設定，未鎖死縮放 | 必備 |
| 5 | 有 canonical 且指向自己的正式網址 | 必備 |
| 6 | Open Graph 四個基本屬性齊全，圖片為 1200×630 | 加分 |
| 7 | Twitter Card 設為 summary_large_image | 加分 |
| 8 | 有 favicon ，且可被搜尋引擎抓取 | 加分 |
索引與網址（7 項）
| # | 檢查項目 | 等級 |
|---|---|---|
| 9 | 正式機的 robots.txt 開放爬取，測試機全站封鎖 | 必備 |
| 10 | sitemap.xml 存在、可存取，且已在 robots.txt 宣告 | 必備 |
| 11 | sitemap 內只有回傳 200 且可索引的網址 | 必備 |
| 12 | 不該收錄的頁面（後台、搜尋結果頁）已標 noindex | 必備 |
| 13 | 網址結構 一致，尾斜線與大小寫沒有兩種版本並存 | 必備 |
| 14 | 舊網址以 301 轉到新網址，沒有轉址鏈 | 必備 |
| 15 | 多語系版本有雙向的 hreflang 對應 | 加分 |
內容結構（6 項）
| # | 檢查項目 | 等級 |
|---|---|---|
| 16 | 每頁一個 <h1> ，且標題階層沒有跳級 | 必備 |
| 17 | 主要內容包在 <main> 裡，導覽在 <nav> 裡 | 加分 |
| 18 | 錨點文字 說明得出目標內容，沒有「這裡」、「更多」 | 必備 |
| 19 | 沒有孤兒頁面，每頁至少被站內一處連到 | 必備 |
| 20 | 所有 圖片有 alt ，裝飾性圖片留空字串 | 必備 |
| 21 | 表單欄位有對應的 <label> | 加分 |
結構化資料（4 項）
| # | 檢查項目 | 等級 |
|---|---|---|
| 22 | 以 JSON-LD 撰寫，語法通過驗證 | 加分 |
| 23 | 文章頁有 Article 標記，欄位與頁面內容一致 | 加分 |
| 24 | 有階層的頁面補上 BreadcrumbList | 加分 |
| 25 | 標記內容一律對應頁面上真實可見的資訊，沒有假資料 | 必備 |
效能與渲染（5 項）
| # | 檢查項目 | 等級 |
|---|---|---|
| 26 | LCP 在 2.5 秒內，首屏圖片未被延遲載入 | 必備 |
| 27 | CLS 在 0.1 以內，圖片與廣告版位已預留尺寸 | 必備 |
| 28 | INP 在 200 毫秒內，沒有明顯的長任務 | 加分 |
| 29 | 檢視原始碼看得到主要內容，不是 空的容器 | 必備 |
| 30 | 阻塞渲染的 樣式與程式碼 已處理，<script> 有 defer 或 async | 加分 |
什麼時候跑這份清單
| 時機 | 跑哪些 |
|---|---|
| 新頁面上線前 | 全部 30 項 |
| 改版或搬遷網址 | 重點在 9-15 項的索引與轉址，這時最容易掉流量 |
| 每季健檢 | 全部，重點看失效連結與效能是否退步 |
| 每次提交程式碼 | 能自動化的部分交給持續整合流程 |
哪些可以自動化
不必每次都人工勾。下面這些用腳本就能檢查：
| 檢查 | 怎麼自動化 |
|---|---|
| 標題與描述缺漏或重複 | 建置後掃描產出的 HTML，比對 <title> 與 description |
| 狀態碼與失效連結 | 爬一遍 sitemap，記錄非 200 的回應 |
| 效能與 SEO 分數退步 | Lighthouse CI 設分數門檻 |
| 結構化資料語法錯誤 | 抽出頁面裡的 ld+json 做 JSON 解析與必填欄位檢查 |
圖片缺 alt | 掃描 HTML 裡沒有 alt 屬性的 <img> |
需要人判斷的只剩兩件事：內容品質，以及標記的語意選得貼不貼切。
常見問題
技術 SEO 和一般 SEO 有什麼不同？
技術 SEO 處理的是搜尋引擎能不能順利爬到、渲染出、理解並收錄這一頁，全部寫在程式碼與伺服器設定裡。一般所說的 SEO 還包含關鍵字研究、內容撰寫與外部連結，那些不是改程式碼能解決的，界線見 站內 SEO 與站外 SEO 的分工 。
這 30 項一定要全部做完嗎？
不一定。標為必備的項目缺一項就可能讓整頁無法被正確收錄，屬於不能省；標為加分的項目則依專案性質取捨，例如：沒有多語系版本就不需要處理語言標記。
檢查清單該在什麼時候跑？
建議三個時機：新頁面上線前、網站改版或搬遷網址時，以及每季固定健檢一次。前兩者是為了避免退步，後者是為了抓出長期累積的問題，例如：愈來愈多的失效連結。
可以把這些檢查自動化嗎？
大部分可以。標題與描述是否缺漏、是否重複、狀態碼是否正確、效能分數是否退步，都能寫成腳本在持續整合流程裡跑。需要人判斷的通常只有內容品質與標記語意是否貼切。
測試機需要做技術 SEO 嗎？
標記要照做，但索引必須關掉。測試機應該用 robots.txt 全站封鎖並回傳 noindex，否則測試內容被收錄後會與正式站互相競爭，形成 重複內容 問題。
