跳转、代码适配与自适应三种移动适配的实现

萌萌哒的小狐狸欢迎你的观看嘻嘻!
一、跳转适配
1、提交适配关系,生效最快的方法。在百度站长平台的“移动适配”工具中提交适配关系,站长平台支持规则适配与URL适配。对于移动端与PC端有对应关系的,可以使用规则适配,如果较难用正则表达式表达两者URL的对应关系,可用URL适配。详情请见百度站长工具。
2、meta标注,生效也比较快的方式。在页面head中增加一行meta标注,告知百度当前页面对应的移动版页面的URL是什么以及采用的什么语言。如下:
<meta name="mobile-agent"content="format=[wml|xhtml|html5];url=url">
Format是告诉网页使用什么语言,目前常使用的是html5,如果多个版本的网页,可以使用多行。
3、自主适配,生效最慢的方法。使用301或者302跳转,不要使用JS判断用户的UA再调转。由于客户端会先加载页面再解析JS,如果使用JS来判断UA,用户在浏览时会很难受。同样蜘蛛需要渲染JS之才能获取信息,也会加大搜索引擎蜘蛛的获取难度。
4、在pc版网页上,添加指向对应移动版网址的特殊链接 rel="alternate" 标记。这有助于发现网站的移动版网页所在的位置。
在移动版网页上,添加指向对应pc版网址的链接 rel="canonical" 标记。
例如,假设pc版网址为http://www.example.com/page-1,且对应的移动版网址为 http://m.example.com/page-1,那么此示例中的注释如下所示:
在pc版网页(http://www.example.com/page-1) 上,添加:
<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.example.com/page-1" >
而在移动版网页(http://m.example.com/page-1) 上,所需的注释应为:
<link rel="canonical"href="http://www.example.com/page-1" >
在pc页面增加代码是告诉pc跳过来是移动的,在移动页面加代码是表明移动的对应的是pc,增加代码的识别,便于识别它们是一个页面,便于蜘蛛爬行和检测。
注:加在<head></head>里面。
5、在页面的head中使用meta标签中申明当前页面是PC页面还是移动页。
如果是PC页则使用<meta name="applicable-device" content="pc">
如果是移动页则使用<meta name="applicable-device" content="mobile">
一、代码适配
1、为了使百度能够知道拐页而发生变化时,同时需要用其他UA重新抓取一遍,需要添加Vary HTTP 标头,如:“Vary:Accept-Encoding,User-Agent”。Vary HTTP 标头有以下两个非常重要且实用的作用(引用于百度站长平台)。
(1)它会向 ISP 和其他位置使用的缓存服务器表明:在决定是否通过缓存来提供网页时它们应考虑用户代理.如果没有使用Vary HTTP 标头,缓存可能会错误地向移动设备用户提供 PC 版 HTML 网页的缓存(反之亦然)。
(2)它有助于百度 Spider 更快速地发现针对移动设备进行优化的内容,这是因为百度在抓取针对移动内容进行过优化的网址时,会将有效的Vary HTTP标头作为抓取信号之一,百度会提高用其他 UA 抓取此网页的优先级
2、在给用户返回的代码中使用 meta 标注所返回的代码为 PC 版还是移动版。
在pc的相应的head中添加:
<meta name="applicable-device" content="pc">
在移动的相应的head中添加:
<meta name="applicable-device" content="mobile">
三、自适应
通过同一网址提供相同HTML代码的网站设计方法。该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。
使用自适应,网站的网页会根据你浏览器窗口的大小按照不同的比例来展示,比如说你在pc上打开某一个网页,当你把浏览器窗口缩放,就会根据浏览器的宽度,自动调整网页内容大小,一般代码的情况是HTML一样,css不一样。
自适应设计有其一般原则:在head添加以下代码并且使用<picture>元素处理自适应图片:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
自适应页面还应该在head中标识:
<meta name="applicable-device"content="pc,mobile">

知识共享是最大的快乐,转载请备注来源"小狐狸SEO"成都seo|成都网络推广|百度竞价|新媒体运营—小狐狸seo的文章!