Google search mobile-friendly icon

行動版搜尋 從友善網頁標示說起

3164

Preview Summary

website Reviews : 32 5.0

Google 致力於行動版搜尋的努力並非近期的事,其企圖在 Mobile search results 加上 mobile-friendly 與 non-mobile-friendly 的標示,可以看出 Google 對於行動版搜尋 – 使用者體驗的重視。本篇將針對使用響應式模板的網站,如何改善結構與內容以符合「行動搜尋 – 友善網頁」的搜尋結果。

行動版搜尋的友善網頁標示是一場跟隨 Google 制定規則的遊戲

Google 曾在 已經試探行動版搜尋結果中附加 mobile-friendly 的行動標示。但可能是解析項目與計分方式尚未成熟,以致沒有正式應用於搜尋結果當中。在 再度發現該標示顯示於行動版搜尋結果中,官方截至目前仍未公布,姑且稱為「友善網頁行動標示」。

我的寫文計畫原訂於 Google 宣佈後再將一些改善細節分享給網友,對於一項未定案的項目作評估是過於大膽;也沒有參考對象。專業級的研究網站也尚未撰文關於此項行動搜尋介面的重點。但我發現一件事實而決定將這篇「未來文」先發布。

行動搜尋的現況

先說明事實現況。
Google 行動版搜尋的 mobile-friendly 或 non-mobile-friendly 無論最終定案的搜尋介面是加上「 圖」;或是在網址附註「 mobile-friendly 」,抑或是完全不使用該介面,它都會影響你的行動版搜尋排名;我發現的事實是現在已經影響。
也就是說,當你注意到你的網站、文章在同地區的網頁版、行動版的排名不一致時,就應該要知道你是歸類為「 non-mobile-friendly 」的一群。另一方面而言,如果採取行動優化的網站,其行動版搜尋結果會高於網頁版,則屬於「 mobile-friendly 」。

如果等到 Google Search 正式啟用該介面;然後才調整網站,依照行動搜尋結果更新的速度與 Googlebot 的舊文不理慣性,可能至少要好幾週以上的時間。這段時間很可能已經被行動用戶拋棄了,假如你的排名高掛在第一頁便無須緊張。

Google Webmasters 公告 Mobile-friendly in Mobile Search 正式啟用。最終版本採行「 Mobile-friendly 」、「 行動版 」的標示方式,搜尋結果中主站以下的目錄鏈結則不另附加標示。

詳情請見:Mobile Friendly Pages

Mobile Friendly 的距離

既然被尊稱為「友善網頁」,當然距離你我更貼近了!
喔!該說是網站排名更貼近搜尋排行第一頁。我這邊實驗的數據大約會影響到 1~2 頁的差距,越多前面的「不友善行動網頁」被當作踏腳石,網頁的排名會在行動版前進越多。Google 搜尋結果一頁代表十個網頁的差距,而前段每一順位的排行如同割喉戰般激烈!

友善與優化的差異

雖然 Google 標榜 Mobile Friendly,但實際上它的要求標準較貼近 Mobile Optimized 行動網站優化。這種更符合行動裝置的網站優化的現況像是以下的例子:

記者訪問:「請問您跟身旁的這位男士是什麼關係?」
女:「沒有啦~我跟他只是普通朋友﹍」(友善網頁而已)
記者爆料:「啊!所以昨晚看到他挽著另一位辣妹,那就沒關係了。」
女轉頭怒視驚恐男:「說!她到底是誰?!」
無辜的驚恐男:「那是我妹啦﹍」

友善網頁 標示標準

雖然 Google 尚未公佈友善網頁依循的標準為何?我推測應該是參考 PageSpeed Insights 的分析數據。也就是說,它將會以載入速度當作主要參考,請參酌前文:
網頁載入速度

在實際的分析標準中區分為:「速度」、「結構」、「內容」三大部份。基本上要超過 55 分以上才會列入 Mobile friendly,如使用 CDN 等服務則另外加隱藏分數(公告之 Mobile test tool 在「速度」部份已放寬標準)。以下我將一些經常誤區列舉,其他許多細節不列出來,請自行操作 PageSpeed Insights 的分析應用。

響應式的初衷

「載入速度」是響應式之母。響應式原本就是要討好網速頻寬與流量限制的智慧型手機所開發的網頁結構,所以除了「速度」還是「速度」。

  • 減少載入不必要的元素,替網站瘦身是第一要務

這項改善在加掛許多插件的網站不容易實現,例如 WordPress 插件的撰寫通常是採用相對路徑,在合併檔案或遇到更新時會引發災難。如能自行控制插件,將 js 檔案盡量安置於最後載入。

  • 壓縮圖片是得分之鑰

Google PageSpeed 對於圖片的壓縮要求是採取 Webp 格式的比較級,即使你把圖片壓縮到面目全非;還是比不上 Webp 的輕巧又清晰,所以網頁中圖片越多分數越低。想要改用 Webp?可惜只適用於 Chrome、Opera、Android 家族。

這時候你要考慮的是:讓訪客看到清晰賞心悅目的圖片  友善網頁,還是載入超快的模糊圖片  行動優化?由於這個主題較大,另篇繼續討論。

圖片壓縮服務
  • 社群插件是減分元兇

運用社群分享有兩類。第一類是仰賴社群插件的內嵌物件,猶如吸血鬼般吸乾你的網速,讓你扣分再扣分。而且制式的分享按鈕無法自訂,太小的按鈕又扣分!
第二類是單純的社群連結,不用 +1;也不必按讚,按鈕還可以做得比月餅還大~這種以 CSS 建造的按鈕不影響速度。所以這類社群插件種類最好簡化。

所以我考慮要保留虛榮心,看看那些可愛的 +1 數字,還是換個不拖速的綜合外掛當作門面?或是花老本購買 CDN 服務?
最後我選擇了自行整修這條路﹍

行動版本的友善結構

構成行動版本有三類:

  • 響應式設計單一版本
  • 偵測式回應自訂樣式
  • 多版本指向標準網址

如果貴站不屬於以上三類的結構,那就和「友善行動網頁標示」說再見吧!如的確採用行動版本,但又不被標示為行動版本,應該回應給原範本作者或是檢查「尺寸」的誤區。

width 100% 的迷思

響應式的基本構成在於 width %,也就是行動網頁是否會出現橫向滾條的判斷為依據。出現了超出屏幕寬度的網頁會扣分,這裡指的是最外框的比例是否超出螢幕寬度。但 100% 並非全能,Google 所判斷的最小螢幕尺寸為 320px,所以 CSS 在結構上最好附加以下的樣式去限定那些不小心超出 100% 的物件。如最小樣式原本小於 320px,就改寫紅字部份為原本的最小尺寸。

html body {
min-width : 319px; overflow : hidden;
}
區域無法流動

雖然最外框的寬度與螢幕比例是最重要的部份,全然使用 width: 100% 的結果有可能造成某些裡面的物件被縮小到太小以致無法辨認(如按鈕、圖片)。這時要避免強制等比的網頁宣告:maximum-scale=1

或是製造一些區塊讓它可以依據螢幕寬度擠壓流動到下方,裡面的物件就不會變形為「不友善網頁」了。這屬於網頁設計的部份,使用該版本前請務必預覽確認,省下修改的功夫。請參考前文:
如何分辨響應式網頁設計

網頁內容不超標

Google 對於行動版本的認定是指「智慧型手機」而言,就是 Mobile;Tablet 並不被涵蓋在內。所有的一切要針對 Mobile 版本優化,就算你網頁版、平板樣式設計很爛,它也不管。我的建議是:緊盯 640px 以下的樣式。

友善網頁的抉擇

當你覺得某項插件或小工具讓網站扣很多分或並非必要,要狠下心來將該物件在響應式最小 @media 區段樣式使用「display: none」去移除它。刪除越多,恢復分數越多。圖片或影片是最容易不小心超出「尺度」的物件。

意外的住客

有些物件可能在意料之外,例如有些插件會把某個 class、id 藏到螢幕外而設定個 text-indent: -9999px 或是 top: -9999px 之類的,或是例如 Google 自訂搜尋會將其他舊式瀏覽器顯示而準備的 Close X 鍵藏在本體旁邊。本來以為藏得神不知鬼不覺地,這正直的「友善網頁行動標示」居然毫不留情地糾舉出來。但有時它也會失神分析錯誤,所以行動版要拿到 60 分以上是比較安全的。

I/O Uasge 流量控制

如果你的虛擬主機營運商對於硬碟資料有控管,你可以在控制檯中查看網站 data 的最大輸出流量。它為了穩定同時進入網站要求 data 數據的品質,當然如果你是使用 VPS 的大戶則無須擔憂。
會提到流量控制是因為載入內容、文件的大小如果超出每秒流量控制而必須分段載入,Google 分析就會顯示該伺服器反應過慢。可以在 Pingdom Tools 查看網頁文件檔案的總量,或是從 Google Analytics 的分析建議著手。當然較佳的作法是採用靜態網頁暫存檔與文件資料檔加掛在 CDN 雲端連結中,付費服務總是有好處的。

意見調查

許久沒有進行數據調查了。
請問您的網站或部落格是否使用 mobile-friendly 行動版本?可以留言回應或是直接在 星等上投票,謝謝!

行動版搜尋的友善網頁標示是一場跟隨 Google 制定規則的遊戲 Google 曾在 2012 年 10 月已經試探行動版搜尋結果中附加 mobile-friendly 的行動標示。但可能是解析項目與計分方式尚未成熟,以致沒有正式應用於搜尋結果當中。在 2014 年 10 月初再度發現該標示顯示於行動版搜尋結果中,官方截至目前仍未公布,姑且稱為「友善網頁行動標示」。 我的寫文計畫原訂於 Google 宣佈後再將一些改善細節分享給網友,對於一項未定案的項目作評估是過於大膽;也沒有參考對象。專業級的研究網站也尚未撰文關於此項行動搜尋介面的重點。但我發現一件事實而決定將這篇「未來文」先發布。 行動搜尋的現況 先說明事實現況。Google 行動版搜尋的 mobile-friendly 或 non-mobile-friendly 無論最終定案的搜尋介面是加上「 圖」;或是在網址附註「 mobile-friendly 」,抑或是完全不使用該介面,它都會影響你的行動版搜尋排名;我發現的事實是現在已經影響。也就是說,當你注意到你的網站、文章在同地區的網頁版、行動版的排名不一致時,就應該要知道你是歸類為「 non-mobile-friendly 」的一群。另一方面而言,如果採取行動優化的網站,其行動版搜尋結果會高於網頁版,則屬於「 mobile-friendly 」。 如果等到 Google Search 正式啟用該介面;然後才調整網站,依照行動搜尋結果更新的速度與 Googlebot 的舊文不理慣性,可能至少要好幾週以上的時間。這段時間很可能已經被行動用戶拋棄了,假如你的排名高掛在第一頁便無須緊張。 November, 18, 2014 Google Webmasters 公告 Mobile-friendly in Mobile Search 正式啟用。最終版本採行「 Mobile-friendly 」、「 行動版 」的標示方式,搜尋結果中主站以下的目錄鏈結則不另附加標示。 詳情請見:Mobile Friendly Pages Mobile Friendly 的距離 既然被尊稱為「友善網頁」,當然距離你我更貼近了!喔!該說是網站排名更貼近搜尋排行第一頁。我這邊實驗的數據大約會影響到 1~2 頁的差距,越多前面的「不友善行動網頁」被當作踏腳石,網頁的排名會在行動版前進越多。Google 搜尋結果一頁代表十個網頁的差距,而前段每一順位的排行如同割喉戰般激烈! 友善與優化的差異 雖然 Google 標榜 Mobile Friendly,但實際上它的要求標準較貼近 Mobile Optimized 行動網站優化。這種更符合行動裝置的網站優化的現況像是以下的例子: 記者訪問:「請問您跟身旁的這位男士是什麼關係?」女:「沒有啦~我跟他只是普通朋友﹍」(友善網頁而已)記者爆料:「啊!所以昨晚看到他挽著另一位辣妹,那就沒關係了。」女轉頭怒視驚恐男:「說!她到底是誰?!」無辜的驚恐男:「那是我妹啦﹍」 友善網頁 標示標準 雖然 Google 尚未公佈友善網頁依循的標準為何?我推測應該是參考 PageSpeed Insights 的分析數據。也就是說,它將會以載入速度當作主要參考,請參酌前文:網頁載入速度 在實際的分析標準中區分為:「速度」、「結構」、「內容」三大部份。基本上要超過 55 分以上才會列入 Mobile friendly,如使用 CDN 等服務則另外加隱藏分數(公告之 Mobile test tool 在「速度」部份已放寬標準)。以下我將一些經常誤區列舉,其他許多細節不列出來,請自行操作 PageSpeed Insights 的分析應用。 響應式的初衷 「載入速度」是響應式之母。響應式原本就是要討好網速頻寬與流量限制的智慧型手機所開發的網頁結構,所以除了「速度」還是「速度」。
  • 減少載入不必要的元素,替網站瘦身是第一要務
這項改善在加掛許多插件的網站不容易實現,例如 WordPress 插件的撰寫通常是採用相對路徑,在合併檔案或遇到更新時會引發災難。如能自行控制插件,將 js 檔案盡量安置於最後載入。
  • 壓縮圖片是得分之鑰
Google PageSpeed 對於圖片的壓縮要求是採取 Webp 格式的比較級,即使你把圖片壓縮到面目全非;還是比不上 Webp 的輕巧又清晰,所以網頁中圖片越多分數越低。想要改用 Webp?可惜只適用於 Chrome、Opera、Android 家族。 這時候你要考慮的是:讓訪客看到清晰賞心悅目的圖片  友善網頁,還是載入超快的模糊圖片  行動優化?由於這個主題較大,另篇繼續討論。 圖片壓縮服務
  • 社群插件是減分元兇
運用社群分享有兩類。第一類是仰賴社群插件的內嵌物件,猶如吸血鬼般吸乾你的網速,讓你扣分再扣分。而且制式的分享按鈕無法自訂,太小的按鈕又扣分!第二類是單純的社群連結,不用 +1;也不必按讚,按鈕還可以做得比月餅還大~這種以 CSS 建造的按鈕不影響速度。所以這類社群插件種類最好簡化。 所以我考慮要保留虛榮心,看看那些可愛的 +1 數字,還是換個不拖速的綜合外掛當作門面?或是花老本購買 CDN 服務?最後我選擇了自行整修這條路﹍ 行動版本的友善結構 構成行動版本有三類:
  • 響應式設計單一版本
  • 偵測式回應自訂樣式
  • 多版本指向標準網址
如果貴站不屬於以上三類的結構,那就和「友善行動網頁標示」說再見吧!如的確採用行動版本,但又不被標示為行動版本,應該回應給原範本作者或是檢查「尺寸」的誤區。 width 100% 的迷思 響應式的基本構成在於 width %,也就是行動網頁是否會出現橫向滾條的判斷為依據。出現了超出屏幕寬度的網頁會扣分,這裡指的是最外框的比例是否超出螢幕寬度。但 100% 並非全能,Google 所判斷的最小螢幕尺寸為 320px,所以 CSS 在結構上最好附加以下的樣式去限定那些不小心超出 100% 的物件。如最小樣式原本小於 320px,就改寫紅字部份為原本的最小尺寸。 html body { min-width : 319px; overflow : hidden; } 區域無法流動 雖然最外框的寬度與螢幕比例是最重要的部份,全然使用 width: 100% 的結果有可能造成某些裡面的物件被縮小到太小以致無法辨認(如按鈕、圖片)。這時要避免強制等比的網頁宣告:maximum-scale=1 或是製造一些區塊讓它可以依據螢幕寬度擠壓流動到下方,裡面的物件就不會變形為「不友善網頁」了。這屬於網頁設計的部份,使用該版本前請務必預覽確認,省下修改的功夫。請參考前文:如何分辨響應式網頁設計 網頁內容不超標 Google 對於行動版本的認定是指「智慧型手機」而言,就是 Mobile;Tablet 並不被涵蓋在內。所有的一切要針對 Mobile 版本優化,就算你網頁版、平板樣式設計很爛,它也不管。我的建議是:緊盯 640px 以下的樣式。 友善網頁的抉擇 當你覺得某項插件或小工具讓網站扣很多分或並非必要,要狠下心來將該物件在響應式最小 @media 區段樣式使用「display: none」去移除它。刪除越多,恢復分數越多。圖片或影片是最容易不小心超出「尺度」的物件。 意外的住客 有些物件可能在意料之外,例如有些插件會把某個 class、id 藏到螢幕外而設定個 text-indent: -9999px 或是 top: -9999px 之類的,或是例如 Google 自訂搜尋會將其他舊式瀏覽器顯示而準備的 Close X 鍵藏在本體旁邊。本來以為藏得神不知鬼不覺地,這正直的「友善網頁行動標示」居然毫不留情地糾舉出來。但有時它也會失神分析錯誤,所以行動版要拿到 60 分以上是比較安全的。 I/O Uasge 流量控制 如果你的虛擬主機營運商對於硬碟資料有控管,你可以在控制檯中查看網站 data 的最大輸出流量。它為了穩定同時進入網站要求 data 數據的品質,當然如果你是使用 VPS 的大戶則無須擔憂。會提到流量控制是因為載入內容、文件的大小如果超出每秒流量控制而必須分段載入,Google 分析就會顯示該伺服器反應過慢。可以在 Pingdom Tools 查看網頁文件檔案的總量,或是從 Google Analytics 的分析建議著手。當然較佳的作法是採用靜態網頁暫存檔與文件資料檔加掛在 CDN 雲端連結中,付費服務總是有好處的。 意見調查 許久沒有進行數據調查了。請問您的網站或部落格是否使用 mobile-friendly 行動版本?可以留言回應或是直接在 星等上投票,謝謝!

您是否使用行動版本?

Mark 美其名的行動版,有點拖速 - 100%
跪婦阿冠 使用 Blogger 行動版 - 100%
伍智元 採用響應式行動版 - 100%
Daniel 使用行動版 - 100%
Tong 使用響應式行動版 - 100%
Anna 使用 Mobile-friendly 行動版 - 100%

100%

Yes!

請問您的網站或部落格是否使用行動版本?可以留言回應或是直接在 星等上投票,謝謝!

User Rating: 4.29 ( 30 votes)
32
· · ·