部署前檢查工具使用教學
不要等到上線後才發現 SEO 問題。用部署前檢查工具整合 CI/CD，自動驗證 meta tags、schema、連結、圖片等元素，確保每次部署都符合 SEO 標準。
1) 為什麼需要部署前 SEO 檢查？
- 預防勝於治療：在 CI/CD pipeline 中自動檢查，問題在部署前就被攔截，不會影響線上流量。
- 團隊協作：所有開發者 commit 都會自動檢查，不用依賴 SEO 專家手動檢查每個 PR。
- 一致性：確保所有頁面都符合 SEO 標準（title 長度、meta 完整度、schema 格式等）。
- 可追溯性：CI/CD logs 記錄每次檢查結果，方便追蹤 SEO 問題何時引入。
2) 檢查項目與優先級
🔴 Critical (阻斷部署)
- Missing title/description (每個可索引頁都要有)
- Broken canonical URL (404 或格式錯誤)
- Invalid schema markup (JSON-LD 語法錯誤)
- 404 internal links (內部連結死連)
- Duplicate title/description (全站多個頁面用同樣內容)
🟡 Warning (不阻斷，但提醒)
- Title 過長/過短 (建議 50-60 字元)
- Description 過長/過短 (建議 150-160 字元)
- 圖片缺少 alt 標籤
- Missing h1 或多個 h1
- External links 無 rel 屬性 (nofollow/sponsored/ugc)
🔵 Info (資訊性)
- 頁面大小 (HTML > 500KB)
- 內部連結數量 (太少 < 5)
- Schema 類型建議 (例如 Article 頁面建議加 FAQ)
3) CI/CD 整合範例：GitHub Actions
在 .github/workflows/deploy.yml 加入 SEO 檢查步驟，build 後、deploy 前執行。
yaml
name: Deploy with SEO Check
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build-and-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install & Build
run: |
npm ci
npm run build
- name: SEO Pre-Deploy Check
run: |
# 使用本站 API 或自建工具
npx seo-predeploy-check --dir=dist \
--fail-on=critical \
--format=github
continue-on-error: false # Critical 錯誤會 fail workflow
- name: Deploy to Production
if: success()
run: npm run deploy4) Exit Code 控制與自訂規則
工具透過 exit code 回傳檢查結果，CI/CD 依此決定是否繼續部署。
bash
# Exit Code 定義
0 = 通過 (所有檢查都成功)
1 = Critical 錯誤 (阻斷部署)
2 = Warning (不阻斷，但記錄到 logs)
# 自訂規則範例
seo-predeploy-check \
--dir=dist \
--fail-on=critical \
--warn-on=warning \
--ignore="*.test.html,**/draft/*" \
--rules='{
"title": { "min": 50, "max": 60, "required": true },
"description": { "min": 150, "max": 160, "required": true },
"canonical": { "required": true, "validate_url": true },
"schema": { "validate": true, "allow_types": ["Article", "FAQ", "HowTo"] },
"images": { "require_alt": true, "warn_on_missing": true },
"links": { "check_internal": true, "fail_on_404": true }
}'
# 輸出格式
--format=github # GitHub Actions 格式 (::error::...)
--format=gitlab # GitLab CI 格式
--format=json # JSON 格式 (可自行解析)
--format=markdown # Markdown 報告 (可貼到 PR comment)5) 本地開發與 Git Hooks 整合
用 husky + lint-staged 在 commit 前執行檢查，更早發現問題。
json
// package.json
{
"scripts": {
"seo-check": "seo-predeploy-check --dir=dist --fail-on=none --warn-on=all"
},
"husky": {
"hooks": {
"pre-commit": "npm run seo-check"
}
}
}
// 或使用 lint-staged
{
"lint-staged": {
"src/**/*.{ts,tsx}": [
"eslint --fix",
"npm run seo-check"
]
}
}提示：本地檢查建議用 --fail-on=none（只顯示 warning），避免阻斷開發流程；CI/CD 才用--fail-on=critical。
6) 檢查報告範例
plaintext
SEO Pre-Deploy Check Report
============================
✅ Passed: 45 pages
🟡 Warnings: 8 pages
❌ Failed: 2 pages
Critical Issues (❌):
• /blog/new-post.html
- Missing meta description
- Invalid canonical URL (404)
Warnings (🟡):
• /about.html
- Title too short (42 chars, recommended 50-60)
- 2 images missing alt tags
• /products/item-123.html
- Description too long (185 chars, recommended 150-160)
- Missing h1 tag
Summary:
Total pages checked: 55
Total issues: 10 (2 critical, 8 warnings)
Recommendation: Fix critical issues before deploy
Exit Code: 1 (Critical errors found, deployment blocked)延伸閱讀
常見問題
部署前檢查工具的整合與配置。