网站漫谈之移动端优化|【奶爸SEO】

很多时候我们的目光都聚焦到了PC端的网站优化，但现在移动端其实一定程度上已经超越了PC端成为主流的流量来源，这是大多数人所疏忽的一部分，今天趁这个机会和大家讲讲关于移动端优化的一些知识，让大家对于移动端的优化能有一个较为清晰的认识。

移动网站大体上有三种方式可以选择：

响应式设计（responsive design）：

PC站和移动站的URL是完全一样的（不管用什么设备访问都一样），返回给浏览器的HTML代码也是一样的，不同宽度的屏幕排版不同是通过CSS控制的。以前也经常称为自适应设计，就是因为排版是根据屏幕宽度自动适应的。

动态服务（dynamic serving）：

PC站和移动站的URL是完全一样的，这点和响应式设计相同，但动态服务方式返回给浏览器的HTML代码（以及CSS）是不一样的，PC设备得到的HTML代码是PC版，移动设备得到的HTML代码是专门做了移动优化的移动版本。

独立移动站（separate m. site） ：

移动站的URL和PC站是不一样的，通常用单独的子域名，比如PC站是www.naibaseo.com，移动站是m.naibaseo.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.naibaseo.com”>

对应的移动页面需要加下面代码指明PC版本位置：

<link rel=”canonical” href=”https://www.naibaseo.com”>

在搜索引擎两个版本都抓取了、并且正确判断的情况下，PC和移动版本就建立了一一对应关系。但是，如果站长把标签加错了怎么办？搜索引擎只抓取了一个版本怎么办？搜索引擎没有准确解析<link ref>标签怎么办？

而且，要建立一一对应关系，需要PC版本和移动版本主体内容是一样的。很多时候m.移动版本页面内容精减或修改过多，搜索引擎认为内容不相符怎么办？甚至有的时候独立移动站只建了部分页面，很多PC页面没有对应移动页面又怎么办？

网站有两个版本，用户在添加书签、分享链接时，不可避免地会有一部分指向PC页面URL，一部分指向移动URL，链接权重将分散。

通常，为了用户体验和帮助搜索引擎判断对应关系，网站需要做符合规则的转向：

PC用户由于某种原因访问了移动URL的话，需要被自动301转向到PC版本URL，移动用户由于某种原因访问了PC页面URL的话，需要被自动301转向到移动URL301转向一般是服务器端做的，首先就需要根据浏览器用户代理匹配特征字符串判断用户设备和浏览器类型，上网设备和浏览器五花八门，程序100%检测正确不是件容易的事。判断出错，用户可能就只能看到一个排版错误的页面，甚至某些功能都无法使用。搜索引擎蜘蛛也可能被判断错，导致不能建立两个版本的对应关系。

大公司需要用子域名做多语言网站SEO的话，加上m.独立移动站，就会使管理子域名更加复杂，多语言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代码是不同的。

百度现在对响应式设计的支持没有问题,Google一直以来就是推荐响应式设计的。当然，这里说的推荐，并不是说响应式比独立移动站的SEO效果更好，而只是表明，百度和Google对三种方法是一视同仁的，排名上并不偏向哪一个，SEO效果是一样的。既然效果一样，当然推荐那个简单便宜的了。

第二个原因，目前在百度移动搜索排名靠前的m站较多。这是个准确的观察，确实百度移动搜索结果中排名好的m站很多，在不少行业，m.站排在前面的占大部分。不过，这并不必然说明m.独立移动站有SEO优势，我觉得这更多是采样偏差造成的。

举个例子，数据表明，车祸发生大部分是男性司机造成的，不过这是否说明男司机开车有劣势呢？恐怕不能这么认为，因为必须考虑路上司机的男女比例，很可能开车的80%是男的，造成了70%的车祸，所以70%车祸是男司机造成，不能说明男司机开车水平比女司机差。

移动搜索排名也是同样道理。现在排名靠前的m.站居多，很可能这些站绝大部分是老站（所以才排名能力高嘛），而几乎所有老站当初开始做移动SEO时都是从m站入手的，不到万不得已，这些使用m站的老站不会去改为响应式设计，因为改动太大了，冒险，又没有明显好处（如前所说，三种方式SEO效果一样的），没有动力改。

所以，老站、大站排名好，而老站、大站又以m站为主，所以我们就看见m站排名好了。但这不说明一个新站就要学着做m站啊。

本文由奶爸SEO(www.naibaseo.com)收集于网络不代表本站观点，在这条路上你并不孤单，奶爸与你始终相伴