討論行動版網站時,很多人的焦點放在手機上瀏覽順不順、按鈕好不好按;但從SEO的角度看,行動版網站要怎麼符合SEO,關鍵其實更基本:搜尋引擎讀到的手機版本,有沒有完整呈現這一頁該被搜尋到的內容與設定。由於搜尋引擎主要以網站的行動版內容來建立索引與評估頁面,手機上缺了什麼、標錯了什麼,影響的是整個網站的搜尋表現。這篇文章寫給網站管理者、正在規劃改版的企業主與行銷人員,整理兩個版本必須一致的項目、三種行動版做法各自的技術設定、讓內容讀不到的常見狀況、檢查方式,以及改版時的轉址與標準網址原則;涉及Google功能與政策的部分,實際以Google官方說明為準。
行動優先索引改變了什麼:手機上那一份才是正本
行動優先索引的意思,是搜尋引擎在檢索、建立索引與評估排名時,主要以網站行動版呈現的內容為依據。對網站經營者來說,等於「正本」換了一份:以前大家把桌機版當成內容最完整的版本,手機版是精簡過的副本;現在搜尋引擎拿去理解頁面的,反而是那份可能被精簡過的手機版。
因此,行動版SEO要問的不只是「手機好不好用」,而是「手機版有沒有把該被搜尋到的東西都放進去」。例如桌機版產品頁有完整規格,手機版只留一段摘要;桌機版側欄有相關服務的連結,手機版整塊拿掉;桌機版有常見問題區,手機版沒有。這些只出現在桌機版的內容,在行動優先索引下就可能不被當成這一頁的一部分。反過來說,只要兩個版本的內容與設定相同,行動優先索引本身並不會讓網站吃虧,真正要處理的是兩邊的落差,以及手機版能不能被順利讀取與算繪。
兩個版本要一致的清單:從主要內容到標準網址
不論採用哪一種行動版做法,下列項目都應該在行動版與桌機版之間保持一致。建議把它當成改版驗收或定期檢查的對照表,針對首頁、服務頁、產品頁、文章頁與聯絡頁等主要頁面類型逐項比對。
- 主要內容與小標:正文、規格、說明、常見問題,以及表達段落結構的小標,在手機版都要存在,意思也要相同。
- 頁面標題與描述:標題標記與描述中繼標記兩邊要相同,不要讓手機版另外使用較短或通用的文字。
- 結構化資料:桌機版有的標記手機版也要有;若是獨立行動版網址,標記裡的網址要對應到行動版網址。
- 圖片與替代文字:重要圖片不要在手機版被拿掉或換成過小的版本,替代文字、檔名與圖片說明要一致,圖片網址也不要每次載入都變動。
- 內部連結與導覽:導覽列、側欄、頁尾與內文中的重要連結,手機版要有對應的連結路徑。
- 標準網址與robots中繼標記:兩邊的標準網址設定要互相吻合,noindex這類指令也要一致,不能讓手機版被誤設為不索引。
這份清單裡最常被忽略的是內部連結。手機版為了清爽,常把多層選單收成幾個大分類,或把側欄的相關連結整塊移除;但搜尋引擎是透過連結發現頁面、理解頁面之間的關係,手機版連結大量減少,深層頁面就可能變得難以被找到。比較好的做法是保留連結本身,只調整呈現方式,例如收進可展開的選單或移到頁面下方。標題與描述也是常見漏洞:另外開發的手機版模板,有時標題直接套網站名稱、描述留空,桌機版寫得再仔細也幫不上忙。
響應式與依裝置動態提供:同一個網址下的設定重點
響應式網站是同一個網址、同一份HTML,靠CSS依螢幕寬度調整版面,在SEO設定上通常最單純,因為內容、標題、結構化資料與連結本來就是同一份。Google官方說明中也把響應式列為較容易實作與維護的做法,實際以Google官方說明為準。要顧好的重點是:正確設定viewport中繼標記,讓手機依裝置寬度呈現版面;CSS、JavaScript與圖片等算繪所需的檔案不要被robots.txt擋住;標準網址指向頁面自己即可。
不過響應式網站也會出現內容不一致。不少頁面編輯器提供「在手機隱藏」這類設定,製作頁面的人為了手機排版好看,把整段說明或一整區連結設成手機不顯示,再另做一個較短的手機版區塊,結果同一頁的HTML裡有兩套小標與文字,日後修改也容易只改到其中一套。比較穩當的做法,是讓同一個區塊在不同寬度下調整排列,真的需要精簡時,優先考慮收合而不是隱藏。
依裝置動態提供則是同一個網址,由伺服器依使用者代理程式(user agent)判斷裝置,回傳不同的HTML。兩份HTML往往出自不同模板,一致性要靠流程維持。技術上,伺服器的回應要加上 Vary 標頭並將值設為 User-Agent,讓快取系統與搜尋引擎知道這個網址會依裝置回傳不同內容;裝置判斷規則也要定期檢查,避免把搜尋引擎的手機版檢索器誤判成桌機。只要一份模板更新時漏改另一份,標題、結構化資料或內部連結就會開始出現落差。
獨立行動版網址:雙向標記、對應轉址與兩套設定
獨立行動版網址是把手機版放在另一組網址上,例如以 m 開頭的子網域。手機版與桌機版因此成為兩組不同的網頁,SEO設定最多、也最容易出錯,核心原則是讓搜尋引擎清楚知道哪一頁對應哪一頁、哪一個是標準版本。
- 雙向標記:桌機版頁面用 rel alternate 標記搭配 media 屬性指向對應的行動版網址,行動版頁面用標準網址標記指回對應的桌機版網址,兩邊要逐頁對應。
- 依裝置的對應轉址:手機使用者打開桌機網址時,應轉到同一內容的行動版網頁,而不是一律送到行動版首頁,反方向也一樣,並提供切換版本的連結。
- 兩套設定都要顧:兩組網址的robots.txt與robots中繼標記要給予相同指示;網頁不存在時,兩邊回應的錯誤狀態要一致;多語系的hreflang標記,行動版指向行動版、桌機版指向桌機版。
- Search Console驗證:兩個版本所在的網域或子網域都應完成驗證,才能分別觀察索引狀況。
這種做法最大的風險不在一開始設定錯,而在日後慢慢走樣:新增頁面忘了做行動版、桌機版改了網址但行動版標記沒跟著改、活動頁只做了桌機版,累積下來對應關係就越來越混亂。若沒有固定人力維護兩套內容,通常值得把改成響應式列入下一次改版的評估。
內容有沒有被讀到:收合區塊、分頁、延遲載入與資源阻擋
收合區塊與頁籤的原則是:內容在頁面載入時就存在HTML裡,只是畫面上先收起來,一般比較容易被讀取;若內容要等使用者點擊展開後才從伺服器另外抓取,搜尋引擎就可能看不到。分頁也一樣,手機版若把列表改成「載入更多」按鈕或無限捲動,應確保每一頁內容都有可直接開啟的網址,並用一般連結串起來,讓搜尋引擎不必點按鈕也能走到後面的內容。
延遲載入若設定成要使用者滑動、點擊或輸入後才載入主要內容,搜尋引擎算繪頁面時並不會做這些動作,內容與圖片就可能不在它讀到的版本裡。比較安全的做法,是讓延遲載入在內容進入可視範圍時觸發,並採用瀏覽器原生支援或官方建議的方式,實際以Google官方說明為準。
資源阻擋則常來自舊設定:robots.txt沿用多年前的寫法,把放置CSS、JavaScript或圖片的資料夾擋掉;獨立行動版的子網域也可能有一份跟主網域不同的robots.txt。搜尋引擎拿不到這些檔案,就無法正確算繪手機版頁面,看到的可能是版面錯亂或缺了內容的畫面。
手機畫面上的干擾與操作問題,同樣在SEO的檢查範圍內
最常見的第一類是干擾性彈出視窗:使用者從搜尋結果點進來,畫面立刻被全版廣告或訂閱邀請蓋住,必須先關掉才看得到內容。Google的網頁體驗說明中提醒避免這類干擾性插頁,但依法必須顯示的提示,例如Cookie使用告知或年齡確認,在合理使用的前提下屬於不同情況,實際以Google官方說明為準。
第二類是操作與閱讀問題:按鈕與連結太小、太密容易點錯,版面超出螢幕需要左右捲動,字太小必須放大才看得清楚。這幾種狀況常同時出現,源頭可能是同一個:頁面沒有正確設定viewport,手機只好把桌機寬度的版面整個縮小顯示。若viewport正確仍有橫向捲動,常見原因是寫死寬度的區塊、過長的網址或英數字串沒有換行、嵌入元件不會隨容器縮放。另外,禁止使用者縮放畫面會讓看不清楚的人失去補救方法,並不建議。
行動版速度同樣屬於網頁體驗的一部分,手機的網路與處理效能條件通常比桌機嚴苛,可以參考Search Console的網站使用體驗核心指標報告,分別觀察行動版與桌機版,再針對圖片尺寸、第三方程式碼與字型載入等常見原因處理。
怎麼檢查:Search Console、手機實測與兩版比對
檢查可以分成三層進行,第一層是Search Console:設定頁面可以看到網站目前由哪一種檢索器負責建立索引,網頁索引報告可以看出哪些網址未被編入索引與原因,結構化資料相關報告則能看出標記錯誤。針對個別頁面,可以用網址審查工具測試線上網址,查看以手機版檢索器算繪後的畫面與HTML,確認主要內容、圖片與連結都在。介面名稱可能隨版本調整,實際功能以Google官方說明為準。
第二層是用手機實際打開主要頁面,每一種頁面模板都挑幾頁,例如服務頁、產品頁、文章頁、列表頁與表單頁。以「從搜尋結果點進來的人」的角度走一遍:一進頁面有沒有被遮住、主要內容在不在、收合區塊能不能展開、列表能不能翻到後面、按鈕點不點得到。條件允許的話,用不同尺寸與作業系統的手機各看一次。
第三層是比對兩個版本的內容與標記。用瀏覽器開發人員工具的裝置模擬功能或切換使用者代理程式,分別取得手機版與桌機版的原始碼,逐項比對標題、描述、標準網址、robots中繼標記、小標與內容、結構化資料、替代文字與內部連結。頁面多時,可以用支援手機版使用者代理程式的網站檢索工具整批比對,找出落差最大的頁面優先處理。
改成響應式或網站改版時:轉址與標準網址的原則
從獨立行動版網址改成響應式,或趁改版調整網址結構時,基本原則是逐頁對應:每一個舊的行動版網址,都以永久轉址導向內容相同的新網址,而不是一律導回首頁;舊的桌機版網址若有變動也比照辦理。轉址最好一次到位,避免舊桌機網址先轉到舊行動版網址、再轉到新網址的連續轉址。
改成響應式後,原本的雙向標記要移除,每一頁的標準網址改為指向自己;網站地圖、結構化資料、hreflang標記與內文寫死的舊網址,也要換成新網址。舊行動版子網域在Search Console的資源可以先保留,用來觀察轉址後的檢索與索引,轉址本身也應長期維持。
另一個常被忽略的風險:兩套網頁合併成一套時,設計團隊常以手機版版面為基礎重新規劃,原本只在桌機版的內容就在新網站裡整段消失。上線前應拿舊桌機版逐頁比對,確認重要內容、小標與內部連結都已移入;也要檢查測試環境留下的全站noindex或封鎖所有檢索的robots.txt是否已移除,上線後再照前一節的方式完整檢查一次。
常見問題
網站只有桌機版、沒有行動版,還會被搜尋引擎收錄嗎?會。行動優先索引是指搜尋引擎主要用手機版檢索器讀取網站,網站只有一種版本時,讀到的就是那一份。只是頁面在手機上若需要放大或左右捲動,使用者很容易離開,網頁體驗相關的面向也較難表現良好,因此仍建議規劃行動版,實際以Google官方說明為準。
把內容放在手機版的收合區塊裡,會不會比較不被重視?原則上,內容只要在頁面載入時就存在HTML裡,使用者也能展開看到,收合本身通常不是問題。需要留意的是點擊後才從伺服器載入、或在手機版完全不輸出的內容,這兩種情況才可能讓搜尋引擎讀不到。
獨立行動版網址一定要改成響應式嗎?不是一定要改,只要雙向標記、對應轉址與兩邊內容都維持正確,搜尋引擎仍能理解。但這種做法維護成本高、出錯點多,若團隊沒有固定人力照顧兩套內容,在下一次改版時評估改成響應式,通常能讓管理單純許多。
如果你不確定自己的行動版網站和桌機版之間有沒有內容落差,或正在評估從獨立行動版網址改成響應式,創昇SEO提供免費網站健檢,會站在手機版檢索器的角度,比對主要頁面的內容、標題描述、結構化資料與標準網址設定,並列出轉址與技術設定上需要留意的地方。
改版前若想把行動優先索引、三種行動版做法的設定差異與搬遷步驟一次弄清楚,創昇SEO也提供全台免費到府解說,可以對著你網站的實際頁面,和負責設計、工程與內容的同仁一起討論,讓改版規劃從一開始就把行動版的一致性納入考量。
