写在前面:
自从手机站出现以来,就有一个问题一直困扰着我。就是像百度、360等这些搜索引擎是怎么判断和辨别出一个页面是PC页面或是移动页面的。也在微博、知乎、豆瓣各种请教。
拼拼凑凑中,一个移动页面所应具备的轮廓就在脑海中形成了,当然,一定不是最全面,也不可能是最权威的,但自认为还是有点指导作用的。
关于搜索引擎辨别移动页面的特征要素,521SEO会从页面类型识别、URL设计、title标签、doctype标签、viewport属性、x-ua-compatible 属性和一些可能增加页面PC属性的一些代码等方面来说:
1、通过meta的applicable-device属性值来判断a.如果是自适应页面,那么加如下代码即可(自适应,就是根据用户设备来渲染不同的页面)。<meta name="applicable-device" content="pc;mobile">
b.如果是PC页面,那么加如下代码即可<meta name="applicable-device" content="pc">
c.如果是移动(M)页面,那么加如下代码即可<meta name="applicable-device" content="mobile">
相信细心的同学,应该已经看出pc和移动页面的区别之处就在于content的值是什么,PC即是PC页面,mobile即是移动页面。
2、URL设计的命名方式含有移动暗示我们从域名和网站栏目路径2个维度来理解:
a.一般情况下,移动站域名的选择侧重于二级域名形式,而不建议使用二级目录的形式,这也是百度官方所指明的。
名称建议含有m./wap./3g./mobi./mobile./mob/wml/例如:推荐的形式m.tuanhuahealth.comwap.521seo.com(仅为举例,暂未启用)不推荐的形式www.521seo.com/m
b.在路径或者css文件命名中含有移动暗示URL、CSS命名中尽量出现/wap,/mobile/这样的命名, 用于提高页面识别为移动的效率和概率。
3、doctype标签中是否含有“移动”词汇doctype标签出现在代码文件的顶部,声明网站的类型。
一般情况下,我们只要查看代码中是否含有以下词汇,即可判断当前页面的类型:openmobilealliancexhtml-mobilexhtml-basicwapforumdtd compact html例如:<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN””http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
4、viewport属性viewport属性,很多同学不太熟悉,viewport属性判断页面是PC页面还是移动页面,重点只要看width。
判断移动与否的关键属性值为width,如果width=device-width这是典型的移动友好的设计,增加判定为移动页面的砝码,如果width有具体值,且值大于典型的移动屏幕(应该小于600),那么该页面被判定为PC页面的几率大大增加。例如:<meta name=“viewport” content=“width=device-width,initial-scale=1.0″>
5、移动页面代码千万不能出现的属性:x-ua-compatible 属性这条结论大家务必要重视起来,小道消息称,这出自百度内部同学口中。该属性是PC意味非常强烈的功能性代码(移动站禁用)。
一般会以下面的面貌示人:<meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” />
6、title标签这点其实很好理解,众所周知,搜索引擎是很重视title标签的,搜索抓取的首要工作就是遍历页面的title内容,所以,在title中出现有“移动”指向的词汇,很明显的高手搜索引擎“我”是什么类型的页面。title中出现有“移动”指向的词汇,包括但不限于以下:“移动版”、“手机版”、“WAP版”、“触屏版”
7、其他增加页面的PC属性的因素出现embed;object;marquee;iframe等accesskey设置;div个数;加载swfobject;含有firefox;设置timer。