移動端網站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.seozac.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=”/”>

在搜索引擎两个版本都抓取了、并且正确判断的情况下,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%的文件下载量,对手机用户来说,页面打开速度的提升是至关重要的 。

是否使用動態服務要看公司情况。对大部分网站来说,页面内容、排版、功能没那么复杂,響應式設計已经满足需要,用高成本实现動態服務,节省的下载量没那么明显,比如抢庄斗牛这种博客,还有大量内容型网站,页面连个图片都没有,除了留言也没有别的交互,那是一点下载都节省不了,動態服務就没意义了。

搜索引擎蜘蛛访问動態服務的页面时,从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@抢庄斗牛
版權屬于: 中新虛擬主機
版權所有。轉載時必須以鏈接形式注明作者和原始出處及本聲明。

72 条评论 “移動端網站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頁面的移動端優化,那我自適應網站是不是有點雞肋?

留個言呗:

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