多數人以為 SEO 與設計是天生的兩條路，畫面好看就得犧牲排名，排名想做好就得犧牲畫面。這種二選一的說法流傳很廣，但攤開真正在會議室裡吵起來的案例，會發現九成的爭執根本不是這兩個學科互相排斥，而是流程上沒人把它拆開來看，同一個目標其實有辦法同時做到，只是沒有人花時間去想怎麼兩全。
真正沒有中間地帶的衝突，其實只有一兩種：刻意壓低文字對比追求某種質感、把整段文字做成圖片維持排版精緻。這兩種選擇跟工程做得好不好無關，是純粹的視覺偏好在跟讀者與搜尋引擎能不能讀到內容對撞，沒有兩全的做法。分清楚眼前這場爭執屬於哪一種，才不會把該花心思拆解的假衝突，跟真的沒得選的情況混在一起討論。
SEO 與設計的爭執多半只是分工惹的禍
每次同事因為某個設計選擇要不要改吵起來，會發現真正在爭的往往不是這個做法本身對不對，而是雙方各自把一件事想得比對方更急迫。設計端在乎的是畫面第一眼給人的印象夠不夠好、品牌調性有沒有跑掉；SEO 端在乎的是這個頁面讀者找不找得到、搜尋引擎判斷得出來在講什麼。這兩件事本身沒有互斥的理由，會吵起來多半是因為沒有人事先講清楚這個頁面要同時服務哪些目標，各自帶著自己的標準進場，才把原本能一起解決的問題，變成了二選一的對決。
判斷一場爭執算不算真衝突，其實有一條可以拿來當場檢查的界線：如果某個視覺選擇會讓一部分讀者看不懂內容、或讓搜尋引擎與 AI 工具解析不到這段內容，而且找不到能同時保住畫面與可讀性的做法，那才是真衝突。如果表面上看起來像二選一，拆開之後其實可以用工程或內容手法同時滿足兩邊，那就是假衝突——該做的是把它拆開，不是選邊站。
換句話說，遇到爭議時該問的不是這次要聽設計的還是聽 SEO 的，這個提問方式本身就已經問偏了。正確的問法是這裡犧牲掉的是純粹的視覺偏好，還是讀者與機器根本讀不到內容。問對問題，才有可能找到不必犧牲任何一邊的解法。
設計顧畫面、SEO 顧數據，其實測的是同一件事
這種摩擦感之所以揮之不去，其實不是兩個學科天生水火不容，是專案分工的方式先天就沒有對齊過目標。設計端習慣拿視覺印象、品牌調性、甚至設計獎項的認可，來衡量一個頁面做得好不好；SEO 端習慣拿排名名次、流量成長、跳出率高不高，來判斷成效。兩組人各自守著自己的一套指標，很少在專案剛開始的時候就坐下來對齊這個頁面要同時服務哪些目標，摩擦感自然就在後面的每一次來回修改裡冒出來。
但現在 Google 用來評估頁面品質的核心指標，本質上就是在衡量使用者用起來舒不舒服。Google 在 Core Web Vitals（核心使用者體驗指標）裡定義了三項指標：LCP（最大內容繪製）評估頁面主要內容多久能載入完成，INP（互動至下一次繪製）評估使用者點擊或輸入後畫面反應有多快，CLS（累計版面配置轉移）評估載入過程中畫面元素會不會突然亂跳位置。這三項全部是以使用者的實際感受設計出來的量測方式，不是一套跟使用者體驗脫鉤的排名黑箱規則。
這代表把使用者體驗做好，本身就是在對 SEO 有利，兩者的目標其實高度重疊，並不是天生對立的兩套規則。設計端在乎的這個頁面用起來順不順，跟 SEO 端在乎的這個頁面的核心使用者體驗指標好不好，講的常常是同一件事，只是換了一套詞彙在描述而已。
全螢幕主視覺不必以隱藏標題文字為代價
第一個常被搬出來吵的場景，是首頁的全螢幕主視覺（Hero 大圖）。設計做這種版面時，常把標題文字縮到最小，或乾脆把整段文字燒進圖檔裡，只為了讓畫面維持一氣呵成的乾淨感；SEO 或無障礙那邊要的，卻是一段真正存在於 HTML 裡的標題文字，能被螢幕閱讀器唸出來、也能被搜尋引擎讀懂這一頁在講什麼。這其實是最容易解的假衝突，解法是把標題文字做成真實的 HTML 文字，疊加在圖片上方，用 CSS 定位、漸層遮罩或文字陰影維持在圖片上仍然清晰可讀，畫面的沉浸感完全不會受影響，卻不必再把文字燒進圖片本身。
這裡還有一個常被誤解的前提：Google 在 SEO 入門指南裡明白提到，標題的語意順序（H1 在最上面、H2 依序往下排）本身不是排名因子，網路上多數頁面本來就不是完全合乎規範的 HTML，Google 搜尋很少依賴 HTML 規範裡那套隱含的語意順序去判斷排名。標題順序真正重要的場合，是需要靠標題階層去理解頁面結構的螢幕閱讀器與其他輔助工具，指南也提到標題的數量沒有所謂的魔法數字。
也就是說，這裡真正的天平兩端，從來就不是設計贏還是 SEO 贏，而是畫面呈現對上讀者與機器能不能解析出內容結構，後者本來就該優先，這跟外界常說的 SEO 打敗設計完全是兩回事。設計想要的沉浸感留得住，讀者與機器也讀得到內容，兩邊都不用讓步。
導覽做得精簡，內部連結的需求並未消失
第二個場景是導覽列。設計偏好把主導覽收得極簡，例如只留五到七個主要分類，其餘全部收進漢堡選單裡，維持畫面乾淨俐落；SEO 端則擔心重要頁面因此缺乏內部連結，爬蟲難以發現藏得比較深的內容。這同樣是一個假衝突，把主導覽做精簡不代表要放棄內部連結。次要連結完全可以分散進頁尾（footer）、麵包屑（breadcrumb），或正文段落裡自然帶出的內鏈，一樣能把連結網絡建起來，主畫面照樣維持乾淨。
真正該避開的，是另一種完全不同的情況，也就是整組導覽連結完全靠 JavaScript 事件監聽動態產生，頁面原始碼裡沒有對應的真實 a href 連結存在。Google Search Central 的文件裡對這類做法講得很清楚，方法不應該依賴使用者的動作，例如捲動或點擊，去載入內容，因為 Google 搜尋不會真的跟頁面互動。這個原則同樣適用在導覽選單上，如果選單連結只在使用者點擊展開後，才由 JavaScript 動態產生 DOM 節點，爬蟲一樣抓不到這些連結路徑，跟捲動載入內容抓不到，是同一類技術限制。
麵包屑其實同時服務兩邊，使用者靠它知道自己現在站在網站的哪個位置，搜尋引擎靠它理解整個站台的結構層級。這種兩邊都受益的手法，才是這個場景真正該花力氣做的事，不是在導覽好不好看跟連結夠不夠多之間選一邊。
字體與動畫拖慢網站的兇手是沒做優化
第三個場景是客製字體與精緻的進場動畫，這兩樣東西最常被算成拖慢網站、傷害使用者體驗指標的兇手，逼設計端在畫面有質感跟網站夠快之間選邊站。但多數時候真正的問題不是用了客製字體或動畫這件事本身，是沒有做該做的優化。
字體可以做子集化（font subsetting），只載入頁面實際用得到的那些字元，不必把整套字型檔案完整下載一次；搭配適當的 font-display 設定，可以避免使用者先看到一片空白，或是字型換上去的那一瞬間畫面突然跳動。動畫也一樣，只要限定使用不會觸發版面重新排版的 CSS 屬性，像是 transform、opacity，效果一樣可以做得細膩，卻不會造成畫面位移。前面提到的 LCP（最大內容繪製）與 CLS（累計版面配置轉移），正好分別對應載入速度感受與畫面穩不穩這兩項核心使用者體驗指標，這正是視覺呈現與效能重疊、而不是互斥的地方。
換句話說，動畫真正會拖累 CLS 的，是直接改動 width、top 這類會觸發重新排版的屬性；改用 transform 或 opacity 做位移與淡入淡出，視覺效果不變，指標也不受影響。字體也是同樣的道理，客製字體想要的那種質感，跟使用者會不會先看到一片空白，本來就是兩件可以分開處理的事，不必用其中一個去換另一個。
捲動不中斷的體驗，與內容被索引可以並存
第四個場景是無限捲動，常見於新聞首頁、圖庫、社群式版面。設計要的是流暢不中斷的瀏覽體驗，讀者滑到底就自動接上下一批內容；SEO 端擔心的是 Googlebot 根本不會模擬使用者去捲動這個動作，捲動之後才載入的內容，永遠不會被搜尋引擎讀到。
Google Search Central 的文件裡示範過一個真實的技術限制，Googlebot 不會捲動頁面，如果一個頁面明明有幾十篇文章，其餘內容卻要靠捲動觸發才會載入出來，Googlebot 往往只讀得到最上面那一小部分，其餘的等於對搜尋引擎不存在。這是無限捲動這類做法天生的技術限制，跟設計品味沒有關係。
但這份文件同時給出了明確的解法，不是要求放棄無限捲動的體驗，而是同時支援分頁載入：每一段內容都對應一組獨立、持久的網址；同一個網址每次載入的內容要保持一致；避免使用像 date=yesterday 這種相對日期當作網址參數，改用 page=12 這種絕對頁碼；把各個網址依序串連起來，讓搜尋引擎能發現整個分頁集合；載入新的內容區塊時，用 History API 更新目前顯示的網址，讓使用者可以重新整理、分享，或是直接連到當下正在看的那個區塊。
這樣一來，使用者體驗到的仍然是無縫的捲動，畫面上完全感覺不到分頁的存在；但每個內容區塊都對應著一個可以被單獨連結、分享、索引的網址，可索引性跟捲動的流暢感從頭到尾都沒有互相排斥過。
低對比與圖片化文字是設計真正該讓步之處
前面四個場景都能靠技術手法兩全，但確實有兩種常見的設計選擇，是沒有中間地帶的真衝突：一種是為了追求某種質感，刻意把文字對比壓得很低，例如淺灰字配白色背景；另一種是把重要的文字內容整段做成圖片，確保排版、字距、字重完全不跑掉，這在行銷活動頁、品牌故事頁的精緻排版裡很常見。
這兩種情況不是還沒優化好，是設計選擇本身就直接犧牲了讀者理解與機器解析。低對比會讓一部分讀者，像是低視力、老花、或是在強光環境下用手機的人，根本看不清楚內容在寫什麼；圖片化文字則讓螢幕閱讀器、搜尋引擎、AI 摘要工具全部拿不到這段文字的實際內容，不管圖片壓縮得多好、替代文字寫得多完整，都補不回原本應該可以被選取、複製、逐字解析的文字本身。
W3C 在 WCAG 2.1 對比標準裡訂出明確的門檻：一般文字至少要達到 4.5:1，大字級文字（18 級或 14 級粗體以上）至少要達到 3:1，訂這個標準的目的，是讓中度低視力或對比感知障礙的使用者，不必額外借助輔助工具也能看清文字。商標與品牌名稱文字不受這個對比要求限制，純裝飾性、可以任意替換也不影響語意的文字，同樣排除在外。
圖片化文字的根本問題，跟圖片有沒有壓縮、優化到什麼程度完全無關。美國聯邦的無障礙指引網站 Section508.gov 說得很直接，圖片沒有替代文字，倚賴螢幕閱讀器的使用者就完全拿不到圖片裡承載的內容；替代文字同時也讓這段視覺內容能被技術應用讀取，包括搜尋引擎最佳化、數位助理，還有人工智慧。這說明圖片裡的文字讀不到，從來不是單純的 SEO 問題，倚賴輔助技術閱讀的使用者，跟搜尋引擎與 AI 工具，其實是同一件事的兩面，同時都讀不到。
這裡沒有工程解法能讓兩邊都滿意，只能二選一，而該讓步的是純粹的視覺偏好，不是使用者能不能讀懂，也不是機器能不能解析。今天用網頁字型搭配 CSS，幾乎都能做出品牌想要的排版效果，同時保留真實可選取的文字，不必回到把文字做成圖片這種舊解法；真的需要用圖片承載品牌識別的地方，例如商標本身，並不在這條規則要求讓步的範圍內。
讓步的不是 SEO 或設計，是讀者與機器先讀懂
把前面六個場景放在一起看，其實可以收成一句能夠實際拿來用的判準，遇到爭議的時候先問這個視覺選擇會不會讓一部分讀者看不懂，或是讓搜尋引擎與 AI 工具解析不到這段內容。答案如果是會，這就是真衝突，該讓步的是視覺偏好；答案如果是不會，只是兩邊各自習慣的做法不一樣，那就該花時間去找兩全的工程或內容解法，不是把它當成非黑即白的選擇題，直接放棄某一邊。
回顧一下，六個場景裡有四個其實是假衝突：全螢幕主視覺可以疊真實文字、精簡導覽可以靠頁尾與麵包屑補內鏈、字體與動畫拖慢網站的兇手多半是沒做優化、無限捲動可以搭配分頁網址結構。真正沒有中間地帶的，只有低對比配色與圖片化文字這兩種，讀者理解或機器解析必然被犧牲掉的選擇。四比二的比例，說明多數被拿出來吵的衝突，其實都花得起力氣去拆解，只是流程上少了願意去拆的那個人。
這不是 SEO 比較重要或是設計比較重要的立場之爭，是先守住一條共同的底線：內容要能被讀懂、能被解析，再讓兩邊各自在這條底線之上去發揮。設計不必把每一個堅持都當成要跟 SEO 對抗的敵人，SEO 也不必把每一次讓步都算成設計輸了一次，兩邊本來就該是同一個團隊，在往同一個方向努力。
下一次設計稿被要求大幅修改、或是 SEO 的建議被直接推翻的時候，先別急著決定要聽誰的。把那個爭議點單獨抽出來，問一次那句判準，讀者跟機器讀不讀得到會不會受影響，還是其實不受影響。多數時候，這樣一問就會發現根本不必吵，只是還沒有人把兩全的做法找出來而已。