很多人談到SEO,想到的都是網站上線後才要做的事情，例如發布文章、經營外部連結、追蹤排名變化。但其實有相當大一部分的SEO基礎，應該在網頁設計階段就先確立下來，而不是等到網站做完才回頭補救。這篇文章要談的SEO網頁設計，聚焦在設計階段就該把關的具體檢查點，而不是上線後的優化流程，希望能幫助正在規劃新網站的人，在動工之初就把該考量的事情想清楚。
網站架構規劃：扁平化與深層目錄的取捨
網站架構指的是頁面與頁面之間的組織方式，這件事會直接影響搜尋引擎理解網站內容的難易度。扁平化的架構，讓使用者與搜尋引擎能夠用比較少的點擊次數，從首頁抵達任何一個內頁；深層目錄的架構，則是把內容依照層層分類的邏輯組織起來，適合內容數量龐大、需要清楚分類的網站。這兩種架構沒有絕對的對錯，關鍵在於網站的內容規模與屬性。做SEO網頁設計時，應該在規劃網站地圖的階段，就決定好整體的架構邏輯，而不是等內容累積到一定程度，才發現原本的分類方式難以擴充，需要大幅調整。
頁面載入速度對設計的影響
載入速度是搜尋引擎評估網站體驗的重要指標之一，而載入速度很大一部分是由設計階段的決策所決定的。圖片的格式選擇與檔案大小，是最直接影響載入速度的因素之一，設計時如果大量使用未經壓縮的高解析度圖片，即使畫面再精美，也會讓頁面載入變得緩慢。另外，過多的動畫特效、複雜的背景效果，雖然能讓畫面更吸睛，但也會增加瀏覽器的運算負擔，特別是在效能較弱的行動裝置上，這種負擔會更明顯。做SEO網頁設計時，應該在視覺呈現與載入效能之間找到平衡，不是完全捨棄動態效果，而是有節制地使用，把資源留給真正重要的視覺重點。
圖片替代文字，該在設計階段就規劃
圖片的替代文字，也就是俗稱的alt文字，是搜尋引擎理解圖片內容的重要依據，也是視障使用者透過螢幕報讀軟體瀏覽網站時的重要輔助。很多網站在設計完成、內容上架之後才回頭補寫替代文字，導致內容寫得比較敷衍，甚至整批圖片都用同一組文字帶過。比較理想的做法，是在規劃每個頁面要使用哪些圖片時，就同步思考這張圖片的替代文字該怎麼描述，讓替代文字能夠真正反映圖片內容與頁面主題的關聯，而不是流於形式上的補齊。
內部連結結構，在設計初期就該規劃
內部連結指的是網站內部頁面之間互相連結的方式，它不只是方便使用者在網站內移動，也是搜尋引擎判斷哪些頁面比較重要的線索之一。如果內部連結結構是在網站全部做完之後才回頭補上，往往會顯得零散、缺乏邏輯，重要的頁面可能反而沒有得到足夠的連結支持。做SEO網頁設計時，應該在規劃頁面架構的同時，就一併思考哪些頁面之間應該互相連結、哪些頁面是需要被優先導向的重點頁面，讓內部連結成為架構規劃自然而然的一部分，而不是事後補丁式的調整。
行動裝置優先設計：從設計稿開始就要考量
行動裝置優先設計，指的是在設計網站時，優先以手機螢幕的呈現方式作為主要考量，再往桌機版本延伸，而不是先把桌機版設計完，才回頭想辦法讓它在手機上勉強能看。這種思維上的順序調整非常關鍵，因為如果先入為主地以桌機版的豐富版面作為設計基礎，往往很難在手機版上做出真正精簡、好用的呈現，只能勉強把元素縮小塞進小螢幕裡。SEO網頁設計如果能從設計稿的第一步就用行動裝置優先的角度思考，最終產出的網站在手機上的使用體驗，通常會比事後才調整的做法自然許多。
標題階層：H1與H2該在設計稿階段就定義好
標題階層指的是頁面中H1、H2等標籤的使用邏輯，它幫助搜尋引擎理解頁面內容的主從關係，也幫助使用者快速掃視頁面重點。很多網站的標題階層是在內容填入之後，才由工程師或編輯隨意套用標籤，導致同一個頁面可能出現多個H1，或是標題階層的邏輯跟內容實際的重要性不符。做SEO網頁設計時，應該在設計稿階段，就明確標示每個區塊該使用哪一個層級的標題，讓視覺設計與標題階層的邏輯保持一致，這樣在後續實際開發與填入內容時，才不會因為標籤誤用而讓搜尋引擎誤判頁面重點。
視覺設計與SEO考量如何取得平衡
有些人擔心，把SEO考量放進設計階段，會不會限制了視覺創意的發揮空間，讓網站看起來變得保守、缺乏特色。實際上，SEO網頁設計要求的多半是結構性的基本功，例如標題階層是否清楚、圖片是否有適當的替代文字、架構是否合理，這些考量跟視覺風格的呈現並不衝突。設計者仍然可以在色彩搭配、版面編排、視覺元素的運用上發揮創意，只是在決定每個區塊該用什麼標籤、圖片該怎麼處理時，多一層搜尋引擎友善度的思考。把這種思考養成習慣之後，通常不太需要犧牲視覺表現，就能讓網站同時兼顧美觀與搜尋引擎的基本要求。
常見問題
SEO網頁設計跟一般的SEO優化有什麼不同？
一般常見的SEO優化多半發生在網站上線之後，針對既有內容進行調整；SEO網頁設計則是把這些考量提前到設計階段，讓網站一開始的架構、載入效能與標題邏輯就具備比較好的搜尋引擎基礎，減少上線後需要大幅補救的機會。
網站已經設計完成，才發現架構有問題，還來得及調整嗎？
可以調整，但通常需要花費比設計階段更多的時間與心力，因為架構一旦定型，牽動的頁面與連結會比較多，建議盡量在設計初期就把架構規劃清楚。
動畫特效是不是完全不能用？
不是完全不能用，而是要有節制地使用，並且在使用前評估對載入速度的影響，把動態效果保留給真正需要強調的重點內容，而不是每個區塊都套用特效。
行動裝置優先設計，會不會讓桌機版看起來太簡單？
不會，行動裝置優先設計指的是規劃順序上優先考量手機呈現，桌機版仍然可以在這個基礎上，適度加入更豐富的版面配置與視覺細節，兩者並不衝突。
如果你正在規劃一個新網站，想在設計階段就把SEO的基本功打好，創昇SEO提供免費的網站健檢服務，能協助檢視目前的規劃方向是否合理。創昇SEO也提供全台免費到府解說，用實際案例說明設計階段該注意的細節，幫助你在動工之前就少走一些冤枉路。