隨著移動(dòng)網(wǎng)站的流量日益增大，擁有適合移動(dòng)設(shè)備的網(wǎng)站是提升網(wǎng)站影響力的重要因素，谷歌等搜索引擎也大力加強(qiáng)移動(dòng)端的搜索體驗(yàn)，不過(guò)，很多桌面版網(wǎng)站在移動(dòng)設(shè)備上可能不太容易瀏覽及使用。因此，擁有適合移動(dòng)設(shè)備的網(wǎng)站是提升在線影響力的重要因素。為了方便網(wǎng)站站長(zhǎng)對(duì)于原有桌面網(wǎng)站在移動(dòng)設(shè)備上的優(yōu)化，谷歌推出了“移動(dòng)設(shè)備易用性”工具來(lái)幫助站長(zhǎng)優(yōu)化網(wǎng)站。

一、工具使用方法

注意，這個(gè)好用的工具用的是Google域名，需要翻墻才能訪問(wèn)，如果你不會(huì)翻墻，那么請(qǐng)忽略并跳過(guò)此文。

整個(gè)網(wǎng)站測(cè)試：

訪問(wèn)Google Webmaster，在該工具里添加網(wǎng)站，即可對(duì)整個(gè)網(wǎng)站的所有頁(yè)面進(jìn)行移動(dòng)設(shè)備易用性測(cè)試。

單個(gè)網(wǎng)頁(yè)測(cè)試：

移動(dòng)設(shè)備適合性測(cè)試工具：https://search.google.com/test/mobile-friendly

打開(kāi)這個(gè)網(wǎng)址后，將需要測(cè)試的網(wǎng)頁(yè)的完整網(wǎng)址輸入，點(diǎn)擊運(yùn)行測(cè)試，系統(tǒng)就會(huì)抓取網(wǎng)頁(yè)并進(jìn)行測(cè)試追蹤，通常測(cè)試過(guò)程不會(huì)超過(guò)一分鐘。

測(cè)試結(jié)果包括以下兩個(gè)部分：相應(yīng)網(wǎng)頁(yè)在移動(dòng)設(shè)備上所呈現(xiàn)的樣貌的屏幕截圖，以及該工具發(fā)現(xiàn)的所有移動(dòng)設(shè)備可用性問(wèn)題的列表。與在移動(dòng)設(shè)備上的易用性有關(guān)的問(wèn)題是指會(huì)對(duì)使用移動(dòng)(小屏幕)設(shè)備訪問(wèn)相應(yīng)網(wǎng)頁(yè)的用戶造成影響的問(wèn)題，包括字體過(guò)小(在小屏幕上很難看清楚)和使用 Flash(大多數(shù)移動(dòng)設(shè)備都不支持 Flash)等等。

有時(shí)候，測(cè)試結(jié)果展示的屏幕截圖并不正常，可能是測(cè)試無(wú)法加載相應(yīng)網(wǎng)頁(yè)所用的所有資源，會(huì)顯示“網(wǎng)頁(yè)包含無(wú)法加載的資源”的警告消息，這些資源是指網(wǎng)頁(yè)包含的外部元素，如圖片、CSS 或腳本文件。導(dǎo)致出現(xiàn)該問(wèn)題的最主要原因可能是網(wǎng)站站長(zhǎng)設(shè)置robots.txt禁止搜索引擎訪問(wèn)相應(yīng)資源，只需修改robots.txt，取消禁止搜索引擎訪問(wèn)此資源即可。

二、工具優(yōu)化指南

移動(dòng)設(shè)備適合性測(cè)試工具能檢測(cè)出下列可用性錯(cuò)誤，我們可以針對(duì)對(duì)應(yīng)錯(cuò)誤進(jìn)行一一修改，具體的優(yōu)化修改方法如下：

1、使用了不兼容的插件

頁(yè)面使用了Flash等插件，將Flash刪除，或者使用HTML5來(lái)替代即可。

2、未設(shè)置視口

網(wǎng)頁(yè)未定義viewport屬性，只需要在網(wǎng)頁(yè)頭部增加如下一行即可。

<meta name="viewport" content="width=device-width, initial-scale=1" />

3、文字太小，無(wú)法閱讀

網(wǎng)頁(yè)字體過(guò)小而，移動(dòng)設(shè)備用戶需要“張合雙指進(jìn)行縮放”，然后才能閱讀這些網(wǎng)頁(yè)上的內(nèi)容。這實(shí)際上和上一個(gè)是同一個(gè)問(wèn)題，網(wǎng)頁(yè)只要定義了viewport屬性，這個(gè)問(wèn)題即可解決。

4、內(nèi)容寬度超過(guò)了屏幕顯示范圍

網(wǎng)頁(yè)需要橫向滾動(dòng)屏幕才能查看其中的文字和圖片，這說(shuō)明頁(yè)面中某些元素的CSS樣式使用了寬度的絕對(duì)值，例如圖片、表格使用的980px寬度等，這種問(wèn)題的修改方法是，在css中使用響應(yīng)式設(shè)計(jì)方法，當(dāng)瀏覽器寬度介于 0 像素和 640 像素之間時(shí)，使用適合移動(dòng)設(shè)備的css，將寬度設(shè)置為相對(duì)值，或者將部分元素隱藏。示例代碼如下：

@media screen and (max-width:640px) {
    #divMain {
        width:100%;
    }
    #divSidebar {
        display:none;
    }
}

5、可點(diǎn)擊元素之間的距離太近

網(wǎng)頁(yè)上的元素(如按鈕和導(dǎo)航鏈接)間距過(guò)小，導(dǎo)致移動(dòng)設(shè)備用戶在用手指點(diǎn)按所需元素時(shí)通常會(huì)按到相鄰的元素。這個(gè)問(wèn)題也可以使用響應(yīng)式設(shè)計(jì)方法，在移動(dòng)設(shè)備上增加行高即可，示例代碼如下：

@media screen and (max-width:640px) {
    p {
        line-height:150%;
    }
}

總結(jié)

解決了這些問(wèn)題之后，點(diǎn)擊“驗(yàn)證修復(fù)”，即可讓搜索引擎重新驗(yàn)證網(wǎng)站頁(yè)面，對(duì)影響網(wǎng)站的移動(dòng)設(shè)備易用性問(wèn)題加以修復(fù)。

如果長(zhǎng)期不修復(fù)這些問(wèn)題，網(wǎng)站的移動(dòng)版網(wǎng)頁(yè)就無(wú)法提供令人滿意的瀏覽體驗(yàn)，那么網(wǎng)站頁(yè)面就會(huì)在移動(dòng)搜索結(jié)果中的排名下降，導(dǎo)致流量的損失，因此，網(wǎng)站的站長(zhǎng)趕快行動(dòng)起來(lái)，立刻使用“谷歌移動(dòng)設(shè)備易用性”工具來(lái)優(yōu)化移動(dòng)網(wǎng)站吧。

本文鏈接：http://www.hkass.cn/article/230.html