元伸科技
「上線後再做 SEO 就好了吧？」——這是中小企業老闆對網站 SEO 最常見的誤解。實際情況是：SEO 不是後製優化，而是建站時就該嵌入架構的基礎工程。等網站做完才補 SEO，等於房子蓋完才挖地基——技術上能做，但成本是建站期間的 5-10 倍，效果還打折。本文拆解 7 個必須在 客製化網頁設計 階段就完成的 SEO 基礎工程，幫你在簽約前就確認開發商會做哪些、不會做哪些。
工程 1：扁平 URL 結構（深度不超過 3 層）
URL 是 Google 與 AI 搜尋引擎讀懂網站結構的第一個訊號。扁平結構意味著每個重要頁面距離首頁不超過 3 次點擊，例如 /services/web-design 而非 /category/services/sub/web/design/page-23.php。深度過深的 URL 會讓 Google 認為這些頁面「重要性低」，分配的爬取預算（crawl budget）也會減少。
建站時要做的：規劃資訊架構時就決定 URL 規則（語意化、扁平、不帶 query string）、避免 ?id=123 形式的非語意化 URL、設計 301 重定向規則（未來改版時要保留 SEO 權重）。上線後再改 URL 的成本：所有舊 URL 要 301 重定向到新 URL、Google 需 2-4 週重新爬取、過渡期 SEO 流量可能暴跌 30-50%。
工程 2：語意化 HTML 標籤層級
語意化 HTML 是讓搜尋引擎與 AI 系統「讀懂頁面結構」的核心。每頁應該有：唯一 1 個 <h1>（頁面主標題）、層級分明的 <h2> <h3>、用 <article> 包文章主體、<nav> 包導航、<aside> 包側邊欄、<footer> 包頁尾。多數套版的問題是：H1 出現 3-5 次、H 標籤層級跳級（H1 直接接 H4）、整頁充滿 <div> 沒有任何語意標籤。
建站時要做的：設計階段就決定每頁的標題層級、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 逐頁驗證。客製化的彈性是：新功能、新內容類型出現時，可以立即加入對應 Schema——這是套版做不到的。
工程 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。詳見 Core Web Vitals 與 AI 引用關係。
工程 5：圖片自動 WebP / AVIF 雙格式 + Lazy Load
圖片佔網站總載入量 50-70%，是效能的第一殺手。客製化網頁設計建站時應建立的圖片管線：
- 後台上傳原圖（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%。建站時做這些，等於發第一篇文章前就有 30-50 分的 SEO 基礎分；不做，等於每篇新文章都從 0 分開始。
簽約前務必確認的事項：
- 開發商是否包含 Schema 結構化資料？多少種類？
- 圖片是否自動產生 WebP / AVIF？
- Core Web Vitals 是否承諾達標？上線前會跑 PageSpeed Insights 驗證？
- sitemap.xml / robots.txt / llms.txt 是否標配？
- 後台是否內建 SEO 欄位（Title / Description / OG Image）？
如果你正在規劃 客製化網頁設計 專案，建議在報價階段就把這些 SEO 工程列為「必備」，避免上線後才發現缺一塊就是 5-10 倍的補丁成本。元伸科技 24 年來把這 7 項工程列為 企業形象網站方案 的標配，每個專案上線前都會通過完整 SEO 體檢，歡迎免費諮詢索取詳細項目對照表。
