有幸生在這個電腦、網際網路、AI 的年代。

網站驗收那天，場景通常差不多。會議室接上投影，或是老闆把筆電轉過來，設計師一頁一頁點給大家看：首頁大圖、服務介紹、關於我們、聯絡表單。畫面乾淨，字很清楚，大家點頭、簽名、上線。

這場驗收沒有做錯什麼，只是看錯了螢幕。

客人第一次見到你，多半不在會議室裡。他可能在捷運上、在等紅燈、在跟朋友吃飯的空檔聽到你的公司名字，拿起手機搜尋一下。那一次滑動，是你的網站第一次正式上場。而那個版本，驗收那天幾乎沒有人認真看過。

01Google 看的，本來就是手機版

先講一件老闆不必懂技術、但一定要知道的事：Google 現在收錄、排名你的網站，主要看的是手機版。

這件事有一條很長的時間線。行動搜尋量從 2015 年前後在多個國家陸續超過電腦；Google 在 2016 年 11 月提出「行動版優先索引」（Mobile-First Indexing）的構想，2019 年 7 月 1 日起，新上線的網站一律預設用手機版收錄；2023 年 10 月 31 日，Google 的 John Mueller 在官方部落格宣布全面轉換完成。

《SEO實戰密碼》的作者 Zac 對這件事下了一個很直接的註解：轉換完成之後，Mobile-First Indexing 這個名字其實已經不準了，應該叫 Mobile Only Indexing，只剩行動版索引，不再有電腦版索引。

驗收那天沒人細看的那個版本，正是 Google 拿去決定你排在哪裡的版本。

Google 這一端先講到這裡。機器怎麼讀網站，留給〈網站改版了，AI 卻讀不懂〉那篇；這篇要看另一端，拿著手機的那個人。

02手機版不是縮小版

很多人對手機版的想像，是把桌機版縮小，塞進一個比較窄的框。所以驗收時的心態也是：「電腦上沒問題，手機應該也沒問題吧。」

「響應式網站是什麼」這個問題，老闆只需要知道一句話：同一個網址、同一份內容，依照螢幕寬度重新排版。重點在「重新排版」這四個字。手機上的版面是另一次設計，不是同一張圖縮小。它有自己會出錯的地方，而且那些錯在大螢幕上完全看不出來。大家常說的「網站手機版跑版」，多半就出在這裡。

這件事我們自己踩過，不只一次。

OAKOrc 官網的服務頁，原本的設計是滑鼠移到服務卡片上，才浮出起價。在電腦上，這個效果乾淨、有層次。問題是手機沒有滑鼠，手指沒辦法「移上去」，這個設計等於把價格藏了起來。後來我們替觸控裝置另外處理：手機上價格直接顯示，不必等誰「移上去」。

第二件是頂端的導覽列。桌機版的導覽列上有一顆橘色的「開始合作」按鈕，放到手機上，它會跟「服務、觀點、關於」幾個連結搶位置。後來我們在手機版頂端拿掉這顆按鈕，改由首頁第一個畫面裡一顆全寬的按鈕接住同一個動作。桌機上理所當然的位置，到了手機上就得讓出來。

第三件最小，也最能說明問題。服務頁「適合誰」那一段，每一條開頭有一個粗體短句。在電腦上一切正常；到了手機上，那幾個粗體字被擠成兩個字一行，一條說明被拆得七零八落。那次修了兩輪才修對。在電腦前驗收，從頭到尾看不到它。

三件事有一個共同點：在電腦前看，全都通過。

03手機上拿掉的，Google 也看不到

還有一種問題更隱形，因為它在手機上看起來「很清爽」。

為了讓手機版乾淨一點，有些網站會把桌機版上的段落、圖片，甚至整個區塊拿掉。滑起來確實俐落。但 Google 既然用手機版收錄，被拿掉的內容就等於不存在：不會被收錄，那些字原本能帶來的關鍵字與排名，也跟著一起消失。

《SEO實戰密碼》的講法是，手機版與電腦版的主體內容、導覽與站內連結、圖片、各種標籤和結構化資料，都必須保持一致。這不代表手機版要把所有東西攤開：導覽、頁尾這類非主體的部分，可以收合起來。

所以原則只有一句：可以收起來，不能拿掉。

04拿你自己的手機，關掉 Wi-Fi 走一次

下一次驗收，或者今天就做這件事：

拿出你自己的手機，關掉 Wi-Fi，用行動網路，照客人會走的路徑走一次。

這句話裡的三個條件，少一個，驗到的就不是客人看到的那一版。

用自己的手機，不用設計師的。設計師的手機通常比較新、螢幕比較大，而且這個網站他已經看過幾十次。你的手機比較接近客人的手機。如果公司裡有人用的是舊一點、小一點的機型，借來再走一次。

關掉 Wi-Fi。會議室的網路又快又穩，客人的不是。在地下室、在訊號只剩兩格的地方，網站要多久才出現第一個畫面，只有用行動網路才量得到。

從搜尋進來，不要點設計師傳給你的連結。客人拿不到那個連結。打開 Google，搜尋你的公司名，或搜尋你的服務加上地區，從搜尋結果點進去。先看那一行標題和說明寫得像不像你，再看點進去落在哪一頁。

然後，照著客人的路徑往下走，一路問自己：

  • ✓ 進來的第一個畫面，不用往下滑，看得出你們是做什麼的嗎？
  • ✓ 字要不要用兩根手指放大，才讀得下去？
  • ✓ 有沒有哪一頁要左右滑，才看得到完整內容？
  • ✓ 按鈕和連結，手指按得準嗎？會不會一按就點到隔壁那個？
  • ✓ 選單打開之後，每一個名稱都看得出它通往哪裡嗎？選項會不會多到不知道先點哪個？
  • ✓ 有沒有跳出視窗或浮動按鈕蓋住半個畫面，而且找不到關閉？
  • ✓ 從首頁出發，要按幾下才找得到服務、價格、聯絡方式？
  • ✓ 聯絡表單在手機上填得完嗎？欄位多不多、鍵盤會不會蓋住送出鍵？
  • ✓ 電話號碼點下去，會直接撥號嗎？
  • ✓ 最後，把電腦版打開並排對照：有沒有哪一段、哪一張圖，在手機上不見了？

選單那一項的道理很簡單：導覽要給通往最重要頁面的簡單路徑，每個名稱都要清楚說出它通往哪裡。字的大小、要不要左右滑、按鈕夠不夠大、表單夠不夠短，則是手機頁面最基本的幾條要求。

這份清單沒有一項需要懂程式，每一項都只問客人走到這裡會不會卡住。卡住的地方，就是這次驗收要退回去的地方。

走不通的每一處都記下來，附上截圖，一起交回去。

05為什麼驗收總是在電腦上

驗收習慣在電腦上完成，有它的慣性。

設計稿多半先畫桌機版，畫面大、好展示；提案在會議室，會議室裡有投影；簽核的人坐在辦公桌前，桌上就是一台電腦。整個流程從頭到尾，都在一個跟客人不一樣的環境裡進行。沒有人刻意忽略手機，只是手機從來沒有被排進流程。

電腦版當然也重要。做 B2B 生意的公司，客人很可能是上班時間坐在辦公桌前查你，那一次瀏覽同樣算數。Zac 的書裡甚至提到，英文網站在某種程度上已經可以不太管電腦版的最佳化。我們不走那麼遠。兩個版本都要驗，只是順序要換：先手機，再電腦。

06把手機驗收寫進合約

如果你正要做新網站，或者正在改版，有一件事現在就能做：把手機驗收寫進驗收條件。

光寫一句「支援手機瀏覽」不夠，要寫清楚：驗收時由業主用自己的手機、在行動網路下，照上面那條路徑走過一次；走不通的地方，列進修改清單。這一條寫進去，驗收那天會議室裡的每一個人，都會多拿出一次手機。

我們做網站時，手機、平板、電腦三種版面的切版本來就在報價範圍裡，詳見網頁設計服務（NT$ 45,000 起）。但比起誰來做，更要緊的是那個驗收動作有沒有真的發生。

回到那間會議室。

大螢幕上的網站很漂亮，這一點不必懷疑。只是那個版本是給簽名的人看的；客人看到的，是手機裡那個窄窄的、會被訊號拖慢、會被手指誤觸的版本。那才是主場。

設計能被信任，技術能被理解。而能被信任的前提，是它在客人手上的那一刻也站得住。

為品牌築根，為數位開路。