設計漂亮但 Google 看不懂，有什麼用？
我見過太多這樣的狀況：一家公司花了幾十萬找設計公司做了一個視覺超精美的網站，上線後三個月，Google 搜尋排名幾乎是零。
不是內容不好，不是網站不漂亮，而是設計過程中完全沒考慮 SEO。
用了大量 JavaScript 動態載入內容，Google 爬不到。選單藏在漂亮的動畫效果裡面，搜尋引擎不知道你的網站有哪些頁面。圖片沒有 alt 標籤，標題用圖片呈現而不是 HTML 文字。這些設計上的選擇，直接讓網站在搜尋引擎面前變成了隱形人。
根據 BrightEdge 的研究，有 53% 的網站流量來自自然搜尋。如果你的網站在設計階段就排除了這 53% 的潛在訪客，不管視覺做得再好都是事倍功半。
SEO 友善的網頁設計不是要犧牲美感，而是在設計的每個決策中同時考慮使用者和搜尋引擎的需求。兩者其實比你想像中更一致。
網站架構：SEO 的地基
網站架構是整個 SEO 的基礎，也是最需要在設計階段就確定的事情。
扁平化的網站結構 理想的網站結構是任何一個頁面都能在 3 次點擊內到達。如果你的某個重要頁面藏在第四層、第五層目錄底下，Google 的爬蟲可能根本不會去爬它，使用者也不太會找到。
舉例來說，一個服務型網站的理想結構：
- 首頁 → 服務類別頁 → 具體服務頁（3 層）
- 首頁 → 作品集 → 單一作品頁（3 層）
- 首頁 → 部落格 → 文章頁（3 層）
清楚的 URL 結構
URL 要讓人看了就知道這個頁面在講什麼。/services/web-design 比 /page?id=372 好太多。設計師在規劃頁面時，同時就該決定 URL 路徑。
語意化的 HTML 標籤
用 <header>、<nav>、<main>、<article>、<footer> 這些語意標籤來建立頁面結構，不要全部用 <div>。搜尋引擎靠這些標籤來理解你的頁面結構。這件事在設計稿轉切版的時候就要確認。
內部連結規劃 設計階段就要想好頁面之間的連結關係。哪些頁面之間有相關性？導覽列要放什麼？側欄要連到哪裡？內部連結不只幫使用者導航，也幫 Google 理解你的網站哪些頁面最重要。關於內部連結的詳細策略，可以參考內部連結佈局策略。
頁面速度：Google 在乎，使用者更在乎
Google 在 2021 年把 Core Web Vitals 納入排名因素後，頁面速度就不只是「Nice to have」而是「Must have」了。
根據 Google 的數據，頁面載入時間從 1 秒增加到 3 秒，跳出率增加 32%。從 1 秒到 5 秒，跳出率增加 90%。
很多讓網站變慢的元凶都是設計決策：
圖片太大
首頁放一張 5MB 的全螢幕背景圖，光這張圖就要載入好幾秒。解法不是不用大圖，而是用正確的格式（WebP 或 AVIF）、做好壓縮、用 loading="lazy" 延遲載入。
字型太多
設計稿用了 3-4 種不同字型，每種字型都是一個額外的網路請求。中文字型更慘，一個完整的中文字型檔案可以到 5-10MB。建議用 Google Fonts 的子集化功能或是 font-display: swap 避免字型阻塞渲染。
過度使用動畫效果 視差滾動、頁面轉場動畫、hover 效果⋯⋯每一個動畫都需要 JavaScript 和 CSS 的運算資源。不是說不能用，而是要有節制，而且不能因為動畫讓主要內容的載入變慢。
第三方腳本太多 Facebook Pixel、Google Analytics、聊天機器人、熱點圖工具⋯⋯每裝一個就多一段 JavaScript 要載入。定期清理不需要的腳本，用 Google Tag Manager 統一管理。
Core Web Vitals 的三個指標（LCP、INP、CLS）要怎麼優化，在核心網頁指標優化指南裡有詳細說明。
行動優先：不是選項，是必要
Google 從 2019 年開始全面採用行動版優先索引（Mobile-First Indexing），意思是 Google 看的是你的行動版網站，不是桌面版。
台灣的行動裝置網路使用率超過 90%，你的潛在客戶大概率是用手機在看你的網站。所以在設計網站的時候，行動版不是「桌面版的縮小版」，而是應該反過來——先設計行動版，再往上擴展到桌面版。
RWD（Responsive Web Design）是目前 Google 推薦的做法。幾個在行動版特別要注意的設計細節：
觸控元素的大小 按鈕和連結的觸控區域至少要 48×48 像素，而且相鄰的觸控元素之間至少要有 8 像素的間距。太小的話手指點不準，使用體驗差，Google 也會扣分。
文字大小 行動版的本文字體至少要 16px。小於 16px 的話，iOS Safari 會自動放大表單欄位，造成頁面跑版。
避免水平捲動 所有內容都要在螢幕寬度內顯示完整，不要出現左右捲動。表格太寬怎麼辦？用可捲動容器或改用卡片式排版。
彈出視窗的尺寸 行動版的彈出視窗如果佔滿整個螢幕，Google 會視為干擾性插頁式廣告而扣分。確保彈出視窗不會遮住主要內容。
圖片處理：看得到的和看不到的
圖片是網頁設計中佔比最大的元素，也是最容易影響 SEO 的部分。
看得到的：視覺呈現 用高品質的圖片沒問題，但一定要做好壓縮。更多關於圖片 SEO 優化的技巧值得了解。一般來說，Hero 圖片壓縮到 150-200KB 以內，內文圖片壓縮到 50-100KB 以內，就能在品質和速度之間取得平衡。
看不到的：alt 屬性 每張圖片都需要有描述性的 alt 文字。這是搜尋引擎理解圖片內容的唯一方式。「一群人在辦公室開會」比「photo1」有用多了。而且 alt 文字也是輔助功能的一部分，視障使用者靠螢幕閱讀器就是讀 alt 文字來了解圖片內容。
看不到的：結構化資料 如果你的網站有產品圖片或作品集，用 Schema.org 的 ImageObject 標記可以幫圖片在搜尋結果中獲得更好的曝光。
格式選擇
2026 年了，WebP 已經是主流格式。用 <picture> 標籤同時提供 WebP 和 JPEG/PNG，讓瀏覽器自動選擇最佳格式。如果要追求極致壓縮率，AVIF 格式的壓縮效果比 WebP 再好 20%，但瀏覽器支援度還在追趕中。
內容佈局：設計師和 SEO 專家的共識
好的內容佈局同時滿足使用者閱讀習慣和搜尋引擎的解讀需求。
標題層級
一個頁面只有一個 H1，而且 H1 要包含目標關鍵字。H2 用來分段，H3 用在段落內的小標題。設計師在做視覺層級的時候，要跟 HTML 的標題層級對應。不要為了視覺效果把 H1 用在不重要的地方，或者明明是重要標題卻用 <p> 加大字體。
F 型閱讀模式 眼動追蹤研究顯示，大多數人閱讀網頁的模式像字母 F：先水平掃過頂部，然後視線往下移，再水平掃過中間某一段，最後垂直掃過左側。
根據這個閱讀模式，重要的資訊放在頁面的上方和左側。每個段落的開頭就點出重點，不要鋪陳到最後才講結論。
適當的留白 留白不是浪費空間，而是讓內容更好消化。行與行之間（line-height）設定在 1.6-1.8，段落之間有明顯的間距。這對 SEO 沒有直接影響，但可以降低跳出率，間接幫助排名。
CTA 的位置 重要的行動呼籲按鈕不要只放在頁面最底部。在第一屏就該有一個主要 CTA，中間段落之間再放一兩次。使用者不需要看完整頁才能採取行動。
案例分析：設計公司官網改版的 SEO 成效
某家 ozchamp.com 的客戶——一家位於新北市的 B2B 企業，原本的官網是 5 年前用 Flash 做的（是的，2021 年還有 Flash 網站），完全沒有 SEO 可言。
改版目標：重新設計官網，同時建立 SEO 基礎。
改版前的問題：
- Flash 內容搜尋引擎完全無法索引
- 沒有 RWD，手機完全無法使用
- PageSpeed 行動版分數 12 分
- Google 收錄頁面：3 頁（只有首頁和兩個靜態頁面）
改版的做法：
- 用 HTML5 + CSS3 重新設計，所有內容都是可索引的文字
- 行動優先的 RWD 設計
- 建立完整的網站架構：首頁、6 個服務頁、12 個產業解決方案頁、部落格
- 每個頁面都有完整的 meta 標籤、結構化資料
- 圖片全部用 WebP 格式，加上 alt 文字
- 建立 XML Sitemap 和 robots.txt
改版後 6 個月的成果：
- PageSpeed 行動版分數從 12 提升到 87
- Google 收錄頁面從 3 頁增加到 48 頁
- 自然搜尋流量從月均 30 次成長到月均 1,200 次
- 3 個目標關鍵字進入 Google 搜尋前 10 名
- 自然搜尋帶來的詢問從 0 增加到每月 8-12 件
這個案例說明一件事：好的網頁設計和好的 SEO 不衝突，而是互相加乘。
設計師和 SEO 專家怎麼合作
很多專案的問題不是技術問題，而是流程問題。設計師和 SEO 專家各做各的，等到網站快上線了才發現一堆 SEO 問題要改。
比較好的做法是從專案初期就讓 SEO 參與：
企劃階段：SEO 專家提供關鍵字研究結果，告訴設計師目標客群會搜尋什麼、需要哪些頁面。
設計階段：SEO 專家 review 設計稿，確認標題層級、導覽結構、內容佈局都符合 SEO 原則。
開發階段：SEO 專家確認 HTML 結構、meta 標籤、結構化資料、圖片 alt 文字都正確。
上線前：用 Screaming Frog 或 Sitebulb 做一次完整的技術 SEO 審查，確認沒有問題。
上線後：在 Google Search Console 追蹤索引狀態和搜尋表現，有問題馬上修。
這個流程不會增加太多工作量，但能避免很多上線後才發現的 SEO 問題。相關的技術 SEO 檢查項目，可以參考技術 SEO 完整指南。
先把基礎做對，其他都好辦
SEO 友善的網頁設計不是什麼高深的技術，就是一些基礎原則：讓搜尋引擎看得懂你的網站、讓頁面載入夠快、讓行動裝置的體驗夠好、讓內容結構清楚。
這些原則跟好的使用者體驗設計其實高度重疊。一個讓使用者覺得好用的網站，通常也是 Google 喜歡的網站。所以不要把 SEO 當成設計的限制，把它當成設計決策的參考依據。
下次做網站的時候，在追求視覺效果的同時，也問自己一句：「Google 看得懂這個設計嗎？」這個簡單的問題，能幫你避掉大部分的 SEO 地雷。