移動端網站SEO優化該怎樣做?

過去幾個月在問答社區回答了一些關于移動端網站優化問題,發現很多移動SEO的問題涉及到用哪種架構做移動站。不少SEO貌似對獨立移動站,也就是單獨的m.domain站有不小的執念,認為獨立移動站才是效果最好的。

問答后臺看到另一位讀者“一條愛做夢的咸魚”,也是問“新網站做移動SEO,使用m站還是響應式?”:

您好,我在某個回答中看到了你的回答,有一些疑惑,您建議:“新網站,或者剛剛要做移動SEO的,最好就直接采取響應式了。”,為什么直接采取響應式呢,我自己的感覺是目前移動搜索排靠前的都是m站較多

翻看了一下以前寫的關于移動SEO的帖子,才發現移動端SEO到底應該選哪種方式優化還沒有仔細寫過。今天的帖子就深入探討一下怎樣選擇移動優化的三種方式。

移動優化的三種方式

移動網站大體上有三種方式可以選擇:

響應式設計(responsive design):

PC站和移動站的URL是完全一樣的(不管用什么設備訪問都一樣),返回給瀏覽器的HTML代碼也是一樣的,不同寬度的屏幕排版不同是通過CSS控制的。以前也經常稱為自適應設計,就是因為排版是根據屏幕寬度自動適應的。

動態服務(dynamic serving):

PC站和移動站的URL是完全一樣的,這點和響應式設計相同,但動態服務方式返回給瀏覽器的HTML代碼(以及CSS)是不一樣的,PC設備得到的HTML代碼是PC版,移動設備得到的HTML代碼是專門做了移動優化的移動版本。

獨立移動站(separate m. site) :

移動站的URL和PC站是不一樣的,通常用單獨的子域名,比如PC站是www.nkjmnnn.com,移動站是m.seozac.com,當然移動站的HTML代碼(以及CSS)與PC站也是不一樣的,是專門做了移動優化的。換句話說,這種方式下,移動站就是個獨立的網站。

這三種方式各有各的特點。

響應式設計

既然URL一樣,所有設備得到的 HTML代碼也一樣,好處顯而易見:簡單明了,搜索引擎不會被弄糊涂。搜索引擎抓取、索引一套頁面就行了,提高索引效率,尤其對大網站,抓取份額浪費在多個URL上,就意味著降低深層頁面被抓取的機會。自適應設計只有一個URL,鏈接、權重計算都集中在一個URL上,不會出問題。

用戶也不會被弄糊涂,收藏書簽、分享頁面也不會因為URL的不同而出問題。

站長方面開發維護一套代碼就可以了,后端開發成本相對低一些。建設的外鏈也集中在一個URL上。不需要判斷設備、瀏覽器類型,也不需要轉向,也就不會出錯。

當然也有壞處。比如,移動設備由于屏幕大小的關系,經常要隱藏一些內容和功能,但還是需要下載完整的HTML代碼,經常還包括圖片,所以會浪費帶寬。手機網速慢的話,多下載文件就意味著速度變慢。而且,同一套代碼要在所有設備顯示正常,還要盡快開始渲染,前端設計需要比較高的水平。

響應式設計的頁面必須設置viewport,告訴瀏覽器按照屏幕寬度自動調整頁面排版:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

雖然有缺點,但隨著移動網速、手機性能的提高,響應式的缺點逐漸顯得沒那么致命,而它的簡捷性就更顯優勢了。所以,響應式設計是今后的方向,是大勢所趨。這也就是為什么我建議新網站,或者剛剛要做移動SEO的網站,肯定直接就做響應式了,不用考慮其它選項。(除非貴公司不差錢,可以考慮動態服務。)

獨立移動站

和響應式設計相比,獨立移動站顯然開發成本要提高,要開發維護兩套代碼。隨著國內人力成本提高,需要重復做的事情會越來越不劃算。

獨立移動站的更大潛在麻煩是URL的不同可能造成混亂和各種出錯。比如,既然移動和PC版本URL不同,搜索引擎就需要建立對應關系,必須判斷PC頁面對應的移動版本URL是什么,移動頁面對應的PC版本URL是什么。網站需要在頁面添加代碼幫助搜索引擎判斷:

PC頁面需要加下面代碼指明移動版本位置:

<link rel=”alternate” media=”only screen and (max-width: 640px)”?href=”https://m.seozac.com/”>

對應的移動頁面需要加下面代碼指明PC版本位置:

<link rel=”canonical” href=”http://www.nkjmnnn.com/”>

在搜索引擎兩個版本都抓取了、并且正確判斷的情況下,PC和移動版本就建立了一一對應關系。但是,如果站長把標簽加錯了怎么辦?搜索引擎只抓取了一個版本怎么辦?搜索引擎沒有準確解析<link ref>標簽怎么辦?

而且,要建立一一對應關系,需要PC版本和移動版本主體內容是一樣的。很多時候m.移動版本頁面內容精減或修改過多,搜索引擎認為內容不相符怎么辦?甚至有的時候獨立移動站只建了部分頁面,很多PC頁面沒有對應移動頁面又怎么辦?

網站有兩個版本,用戶在添加書簽、分享鏈接時,不可避免地會有一部分指向PC頁面URL,一部分指向移動URL,鏈接權重將分散。

通常,為了用戶體驗和幫助搜索引擎判斷對應關系,網站需要做符合規則的轉向:

  • PC用戶由于某種原因訪問了移動URL的話,需要被自動301轉向到PC版本URL
  • 移動用戶由于某種原因訪問了PC頁面URL的話,需要被自動301轉向到移動URL

301轉向一般是服務器端做的,首先就需要根據瀏覽器用戶代理匹配特征字符串判斷用戶設備和瀏覽器類型,上網設備和瀏覽器五花八門,程序100%檢測正確不是件容易的事。判斷出錯,用戶可能就只能看到一個排版錯誤的頁面,甚至某些功能都無法使用。搜索引擎蜘蛛也可能被判斷錯,導致不能建立兩個版本的對應關系。

大公司需要用子域名做多語言網站SEO的話,加上m.獨立移動站,就會使管理子域名更加復雜,因為網站又要增加:

  • sg.seozac.com
  • m.sg.seozac.com
  • cn.seozac.com
  • m.cn.seozac.com

等等。多語言hreflang標簽和獨立移動站的<link ref>標簽排列組合起來,哪個對應哪個不能弄錯了。如果再加上Google AMP百度MIP頁面版本,所有版本之間的對應關系和標簽寫法,可能會把人繞暈倒。

動態服務

動態服務和獨立移動站一樣,首先在服務器端判斷設備和瀏覽器類型,然后在同樣的URL上、根據瀏覽器屏幕寬度返回不同的HTML和CSS代碼。

所以動態服務方法相當于把響應式設計和獨立移動站的優點結合起來了,即有URL統一的簡潔明了,又有獨立移動站的代碼優化,SEO效果是最好的。當然,代價是前后端成本都要提高。

對不差錢的公司來說,動態內容是最佳選擇,比如amazon現在就是用動態服務做移動優化的,URL統一簡單,不會出錯,兩個版本的代碼還可以分別優化,據說,亞馬遜移動版本節省了40%的文件下載量,對手機用戶來說,頁面打開速度的提升是至關重要的 。

是否使用動態服務要看公司情況。對大部分網站來說,頁面內容、排版、功能沒那么復雜,響應式設計已經滿足需要,用高成本實現動態服務,節省的下載量沒那么明顯,比如SEO每天一貼這種博客,還有大量內容型網站,頁面連個圖片都沒有,除了留言也沒有別的交互,那是一點下載都節省不了,動態服務就沒意義了。

搜索引擎蜘蛛訪問動態服務的頁面時,從HTML代碼是無法自動知道不同瀏覽器得到的代碼將會是不同的。比如PC蜘蛛訪問時,得到的是PC版代碼,但蜘蛛并不必然知道移動蜘蛛來訪問的話會得到不同的代碼,所以服務器端需要通過Vary HTTP頭信息告訴搜索引擎蜘蛛,PC蜘蛛和移動蜘蛛得到的代碼是不一樣的,兩個蜘蛛都要來訪問一下。比如amazon.com頁面的服務器頭信息:

< Content-Type: text/html

< Content-Length: 6400

< Connection: keep-alive

< Server: Server

< Date: Sat, 27 Jul 2019 16:42:45 GMT

< Vary: Content-Type,Host,Cookie,Accept-Encoding,X-Amzn-CDN-Cache,X-Amzn-AX-Treatment,User-Agent

< Edge-Control: no-store

< x-amz-rid: KH589YRZC8QEW3QEWGKD

< X-Cache: Error from cloudfront

< Via: 1.1 1b52a5dd431f9e3c81753e61dfdf467a.cloudfront.net (CloudFront)

< X-Amz-Cf-Pop: SFO9

< X-Amz-Cf-Id: 0qtVw99a2_AustEZ-dxC_cs9hfVzyll-DmHnmWFDtBSWKtinpxhB2Q==

其中Vary那行就是通知瀏覽器/蜘蛛,根據后面列的情況不同,HTML代碼是不同的,Vary: User-Agent指的就是根據瀏覽器用戶代理的不同,HTML代碼是不同的。

對獨立移動站的執念來自何處

很多公司和站長對獨立移動站情有獨鐘,認為m.移動站SEO效果是最好的,做新網站還要做獨立m.站。這個執念可能來自兩方面。

一是以前百度更建議獨立移動站,我在2015年廈門百度之夜的帖子中說明過這一點。但現在4年過去了,百度現在的正式官方態度我沒有看到,但兩年前百度搜索主任架構師譚待明確跟我說過,百度也認為響應式設計是未來趨勢,百度也推薦轉向響應式設計。我的觀察是,百度現在對響應式設計的支持沒有問題。

Google一直以來就是推薦響應式設計的。

當然,這里說的推薦,并不是說響應式比獨立移動站的SEO效果更好,而只是表明,百度和Google對三種方法是一視同仁的,排名上并不偏向哪一個,SEO效果是一樣的。既然效果一樣,當然推薦那個簡單便宜的了。

第二個原因,就如開頭讀者說的,目前在百度移動搜索排名靠前的m站較多。這是個準確的觀察,確實百度移動搜索結果中排名好的m站很多,在不少行業,m.站排在前面的占大部分。不過,這并不必然說明m.獨立移動站有SEO優勢,我覺得這更多是采樣偏差造成的。

舉個例子,數據表明,車禍發生大部分是男性司機造成的,不過這是否說明男司機開車有劣勢呢?恐怕不能這么認為,因為必須考慮路上司機的男女比例,很可能開車的80%是男的,造成了70%的車禍,所以70%車禍是男司機造成,不能說明男司機開車水平比女司機差。

移動搜索排名也是同樣道理。現在排名靠前的m.站居多,很可能這些站絕大部分是老站(所以才排名能力高嘛),而幾乎所有老站當初開始做移動SEO時都是從m站入手的,不到萬不得已,這些使用m站的老站不會去改為響應式設計,因為改動太大了,冒險,又沒有明顯好處(如前所說,三種方式SEO效果一樣的),沒有動力改。

所以,老站、大站排名好,而老站、大站又以m站為主,所以我們就看見m站排名好了。但這不說明一個新站就要學著做m站啊。

作者: Zac@SEO每天一貼
版權屬于: 中新虛擬主機
版權所有。轉載時必須以鏈接形式注明作者和原始出處及本聲明。

78 條評論 “移動端網站SEO優化該怎樣做?

    1. 個人推薦自適應設計,簡單方便。博客系統套一個自適應模板即可,多簡單啊!還非要搞個獨立站點干嘛?完全沒有必要的。在說了你搞個獨立站點話,那么就是相當于是個新站了,外鏈和權重都要從零開始。

  1. 個人推薦自適應設計,簡單方便。博客系統套一個自適應模板即可,多簡單啊!還非要搞個獨立站點干嘛?完全沒有必要的。在說了你搞個獨立站點話,那么就是相當于是個新站了,外鏈和權重都要從零開始。

  2. 受益匪淺
    一直蹲守這,坐等大佬更新
    看了之前的帖子
    學到PC端和移動端的優化有不少相同的優化操作
    想學學移動端相對PC端有哪些不一樣的操作
    求翻牌子~-~

  3. 隨著時間的推移我也覺得單獨做一個手機站真是浪費時間,以前1是百度推薦做一個m的站點,2是開發一個響應式的還是比較費勁,尤其是我這種通過源代碼改過(當時源代碼就沒有手機站版本),且我是個人站長,綜合比較開發一個m的站點比改成一個響應式的站點更費錢,所以就單獨做了一個m站點。

    現在覺得做一個自適應的響應式站點就行,從長遠的成本考慮還是響應式省錢,維護簡單,且seo成本最低,權重會更集中,永遠不用考慮你發外鏈或者給用戶分享的時候,他使用的是什么設備。

    對于老站現在大家都不考慮做響應式的,一個最主要原因我認為m站點已經有權重,百度已經可以很好的認知哪個是移動站哪個是pc站,何必要在掏錢開發,大家對網址的記憶越來越淡薄,無所謂了。

  4. 這里貼一段谷歌站長官方博客5月份發的文章關于獨立移動端還是響應網站好的句子:
    While we continue to support responsive web design, dynamic serving, and separate mobile URLs for mobile websites, we recommend responsive web design for new websites. Because of issues and confusion we’ve seen from separate mobile URLs over the years, both from search engines and users, we recommend using a single URL for both desktop and mobile websites.
    大體意思就是說我們支持響應式網站,動態網站還有m獨立網站,但是我們推薦使用響應式設計網站,因為過去幾年我們發現m獨立站點存在很多問題和疑惑,我們推薦移動端和PC端使用一個URL。

    我個人認為使用一套代碼,一個URL方便蜘蛛判斷和抓取,而且還能節省物力人力。

  5. 我們公司不一樣,以前的老站點都是用的域名下面的目錄,/4g/作為移動端,檢測到手機端打開,自動跳轉到4g目錄,內頁技術問題做不到,基本只有首頁收錄,后來用了響應式后,發現還是有問題,百度轉碼太厲害,很多頁面圖片讀取不到,因為用到很多js效果,就很糾結了。

    1. 不一定,和網站大小關系不大,是看網站功能、復雜程度,純信息類網站,用動態加載沒什么意義,因為很可能和響應式的代碼沒什么大區別。

  6. 我也是用的WP的自適應網站,但是主站點電腦端在Google page speed評分有80分以上,移動端的速度就只有30多分了。要怎么來提高移動端的加載速度?

    1. 你理解錯誤,這個響應式的也不是說手機瀏覽看起來就不好,而是自適應的,排版上都有不一樣,符合用戶體驗的效果,唯一區別是用來一套代碼,而獨立的是兩套代碼

    2. 字體或欄目適合手機瀏覽,和是不是在獨立子域名上沒有任何關系,自適應也是根據你的設計排版的,你設計什么樣就是什么樣,可以和獨立子域名設計的一模一樣。

  7. 個人站建那么多根本管理不過來,響應式模板維護成本更低,跟大站硬剛怎么都剛不過,只能吃剩飯

    1. 從長遠看很好,如果對站點的未來不明朗不知道要做多久,也可能效果不好就放棄了的話,那建立獨立站點,是唯一首選考慮,這個早期成本會很便宜(相比較而言)

  8. 慘…..早點看到我開發自己網站就用那個動態服務模式了,現在是用的獨立移動站,,,,另外獨立移動站感覺不能用301或是302在兩種設備間跳轉,我本來是302跳轉,谷歌收錄出現了PC域名收錄的是移動頁面的情況,鏈接是pc的,內容是移動端的,現在已經換成了js跳轉了,不知道會不會有問題。

  9. 很棒,總結的太好了,響應式,M站,動態服務我都用過,目前我的網站用的是動態服務,一套鏈接,兩個網頁版本,PC返回PC版本,移動返回移動版本,經過測試,在百度上和其他方式沒太大區別,但在搜狗和神馬上,動態服務和響應式的排名明顯比M站更好,當然,這只是幾個網站的數據,并不能就此說明全網,就好比文中說的一樣,注意樣本偏差。

  10. 移動端站點的優化除了上面說的站點形式會影響排名外,其他那些方面對移動站點的排名影響更大,和pc端的優化有那些差異化操作那注意呢~~

  11. 響應式設計,由于用了太多框架的代碼,那么移動端查看的時候代碼量跟PC端一樣了,這樣是不是不利于移動端的SEO?

  12. 本來是自適應網站,現在谷歌又提倡AMP頁面的移動端優化,那我自適應網站是不是有點雞肋?

    1. 這個我可以回答, 谷歌AMP 其實是谷歌緩存的站點, 所以加載速度非常非常快, 不過用戶體驗一般。 不過AMP頁面有鏈接到原頁面, 這個時候就需要自適應了, 例如用戶被這個頁面的內容吸引,想看更多內容的時候。

留個言唄:

您的郵箱不會被顯示在頁面上。標有*的是必填項。