发布时间：2020-11-07 00:01:45
随着近年来智能手机的普及，通过移动设备浏览网站的用户越来越多，这使得我们也不得不要重视移动端的流量。（从本人的解梦小站来看，传统手机端的UC搜索已经成为搜索引擎的前几位，特别是早上，流量增长更迅速。）
谷歌也逐渐重视移动版的网站，不仅对移动端使用了专门的爬虫Google-Mobile，而且也对移动版网站的优化进行了说明。这篇文章就是研读了谷歌的《构建针对移动设备进行优化的网站》文章后的一些总结。
移动版网站的三种配置方式
针对移动端的网站一般有3种配置方式：
- 响应性网页设计，即同一网址，相同内容。
不管用户是哪种设备，PC，手机还是平板电脑，内容层的HTML全都一样，只是通过表现层的CSS来控制不同的表现形式，如在移动端和平板下会控制最大宽度，以适应屏幕显示。
- 同一网址，不同内容。
同一个网址，根据用户使用设备的不同，从而返回不同的内容。这是从服务器端控制，根据用户的身份（User-Agent，用户请求网页时提供给服务器的信息之一）来判断设备，从而提供不同的内容。
- 不同网址，不同内容。
根据设备的不同，网站呈现不同的网址，不同的内容。比如PC端为www.example.com，智能手机端为m.example.com，传统手机端为wap.example.com。通常情况下还会同时设置重定向，比如用智能手机访问www.example.com，会自动跳转到m.example.com上。
使用rel="canonical"和rel="alternate"
如使用上面第三种方式，不同的URL返回基本同样的内容，就会出现内容重复的问题，例如www.example.com/arti123.html和m.example.com/arti123.html。那怎么解决呢？rel="canonical"和rel="alternate"标签很好的解决了这个问题。
rel="canonical"和rel="alternate"是一种专门针对搜索引擎的建议，指明重复页面中的标准页面（目前谷歌，bing，百度都声明支持这个标签）。比如页面A和页面B2个相似页面，页面A是标准页面，页面B是替补页面，则页面B需要加上rel="canonical"标签，表明标准页面为A；而页面A则加上"rel="alternate"标签，说明还有个替补页面B。如：
页面A上：<link ref="alternate" href=http://www.kjdsnews.com/a/"www.example.com/B">
页面B上：<link ref="canonical" href=http://www.kjdsnews.com/a/"www.example.com/A">
桌面版网页和移动版网页跟上面的问题极其相似，通常桌面版网页为标准页面，而移动版网页为替补页面。则2类页面上可添加如下标签：
桌面版网页：<link ref="alternate" href=http://www.kjdsnews.com/a/"m.example.com/">
移动版网页：<link ref="canonical" href=http://www.kjdsnews.com/a/"www.example.com/">
另外，rel="alternate"标签还可用于站点地图中，如桌面版网页的站点地图中的代码：
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns=" xmlns:xhtml=" >><url><loc></loc><xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href=http://www.kjdsnews.com/a/" />
关键词：谷歌
