Mobile SEO必學!行動版網站健檢Search Console幫你做

Google Search Console 早在 2013 年就將行動版網頁列為檢測的項目,目的就是想讓更多的行動版網頁能夠進行優化,進而在行動裝置上提供更優異的使用者體驗,這樣的功能在行動裝置越趨重要的時代,提供所有行動版網頁的管理者一個便利協助工具。而「行動裝置可用性」報表也隨著 Search Console 的版本更新,也重新推出了新的介面來繼續提供服務,這次就讓我們來了解新版的「行動裝置可用性」有什麼功能、該如何使用吧! 
TL;DR 文章太長但時間不夠,沒關係可以跳著看

為什麼需要「行動裝置可用性」報表

行動裝置在全球已經非常的普及,連帶的也大大帶動了行動版網頁的使用,根據 StatCounter 的資料顯示,早在 2016 年就已經出現第一次行動裝置的上網流量超越桌上型裝置的現象,而隨著行動裝置持續成長的趨勢之下,為行動版網頁的建立與優化投入更多的資源也已經成為必然。
行動裝置的普及也就代表著 Mobile SEO 的重要性大大的提升,在 Mobile SEO 領域當中有許多的技術與細節需要注意,而「行動裝置可用性報告」在整體策略方向則扮演著穩固基礎的角色,專注於網頁的使用性這個面向來提供協助,讓使用者可以流暢的使用網頁,未來也可以在這樣的基礎下,更深入的去耕耘 Mobile SEO。
對於行動版網頁的實質應用、管理上,「行動裝置可用性報告」提供了後續對網頁進行維護的協助,同時也是在行動版網頁架設時,可以用來作為檢核的一個基準,讓行動版網頁能夠避免許多常見的使用問題,在使用上若能避免這些狀況,就能少去因為使用者體驗不佳所帶來的不良影響。
internet usage worldwide
參考文章:Mobile and tablet internet usage exceeds desktop for first time worldwide

判讀「行動裝置可用性」報表的細節

新版 Search Console 的「行動裝置可用性報告」中,最先顯示出來是網站中所有網頁的狀況與數量,狀態是簡單的分為「錯誤」、「有效」兩種,同時將這兩種狀態的網頁,以時間與數量所構成的圖表來呈現,讓整個網站中在行動裝置上的狀況可以一目了然。
Mobile-Friendly Test Tool 1
在「行動裝置可用性」的報告當中,出現的「錯誤」與「有效」這兩種網頁狀態,雖然簡單的以兩種狀態來區分網站中的網頁,但實際上的狀況並不是這麼簡單的二分法,在開始使用報表前,需要先理解 Google 是如何處理這些資料的,才能夠以更正確的方向,來解讀所得到的資訊。

「錯誤、有效」的定義

對於網頁狀態的判定,Google 內部有建立一個行動裝置可用性的評分機制,會針對網頁中所出現問題的數量與嚴重程度來計算分數,若是網頁整體的的分數高於最低標準,在報告中就會顯示「有效」;反之,如果網頁整體的評分低於設定的最低標準,報告就會以「錯誤」來呈現,同時也會列出錯誤的類型。

出現問題的時間點

由於網頁的狀態是以評分機制為標準來判斷,所以當網頁出現「錯誤」的時間點,也就會是評分低於有效門檻時才會出現,並不表示問題是在這個時間點才出現;若同時出現兩個類型的問題,也不代表這兩個問題是同時發生的。

「行動裝置可用性」的檢查項目

Mobile-Friendly Test Tool 3

不相容的外掛程式

代表網站當中出現過多行動瀏覽器不支援的外掛程式,使行動裝置在瀏覽上發生問題。常見的類型就像是採用 Flash 技術,採用這樣的技術目的就是想做出更能吸引人的網站,但當行動裝置的瀏覽器不支援時,反而會造成負面的效果。

未設定檢視點

透過設立 viewport 屬性的檢視點,可以讓瀏覽器在不同的大小尺寸上,能夠以不同的大小、排版來呈現網頁,在使用不同的裝置來檢視網頁時,就可以藉由這樣的方式,來提供各種裝置尺寸所適合的網頁。
在未設立檢視點的狀況下使用行動裝置,瀏覽器會採用預設的電腦版螢幕尺寸來呈現,使用行動裝置時就需要以縮放頁面與左右移動的方式,才能夠完成瀏覽網頁的動作,對於行動裝置來說是非常不方便的問題!

未將檢視點設為「device-width」

雖然設定了 viewport 的檢視點,但若是屬性設置為「fixed-width」,就無法讓網也隨著裝置的尺寸來調整大小。採用「device-width」就可以讓網頁的寬度,符合各種不同大小的裝置尺寸與螢幕大小,大至曲面螢幕、小至手機裝置,都可以以適合的頁面形式瀏覽。

內容寬度超出螢幕顯示範圍

部分的網頁會因為 CSS 的設定問題,而造成網頁在行動裝置瀏覽時,網頁的內容超過裝置的水平寬度,需要左右水平移動網頁,才能夠看到完整的文字或圖片。若是發生這樣的問題,就需要對網頁中的 CSS 元素進行調整,選擇使用相關寬度與位置值,同時也要確保圖片是可以縮放的狀態。

文字太小,不易閱讀

意指網頁內容中的文字大小,導致在螢幕較小的行動裝置上不容易看清楚,進而需要以縮放的方式,來閱讀網頁當中的內容。 需要針對網頁檢視點中進行重新調整,將檢視點中的字型設定為適當的大小。

可點選的元素之間距離太近

此項目是指網站中的點擊、觸控元素在行動版網頁中過於靠近,在使用手指點擊的過程中,會因此而同時觸碰到兩個元素,或是誤擊到相近的觸控元素。遇到這樣的問題就需要重新調整版面的設置,讓觸控元素以適當的間隔、大小呈現。

怎麼樣才能協助到我的行動版網頁

如果只有發現問題絕對是不夠的,後續對網站進行的修改、優化,才是能夠解決問題的重要行動;而「行動裝置可用性」工具除了能在 Google 發現問題的第一時間提供報告,在後續完成調整、優化後,也能夠再次對出現問題的網頁重新進行檢測,驗證問題是否有確實被解決,學會了這兩項功能,才是真的徹底的運用「行動裝置可用性報表」。

驗證流程

在完成特定問題的修正之後,可以在報表當中點擊該問題進入詳細的報表,接著再點擊「驗證修正後的項目」,即刻進入到驗證程序。
進入驗證程序後,Google 會對出現問題的網頁立即取樣檢查(出現「正在執行快速初步驗證」字樣);若是取樣的網頁問題已經成功解決,就會針對所有出現相同問題的網頁進行重新檢驗,並以整體網站的方式來檢測。
Mobile-Friendly Test Tool 2

驗證狀態

在成功進入檢驗程序後,就可以點擊「查看詳細資訊」來得知目前 Google 對網頁的檢驗進度,系統會針對所檢測的問題,來對網頁做出檢測後的結論,並以以下四種狀態來顯示。

  • 待處理:在最近一次的檢測當中,網頁還是存在該問題(ex. 可點選的元素距離太近),目前已經排入重新檢測的排程中。
  • 通過:在 Google 檢測過後,所選擇的問題已經被解決。
  • 失敗:在 Google 檢測過後,所選擇的問題依然存在。
  • 其他:Google 無法存取該網頁,可視為問題已解決。

Mobile-Friendly Test Tool 4

如果你的網站還沒有行動版網站

在這個人手一機的時代,如果你的網站還沒有行動裝置優先索引(Mobile-first Indexing),網站排名和閱讀體驗可是會大受影響!沒有行動版網站還是可以在 Google 使用手機找到你的網站,只是可能排名會被擠到很後面,不過也不是有行動裝置相容的網站就能在手機搜尋結果中獲得好的排名,還是需要有豐富的頁面內容、順暢的網頁速度、最好還有 AMP 頁面,貼心的附上 AMP 相關的傳送門:建立屬於您的第一個AMP網頁快來使用AMP網頁工具檢測吧AMP介紹官網

結語

在行動裝置越趨重要的現在,從 Search Console 中的「行動裝置可用性」,就可以得知 Google 想要推動行動版網頁的決心,用來鼓勵網站擁有者來優化自己的行動版網站;而網站擁有者提供適當的行動版網頁,也並不只是要滿足Google而已,最重要的是要打造良好的使用者體驗,不要讓行動版網頁反過來成為使用者的夢魘。
 
延伸閱讀:RWD 響應式網站設計是什麼?對 SEO 的好處有哪些?