隨著移動網(wǎng)站的流量日益增大,擁有適合移動設(shè)備的網(wǎng)站是提升網(wǎng)站影響力的重要因素,谷歌等搜索引擎也大力加強(qiáng)移動端的搜索體驗(yàn),不過,很多桌面版網(wǎng)站在移動設(shè)備上可能不太容易瀏覽及使用。因此,擁有適合移動設(shè)備的網(wǎng)站是提升在線影響力的重要因素。為了方便網(wǎng)站站長對于原有桌面網(wǎng)站在移動設(shè)備上的優(yōu)化,谷歌推出了“移動設(shè)備易用性”工具來幫助站長優(yōu)化網(wǎng)站。
注意,這個好用的工具用的是Google域名,需要翻墻才能訪問,如果你不會翻墻,那么請忽略并跳過此文。
整個網(wǎng)站測試:
訪問Google Webmaster,在該工具里添加網(wǎng)站,即可對整個網(wǎng)站的所有頁面進(jìn)行移動設(shè)備易用性測試。
單個網(wǎng)頁測試:
移動設(shè)備適合性測試工具:https://search.google.com/test/mobile-friendly
打開這個網(wǎng)址后,將需要測試的網(wǎng)頁的完整網(wǎng)址輸入,點(diǎn)擊運(yùn)行測試,系統(tǒng)就會抓取網(wǎng)頁并進(jìn)行測試追蹤,通常測試過程不會超過一分鐘。
測試結(jié)果包括以下兩個部分:相應(yīng)網(wǎng)頁在移動設(shè)備上所呈現(xiàn)的樣貌的屏幕截圖,以及該工具發(fā)現(xiàn)的所有移動設(shè)備可用性問題的列表。與在移動設(shè)備上的易用性有關(guān)的問題是指會對使用移動(小屏幕)設(shè)備訪問相應(yīng)網(wǎng)頁的用戶造成影響的問題,包括字體過小(在小屏幕上很難看清楚)和使用 Flash(大多數(shù)移動設(shè)備都不支持 Flash)等等。
有時候,測試結(jié)果展示的屏幕截圖并不正常,可能是測試無法加載相應(yīng)網(wǎng)頁所用的所有資源,會顯示“網(wǎng)頁包含無法加載的資源”的警告消息,這些資源是指網(wǎng)頁包含的外部元素,如圖片、CSS 或腳本文件。導(dǎo)致出現(xiàn)該問題的最主要原因可能是網(wǎng)站站長設(shè)置robots.txt禁止搜索引擎訪問相應(yīng)資源,只需修改robots.txt,取消禁止搜索引擎訪問此資源即可。
移動設(shè)備適合性測試工具能檢測出下列可用性錯誤,我們可以針對對應(yīng)錯誤進(jìn)行一一修改,具體的優(yōu)化修改方法如下:
1、使用了不兼容的插件
頁面使用了Flash等插件,將Flash刪除,或者使用HTML5來替代即可。
2、未設(shè)置視口
網(wǎng)頁未定義viewport屬性,只需要在網(wǎng)頁頭部增加如下一行即可。
<meta name="viewport" content="width=device-width, initial-scale=1" />
3、文字太小,無法閱讀
網(wǎng)頁字體過小而,移動設(shè)備用戶需要“張合雙指進(jìn)行縮放”,然后才能閱讀這些網(wǎng)頁上的內(nèi)容。這實(shí)際上和上一個是同一個問題,網(wǎng)頁只要定義了viewport屬性,這個問題即可解決。
4、內(nèi)容寬度超過了屏幕顯示范圍
網(wǎng)頁需要橫向滾動屏幕才能查看其中的文字和圖片,這說明頁面中某些元素的CSS樣式使用了寬度的絕對值,例如圖片、表格使用的980px寬度等,這種問題的修改方法是,在css中使用響應(yīng)式設(shè)計(jì)方法,當(dāng)瀏覽器寬度介于 0 像素和 640 像素之間時,使用適合移動設(shè)備的css,將寬度設(shè)置為相對值,或者將部分元素隱藏。示例代碼如下:
@media screen and (max-width:640px) { #divMain { width:100%; } #divSidebar { display:none; } }
5、可點(diǎn)擊元素之間的距離太近
網(wǎng)頁上的元素(如按鈕和導(dǎo)航鏈接)間距過小,導(dǎo)致移動設(shè)備用戶在用手指點(diǎn)按所需元素時通常會按到相鄰的元素。這個問題也可以使用響應(yīng)式設(shè)計(jì)方法,在移動設(shè)備上增加行高即可,示例代碼如下:
@media screen and (max-width:640px) { p { line-height:150%; } }
解決了這些問題之后,點(diǎn)擊“驗(yàn)證修復(fù)”,即可讓搜索引擎重新驗(yàn)證網(wǎng)站頁面,對影響網(wǎng)站的移動設(shè)備易用性問題加以修復(fù)。
如果長期不修復(fù)這些問題,網(wǎng)站的移動版網(wǎng)頁就無法提供令人滿意的瀏覽體驗(yàn),那么網(wǎng)站頁面就會在移動搜索結(jié)果中的排名下降,導(dǎo)致流量的損失,因此,網(wǎng)站的站長趕快行動起來,立刻使用“谷歌移動設(shè)備易用性”工具來優(yōu)化移動網(wǎng)站吧。