移动端网站SEO优化怎样做？-极速云

移动优化的三种方式

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

响应式设计（responsive design）：

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

动态服务（dynamic serving）：

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

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

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

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

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

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

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

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

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

PC用户由于某种原因访问了移动URL的话，需要被自动301转向到PC版本URL
移动用户由于某种原因访问了PC页面URL的话，需要被自动301转向到移动URL

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

大公司需要用子域名做多语言网站SEO的话，加上m.独立移动站，就会使管理子域名更加复杂，因为网站又要增加：

sg.jisujia.com.cn
m.sg.jisujia.com.cn
cn.jisujia.com.cn
m.cn.jisujia.com.cn

等等。多语言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==