|
過去幾個(gè)月在問答社區(qū)回答一些了關(guān)于移動(dòng)端網(wǎng)站優(yōu)化 問答后臺(tái)看到另一位讀者“一條愛做夢的咸魚”，也是問“新網(wǎng)站做移動(dòng)SEO，使用m站還是響應(yīng)式？”：
翻看了一下以前寫的關(guān)于移動(dòng)SEO的帖子，才發(fā)現(xiàn)主要談的是移動(dòng)頁面怎樣優(yōu)化代碼、速度等，但在架構(gòu)上應(yīng)該怎樣做移動(dòng)SEO還沒有仔細(xì)寫過。今天的帖子就深入探討一下怎樣選擇移動(dòng)優(yōu)化的三種方式。 移動(dòng)優(yōu)化的三種方式移動(dòng)網(wǎng)站大體上有三種方式可以選擇： 響應(yīng)式設(shè)計(jì)（responsive design）： PC站和移動(dòng)站的URL是完全一樣的（不管用什么設(shè)備訪問都一樣），返回給瀏覽器的HTML代碼也是一樣的，不同寬度的屏幕排版不同是通過CSS控制的。以前也經(jīng)常稱為自適應(yīng)設(shè)計(jì)，就是因?yàn)榕虐媸歉鶕?jù)屏幕寬度自動(dòng)適應(yīng)的。 動(dòng)態(tài)服務(wù)（dynamic serving）： PC站和移動(dòng)站的URL是完全一樣的，這點(diǎn)和響應(yīng)式設(shè)計(jì)相同，但動(dòng)態(tài)服務(wù)方式返回給瀏覽器的HTML代碼（以及CSS）是不一樣的，PC設(shè)備得到的HTML代碼是PC版，移動(dòng)設(shè)備得到的HTML代碼是專門做了移動(dòng)優(yōu)化的移動(dòng)版本。 獨(dú)立移動(dòng)站（separate m. site） ： 移動(dòng)站的URL和PC站是不一樣的，通常用單獨(dú)的子域名，比如PC站是www.，移動(dòng)站是m.，當(dāng)然移動(dòng)站的HTML代碼（以及CSS）與PC站也是不一樣的，是專門做了移動(dòng)優(yōu)化的。換句話說，這種方式下，移動(dòng)站就是個(gè)獨(dú)立的網(wǎng)站。 這三種方式各有各的特點(diǎn)。 響應(yīng)式設(shè)計(jì)既然URL一樣，所有設(shè)備得到的 HTML代碼也一樣，好處顯而易見：簡單明了，搜索引擎不會(huì)被弄糊涂。搜索引擎抓取、索引一套頁面就行了，提高索引效率，尤其對(duì)大網(wǎng)站，抓取份額浪費(fèi)在多個(gè)URL上，就意味著降低深層頁面被抓取的機(jī)會(huì)。自適應(yīng)設(shè)計(jì)只有一個(gè)URL，鏈接、權(quán)重計(jì)算都集中在一個(gè)URL上，不會(huì)出問題。 用戶也不會(huì)被弄糊涂，收藏書簽、分享頁面也不會(huì)因?yàn)閁RL的不同而出問題。 站長方面開發(fā)維護(hù)一套代碼就可以了，后端開發(fā)成本相對(duì)低一些。建設(shè)的外鏈也集中在一個(gè)URL上。不需要判斷設(shè)備、瀏覽器類型，也不需要轉(zhuǎn)向，也就不會(huì)出錯(cuò)。 當(dāng)然也有壞處。比如，移動(dòng)設(shè)備由于屏幕大小的關(guān)系，經(jīng)常要隱藏一些內(nèi)容和功能，但還是需要下載完整的HTML代碼，經(jīng)常還包括圖片，所以會(huì)浪費(fèi)帶寬。手機(jī)網(wǎng)速慢的話，多下載文件就意味著速度變慢。而且，同一套代碼要在所有設(shè)備顯示正常，還要盡快開始渲染，前端設(shè)計(jì)需要比較高的水平。 響應(yīng)式設(shè)計(jì)的頁面必須設(shè)置viewport，告訴瀏覽器按照屏幕寬度自動(dòng)調(diào)整頁面排版：
雖然有缺點(diǎn)，但隨著移動(dòng)網(wǎng)速、手機(jī)性能的提高，響應(yīng)式的缺點(diǎn)逐漸顯得沒那么致命，而它的簡捷性就更顯優(yōu)勢了。所以，響應(yīng)式設(shè)計(jì)是今后的方向，是大勢所趨。這也就是為什么我建議新網(wǎng)站，或者剛剛要做移動(dòng)SEO的網(wǎng)站，肯定直接就做響應(yīng)式了，不用考慮其它選項(xiàng)。（除非貴公司不差錢，可以考慮動(dòng)態(tài)服務(wù)。） 獨(dú)立移動(dòng)站和響應(yīng)式設(shè)計(jì)相比，獨(dú)立移動(dòng)站顯然開發(fā)成本要提高，要開發(fā)維護(hù)兩套代碼。隨著國內(nèi)人力成本提高，需要重復(fù)做的事情會(huì)越來越不劃算。 獨(dú)立移動(dòng)站的更大潛在麻煩是URL的不同可能造成混亂和各種出錯(cuò)。比如，既然移動(dòng)和PC版本URL不同，搜索引擎就需要建立對(duì)應(yīng)關(guān)系，必須判斷PC頁面對(duì)應(yīng)的移動(dòng)版本URL是什么，移動(dòng)頁面對(duì)應(yīng)的PC版本URL是什么。網(wǎng)站需要在頁面添加代碼幫助搜索引擎判斷： PC頁面需要加下面代碼指明移動(dòng)版本位置：
對(duì)應(yīng)的移動(dòng)頁面需要加下面代碼指明PC版本位置：
在搜索引擎兩個(gè)版本都抓取了、并且正確判斷的情況下，PC和移動(dòng)版本就建立了一一對(duì)應(yīng)關(guān)系。但是，如果站長把標(biāo)簽加錯(cuò)了怎么辦？搜索引擎只抓取了一個(gè)版本怎么辦？搜索引擎沒有準(zhǔn)確解析<link ref>標(biāo)簽怎么辦？ 而且，要建立一一對(duì)應(yīng)關(guān)系，需要PC版本和移動(dòng)版本主體內(nèi)容是一樣的。很多時(shí)候m.移動(dòng)版本頁面內(nèi)容精減或修改過多，搜索引擎認(rèn)為內(nèi)容不相符怎么辦？甚至有的時(shí)候獨(dú)立移動(dòng)站只建了部分頁面，很多PC頁面沒有對(duì)應(yīng)移動(dòng)頁面又怎么辦？ 網(wǎng)站有兩個(gè)版本，用戶在添加書簽、分享鏈接時(shí)，不可避免地會(huì)有一部分指向PC頁面URL，一部分指向移動(dòng)URL，鏈接權(quán)重將分散。 通常，為了用戶體驗(yàn)和幫助搜索引擎判斷對(duì)應(yīng)關(guān)系，網(wǎng)站需要做符合規(guī)則的轉(zhuǎn)向：
301轉(zhuǎn)向一般是服務(wù)器端做的，首先就需要根據(jù)瀏覽器用戶代理匹配特征字符串判斷用戶設(shè)備和瀏覽器類型，上網(wǎng)設(shè)備和瀏覽器五花八門，程序100%檢測正確不是件容易的事。判斷出錯(cuò)，用戶可能就只能看到一個(gè)排版錯(cuò)誤的頁面，甚至某些功能都無法使用。搜索引擎蜘蛛也可能被判斷錯(cuò)，導(dǎo)致不能建立兩個(gè)版本的對(duì)應(yīng)關(guān)系。 大公司需要用子域名做
等等。多語言hreflang標(biāo)簽和獨(dú)立移動(dòng)站的<link ref>標(biāo)簽排列組合起來，哪個(gè)對(duì)應(yīng)哪個(gè)不能弄錯(cuò)了。如果再加上Google AMP 動(dòng)態(tài)服務(wù)動(dòng)態(tài)服務(wù)和獨(dú)立移動(dòng)站一樣，首先在服務(wù)器端判斷設(shè)備和瀏覽器類型，然后在同樣的URL上、根據(jù)瀏覽器屏幕寬度返回不同的HTML和CSS代碼。 所以動(dòng)態(tài)服務(wù)方法相當(dāng)于把響應(yīng)式設(shè)計(jì)和獨(dú)立移動(dòng)站的優(yōu)點(diǎn)結(jié)合起來了，即有URL統(tǒng)一的簡潔明了，又有獨(dú)立移動(dòng)站的代碼優(yōu)化，SEO效果是最好的。當(dāng)然，代價(jià)是前后端成本都要提高。 對(duì)不差錢的公司來說，動(dòng)態(tài)內(nèi)容是最佳選擇，比如amazon現(xiàn)在就是用動(dòng)態(tài)服務(wù)做移動(dòng)優(yōu)化的，URL統(tǒng)一簡單，不會(huì)出錯(cuò)，兩個(gè)版本的代碼還可以分別優(yōu)化，據(jù)說，亞馬遜移動(dòng)版本節(jié)省了40%的文件下載量，對(duì)手機(jī)用戶來說，頁面打開速度的提升是至關(guān)重要的 。 是否使用動(dòng)態(tài)服務(wù)要看公司情況。對(duì)大部分網(wǎng)站來說，頁面內(nèi)容、排版、功能沒那么復(fù)雜，響應(yīng)式設(shè)計(jì)已經(jīng)滿足需要，用高成本實(shí)現(xiàn)動(dòng)態(tài)服務(wù)，節(jié)省的下載量沒那么明顯，比如SEO每天一貼這種博客，還有大量內(nèi)容型網(wǎng)站，頁面連個(gè)圖片都沒有，除了留言也沒有別的交互，那是一點(diǎn)下載都節(jié)省不了，動(dòng)態(tài)服務(wù)就沒意義了。 搜索引擎蜘蛛訪問動(dòng)態(tài)服務(wù)的頁面時(shí)，從HTML代碼是無法自動(dòng)知道不同瀏覽器得到的代碼將會(huì)是不同的。比如PC蜘蛛訪問時(shí)，得到的是PC版代碼，但蜘蛛并不必然知道移動(dòng)蜘蛛來訪問的話會(huì)得到不同的代碼，所以服務(wù)器端需要通過Vary HTTP頭信息告訴搜索引擎蜘蛛，PC蜘蛛和移動(dòng)蜘蛛得到的代碼是不一樣的，兩個(gè)蜘蛛都要來訪問一下。比如amazon.com頁面的服務(wù)器頭信息：
其中Vary那行就是通知瀏覽器/蜘蛛，根據(jù)后面列的情況不同，HTML代碼是不同的，Vary: User-Agent指的就是根據(jù)瀏覽器用戶代理的不同，HTML代碼是不同的。 對(duì)獨(dú)立移動(dòng)站的執(zhí)念來自何處很多公司和站長對(duì)獨(dú)立移動(dòng)站情有獨(dú)鐘，認(rèn)為m.移動(dòng)站SEO效果是最好的，做新網(wǎng)站還要做獨(dú)立m.站。這個(gè)執(zhí)念可能來自兩方面。 一是以前百度更建議獨(dú)立移動(dòng)站，我在 Google一直以來就是推薦響應(yīng)式設(shè)計(jì)的。 當(dāng)然，這里說的推薦，并不是說響應(yīng)式比獨(dú)立移動(dòng)站的SEO效果更好，而只是表明，百度和Google對(duì)三種方法是一視同仁的，排名上并不偏向哪一個(gè)，SEO效果是一樣的。既然效果一樣，當(dāng)然推薦那個(gè)簡單便宜的了。 第二個(gè)原因，就如開頭讀者說的，目前在百度移動(dòng)搜索排名靠前的m站較多。這是個(gè)準(zhǔn)確的觀察，確實(shí)百度移動(dòng)搜索結(jié)果中排名好的m站很多，在不少行業(yè)，m.站排在前面的占大部分。不過，這并不必然說明m.獨(dú)立移動(dòng)站有SEO優(yōu)勢，我覺得這更多是采樣偏差造成的。 舉個(gè)例子，數(shù)據(jù)表明，車禍發(fā)生大部分是男性司機(jī)造成的，不過這是否說明男司機(jī)開車有劣勢呢？恐怕不能這么認(rèn)為，因?yàn)楸仨毧紤]路上司機(jī)的男女比例，很可能開車的80%是男的，造成了70%的車禍，所以70%車禍?zhǔn)悄兴緳C(jī)造成，不能說明男司機(jī)開車水平比女司機(jī)差。 移動(dòng)搜索排名也是同樣道理?，F(xiàn)在排名靠前的m.站居多，很可能這些站絕大部分是老站（所以才排名能力高嘛），而幾乎所有老站當(dāng)初開始做移動(dòng)SEO時(shí)都是從m站入手的，不到萬不得已，這些使用m站的老站不會(huì)去改為響應(yīng)式設(shè)計(jì)，因?yàn)楦膭?dòng)太大了，冒險(xiǎn)，又沒有明顯好處（如前所說，三種方式SEO效果一樣的），沒有動(dòng)力改。 所以，老站、大站排名好，而老站、大站又以m站為主，所以我們就看見m站排名好了。但這不說明一個(gè)新站就要學(xué)著做m站啊。 |
|
|
