距離2015年Google發佈第一個與行動裝置友善(Mobile Friendly)的演算法已經過去好幾個年頭了,而在2020-2021年間Google又再次推出全新的演算法行動裝置優先索引(Mobile First Indexing)。
今天,Inspirr將和大家一起談談有關Mobile Friendly、Mobile First Indexing的相關觀念,以及在SEO優化上該注意什麼?
行動裝置友善(Mobile Friendly)的基礎原則
行動裝置友善(Mobile Friendly)指,網站必須能夠符合行動裝置瀏覽與使用。簡單來說,要保證使用者用手機或平板打開網站時的使用體驗是非常流暢的,就能達到符合Mobile Friendly的目的。
為了達到這一目的,架設行動版網站時需遵循以下基礎規範:
◆ 避免使用對行動版網站SEO優化不友善的外掛程式,如Flash。
◆ 確保手機介面上沒有任何元素會超出行動裝置的顯示範圍。
◆ 行動裝置的螢幕較小,因此行動版網站的文字不宜太小。
◆ 可點擊元素之間的距離不宜太近,避免使用者瀏覽時誤觸按鈕。
◆ 盡量不要在行動版網站設置太煩人的覆蓋廣告;如果非要使用,廣告最好不要佔據太多版位,並設置容易點擊的可關閉廣告按鈕。
* Google於五月時所發佈的演算法 Page Experience也提出對覆蓋廣告的懲罰,這意味着隨意使用覆蓋廣告不僅會影響用戶體驗,還會影響網站SEO優化。
◆ 網站速度對用戶體驗及SEO優化都有相當程度的影響;再者做行動版網站SEO優化時,使用者網路環境可能沒有電腦裝置好,建議在網站速度優化上多下點功夫。
以上是有關「行動裝置友善(Mobile Friendly)」的基礎知識,如果你想更深入了解網站的Mobile Friendly情況,也可透過以下工具對網站進行檢測:
行動裝置相容性測試工具:透過Google的行動裝置相容性測試工具來檢測網站,如果網站不符合Mobile Friendly,工具會直接顯示錯誤並提供改善建議。但要注意的是行動裝置相容性測試工具事Page Level的檢測工具,也就是說每個頁面的檢測結果都各不一樣,請確保每個網頁至少測試一次。
行動裝置可用性報表:透過Google Search Console中的行動裝置可用性報表,一旦發現網站出現Mobile Friendly的問題,報表會直接告訴你網站的具體情況。
想做好行動版網站SEO優化
還需認識行動裝置優先索引(Mobile First Indexing)
2020年開始,Google逐漸實施行動裝置優先索引(Mobile First Indexing),這意味着網站若想保證SEO排名不受影響,除了符合上面提到的Mobile Friendly的問題,也應該符合Mobile First Indexing。
行動裝置優先索引是什麼?Mobile First Indexing的概念很簡單,就是Google爬蟲機械人會先爬取行動版網站,並根據行動版網站的質量決定行動版和電腦版的網站SEO排名。
Inspirr建議,保證網站符合Mobile First Indexing的要求,可從Mobile Friendly的基礎上,根據以下幾個優化項目再檢查一下行動版網站:
1. 重新檢查行動版網站,留意是否存在Mobile Friendly的問題。
2. 電腦版和行動版網站的內容與頁面盡量一致。如果電腦版與行動版網站是獨立網頁架構,請一定要頁對頁(下面詳細說明)。
3. 提高網站速度優化,尤其是行動版網站。
4. 確保Google爬蟲能有效爬取行動版網站。
題外話:有關Mobile First Indexing的常見問題
有關Mobile First Indexing最常出現的問題就是「行動版網站內容比電腦版網站少」或「手機版網站的動線不完整」。
由於行動版網站版面較小,很多企業都會對行動版網站的動線簡化,譬如電腦版網站界面設計2層導覽列,但行動版網站無法塞下太大的導覽列,於是將導覽列從2層簡化為1層,但由於搜索引擎需要依賴站內連結來分析網站結構,動線改變有可能會影響網站SEO。
雖然Mobile First Indexing是從2020-2021年逐漸全面實施,但如果網站做好從Mobile Friendly通常網站SEO不會出現太大問題,SEO優化原則也沒有太大變動,只是將以前電腦版網站的「基礎SEO優化原則」套用到行動版網站。比方說網站速度檢測以前是以電腦版網站為主,現在改為優先檢測行動版網站;網站動線和內連優化以行動版網站為主;網頁內容豐富度以行動版網站為主等。
選擇哪個行動版網站架構好?
了解完Mobile Friendly和Mobile First Indexing的基礎概念,接下來我們就來了解下哪種行動版網站架構對SEO優化有利。
常見的行動版網站架構大致可分為獨立式網頁(Separate URLs)、響應式網頁(Responsive Web Design)、動態服務(Dynamic Serving)。無論哪種架構,只要處理得當(重點),都能滿足SEO優化要求。
● 獨立式網頁(Separate URLs)
獨立式網頁設計,簡單來說就是電腦版網站與行動版網站各自寫了兩套網頁,因此電腦版網站與行動版的URL不相同。當使用者用手機(或平板電腦等行動裝置)瀏覽網站時,系統會將使用者導向到行動版網站;反之,則會導向到電腦版網站。
優點: 行動版網站和電腦版完全分開設計,為不同裝置的使用者設計專屬體驗。
缺點: 網站SEO優化與後續維護比較麻煩。
● 響應式網頁(Responsive Web Design,簡稱RWD)
響應式網頁設計,簡單來說就是只開發一套網頁,透過RWD技術讓網頁隨着裝置種類與尺寸的不同而改變網頁的版面及元素大小,但兩個版本網站的URL不變。
優點: 維護一套程式碼即可,在SEO優化上不容易出現問題。
缺點: 考量到網頁會根據不同裝置而縮放版面及元素,RWD網頁設計不能太複雜,且兩個版本的用戶體驗比較接近。
● 動態服務(Dynamic Serving)
動態服務與獨立式網頁設計相似,不同的是在前台使用同一網址。簡單來說就是,後端做了兩套網頁,並依賴伺服器對裝置判斷「要提供給前端行動版的程式答案還是電腦版的程式檔案」,目前Google旗下網站大多採用這種架構。
優點:行動版網站跟電腦版網站完全分開設置,為不同裝置使用者設計專屬體驗,但相對獨立式網頁而言,對SEO優化也比較不容易出現問題。
缺點:要維護兩套程式檔案,還要處理裝置導向設定,容易出現一些裝置判斷的錯誤。
最後,我想說…
相對於RWD跟動態服務相比,獨立式網頁設計在SEO優化上需要多花心思去處理,因此在維護上盡量注意以下四個重要的注意事項:
1. Google Search Console要申請兩組
如果網站是獨立式網頁設計結構,最好兩個都申請Google Search Console,方便分別查看行動版與電腦版的資料。
2. 獨立網址註解
但值得注意的是,由於獨立式網頁會將行動版和電腦版分為兩種版本的URL,實際操作上Google未必能區分兩者之間的關聯,甚至有可能會認不出它們其實是同一個網站,這樣很可能會發生以下兩個問題:
① 用戶使用行動裝置搜尋時,找到的是電腦版網站。
② 行動版網站與電腦版網站內容接近,容易產生「重複內容」的問題。
因此避免這種情況出現,建議將以下語法複製到網站各頁面上:
電腦版: 在<head>中置入<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”當前頁面的URL”>
手機版:在<head>中置入<link rel=”canonical” href=”當前頁面的URL”>
3. 避免網頁沒有頁對頁的對應
獨立式網頁設計比較怕沒有頁對頁的對應,譬如電腦版網站的每個產品都有產品介紹、購買流程以及保固說明三個頁面,但行動版網站可能會將這三個頁面濃縮為一個頁面,這頁數不一樣且沒有頁對頁的情況,Google可能會無法判斷這兩個版本網站之間的關聯性。
4. 根據裝置做轉址設定
Mobile First Indexing上線後,獨立式網頁設計可能會出現「在電腦版Google搜索時,看到手機版網站」的狀況。因此,網站需要做適當的轉址設定,以便將不同裝置使用者導向到合適版本的網站。
綜上所述,如果網站UI設計跟功能不是十分複雜,盡量使用RWD;迫不得已需要複雜介面或版型,才考量獨立式網頁或動態服務。因為RWD無論是SEO優化,還是Mobile Friendly都有不錯的幫助,同時維護成本上也相對較低。