本文目錄
「上線後再做 SEO 就好了吧？」跟客戶聊網站時最常聽到這句話，也是老闆最常踩的坑。實際情況是：SEO 不是
這篇我會拆解 7 個必須在 客製化網頁設計 階段就完成的 SEO 基礎工程，幫你在簽約前就確認開發商「會做哪些、不會做哪些」。實務上，這是分辨真懂 SEO 跟賣模板的設計公司最直接的方法。
工程 1：扁平 URL 結構（深度不超過 3 層）
URL 是 Google 與 AI 搜尋引擎讀懂網站結構的第一個訊號。扁平結構意味著每個重要頁面距離首頁不超過 3 次點擊，例如 /services/web-design 而非 /category/services/sub/web/design/page-23.php。實務上看過一家做精密機械的台中客戶，原本 URL 全部塞到第五層，Google 一年只收錄首頁，重要頁面深得連爬蟲都懶得進去。
建站時要做的：規劃資訊架構時就決定 URL 規則（語意化、扁平、不帶 query string）、避免 ?id=123 形式的非語意化 URL、設計 301 重定向規則（未來改版時要保留 SEO 權重）。上線
工程 2：語意化 HTML 標籤層級
語意化 HTML 是讓搜尋引擎跟 AI 系統「讀懂頁面結構」的核心。每頁應該有：唯一 1 個 <h1>（頁面主標題）、層級分明的 <h2> <h3>、用 <article> 包文章主體、<nav> 包導航、<aside> 包側邊欄、<footer> 包頁尾。業界一個常見現象是：套版網站 H1 出現 3-5 次、H 標籤層級跳級（H1 直接接 H4）、整頁充滿 <div> 沒有任何語意標籤，這對 SEO 是有害的，等於告訴 Google「我自己也不知道哪個是重點」。
建站時要做的：設計階段就決定每頁的標題層級、CMS 後台限制編輯只能用 H2-H4（H1 由系統自動產出）、實作前端時嚴格遵守 語意化 HTML 標準。我會建議把這條寫進開發規範裡，避免後期維護的人不小心破壞層級。
工程 3：Schema 結構化資料
Schema.org 是讓 Google 與 AI 直接「機器可讀」的標籤系統。基本應部署的 Schema：
| Schema 類型 | 用途 | 必要程度 |
|---|---|---|
| Organization | 公司基本資訊（用於知識面板） | ★★★★★ |
| LocalBusiness | 在地企業（地址、電話、營業時間） | ★★★★★ |
| BreadcrumbList | 麵包屑導航 | ★★★★☆ |
| FAQPage | 常見問題（出現在搜尋結果的 rich snippet） | ★★★★★ |
| Article | 部落格 / Insights 文章 | ★★★★☆ |
| Product / Offer | 商品 / 服務（電商必備） | ★★★★★ |
| Person | 作者資訊（E-E-A-T 訊號） | ★★★☆☆ |
建站時要做的：在每個頁面 template 內嵌入適當 Schema 的 JSON-LD 注入點、後台讓客戶可填寫 Schema 必要資訊、上線前用 Google Rich Results Test 逐頁驗證。客製化的彈性在於：新功能
工程 4：Core Web Vitals 達標
Google 從 2021 年起把 Core Web Vitals 納入排名因素。三個關鍵指標 2026 年標準：
- LCP（Largest Contentful Paint）：最大內容繪製 < 2.5 秒
- INP（Interaction to Next Paint）：互動到下一次繪製 < 200ms（取代了 FID）
- CLS（Cumulative Layout Shift）：累積版面偏移 < 0.1
建站時要做的：圖片最大寬度限制（避免載入過大）、Critical CSS inline（首屏 CSS 嵌入 HTML）、字型 font-display: swap（避免閃爍）、JavaScript 拆 chunk 並 defer、圖片 / iframe 用 loading="lazy"、避免無 width/height 的圖片造成 CLS。實務上這幾項做齊，PageSpeed Insights 分數通常能從紅燈直接跳到綠燈。詳見 Core Web Vitals 與 AI 引用關係。
工程 5：圖片自動 WebP / AVIF 雙格式 + Lazy Load
老實說，圖片佔網站總載入量 50-70%，是效能的頭號殺手。實務上常看到設計漂亮的網站因為一張首屏 banner 沒壓縮，LCP 就直接破 5 秒。客製化網頁設計建站時應該建立的圖片管線：
- 後台上傳原圖（JPG/PNG）→ 系統自動產生 WebP + AVIF + 原格式 3 個版本
- 前端用
<picture>元素根據瀏覽器選擇最佳格式 - 多尺寸 srcset（手機 / 平板 / 桌機載入不同大小）
- Lazy Load（首屏外的圖片延遲載入）
- CDN 加速（地理就近送圖）
這些工程在建站時做好，圖片相關的 CDN 與優化 一次到位。建站後補做要重新處理所有歷史圖片、改造後台上傳流程，工時是建站期間的 3-5 倍。比較保險的做法是在簽約前就確認「圖片管線是否內含」這一條。
工程 6：內部連結網路
內部連結是 Google 理解「網站內哪些頁面重要」的核心訊號，也是讓使用者深入網站的動線。客製化網頁設計建站時應規劃：
- 每篇
文章 3-5 個內部 （指向相關文章、Solutions、首頁）連結 - 首頁與重要 Landing Page 之間的環狀
連結 - 麵包屑導航（Breadcrumb）標配
- Footer 集中
重要 頁面 連結 - 品牌錨點策略（首頁用品牌關鍵字錨點，如「客製化網頁設計」連回
/，鞏固品牌詞排名）
我會建議建站時就用 CMS 設計一套「相關文章自動推薦」邏輯，未來每篇新文章自動納入內部連結網路，不用每寫一篇就手動回頭補連結。手動補的成本：300 篇文章 × 平均 5 分鐘 = 25 小時人工，做過一次你就再也不想做第二次。
工程 7：sitemap.xml 與 robots.txt 配置
最後也是最容易被忽略的：搜尋引擎與 AI 爬蟲的「入場券」。
sitemap.xml：列出所有公開頁面、最後更新時間、優先級。動態網站應該由 CMS 自動產出，不能手動維護。
robots.txt：告訴搜尋引擎哪些可爬、哪些不可爬。客製化網站應正確配置：
User-agent: *
Disallow: /admin
Disallow: /api/private
# AI 搜尋引擎開放索引
User-agent: GPTBot
Allow: /
User-agent: ClaudeBot
Allow: /
User-agent: PerplexityBot
Allow: /
User-agent: Google-Extended
Allow: /
Sitemap: https://www.yourdomain.com/sitemap.xml
延伸閱讀 robots.txt 該不該擋 AI 爬蟲的決策 與 llms.txt 設定指南，後者是 2024 年起新興的「給 AI 看的網站索引」標準，是傳統 SEO 沒涵蓋的新基建。
結語：建站期間做 SEO，是「對的時間做對的事」
7 個工程加總起來，在客製化網頁設計階段需要的工作量大約佔整體建站工時的 15-20%，但對 SEO 表現的影響佔 30-50%。建站時做
簽約前我會建議務必確認的事項：
- 開發商是否包含 Schema 結構化資料？涵蓋哪幾種類型？
- 圖片是否自動產生 WebP / AVIF？
- Core Web Vitals 是否承諾達標？上線前會跑 PageSpeed Insights 驗證？
- sitemap.xml / robots.txt / llms.txt 是否標配？
- 後台是否內建 SEO 欄位（Title / Description / OG Image）？
這五題如果有任何一題答「要另外加價」，建議再多看幾家。元伸科技 24 年深耕、服務 3,000+ 企業，把這 7 項工程列為 企業形象網站方案 的標配，每個專案上線前都會通過完整 SEO 體檢。如果你正在規劃 客製化網頁設計 專案，帶著這份 checklist 去比稿，能幫你更快分辨誰是真的懂 SEO。
這 7 項基礎工程能做到什麼程度，取決於網站是客製還是套版，延伸閱讀客製化網頁設計的 SEO 優勢與客製化網頁設計 vs 套版網站。
