为了移动端页面展示效果和用户体验很多站长会选择将移动端和PC端分离开来单独做然后通过js等方式来自适配(当用户使用移动设备访问PC端网页时自动将网页跳转到对应的移动端页面)。
这时为了提升搜索用户在移动搜索的检索体验给对应PC页面的手机页面在搜索结果处有更多的展现机会就需要做移动适配。
二、移动适配规则适配说明1、正则表达式格式
a)确定是纯数字:([0-9]+) 或(d+)。
b)确定是纯字母:([a-zA-Z]+)包括字母大小写的情况。
c)确定是数字和字母混合串:
方法一、((?:[a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z]+)[a-zA-Z0-9]+);
方法二、([a-zA-Z0-9]+);
说明:两种混合串的区别:较长的一种为严格的数字和字母混排形式且数字和字母交替至少出现1次;较短的一种可支持纯数字纯字母和数字字母混排。
d)确定有中文字符:((?:%[a-zA-Z-0-9]{2,})+)。
e)确定有参数值:([^&]+)。
f)确定有“-”或“_”连接字符串的替换规则:将连接的各个部分分别用对应的规则替换。如:a.com/ab-cd得到的规则则为:a.com/(d+)-(d+)
2、以站点适配到站点m.a.com为例来说明:
适配PC链接地址为:
适配移动链接地址为:m.a.com/12/aBc/ab12c.html
步骤一:确定适配链接中的可替换参数或者路径得到其位置序号和类型。
根据网站自身url的层次结构其中12,aBc,aBc为动态可替换的路径。12为纯数字aBc为纯字母ab12c为数字字母混合。
步骤二:根据可替换参数或路径的类型得到链接的表达形式。
使用上面所说的正则表达式格式12为纯数字则为([0-9]+) 或(d+)aBc为纯字母则为([a-zA-Z]+)ab12c为数字字母混合则表示为([a-zA-Z0-9]+);
步骤三:根据移动链接以及可替换参数在步骤一中的位置序号依次用${1}${2}…${n}表示替换掉适配PC链接中的可替换参数或路径得到适配后的移动链接的pattern形式。
最后我们得到的适配规则为:
([0-9]+)/([a-zA-Z]+)/([a-zA-Z0-9]+).html
m.a.com/ ${1}/${2}/${3}.html
三、网站meta标签声明在做移动适配之前建议:
1. 网站自己做好PC和移动网页的自适配当用户在移动设备访问PC网页时自动适配到移动网页。
2. 网站可在PC版网页标注meta声明格式如下:
站长后台提交适配后在网站的头部标签也就是标签内添加声明。meta标签声明代码如下:
<!-- PC端页面 -->
<meta name="applicable-device" content="PC"> //声明设备为PC
<meta name="mobile-agent" content="format=html5;url=对应的移动端URL"> //声明移动端页面类型及地址主要针对神马搜索
<link rel="alternate" media="only screen and(max-width:640px)" href="对应的移动端URL"> //助于搜索引擎发现网站的移动版网页所在的位置
<!-- 移动端页面 -->
<meta name="applicable-device" content="mobile"> //声明设备为移动
<link rel="canonical" href="对应的PC端URL"> //统一网页指向对应的PC端页面如果主要做移动端可不加
注:meta标签内的内容请各自对应网站的URLPC端页面的meta标签内容的URL对应移动页面而移动页面里的meta标签对应PC页面。
四、百度移动适配1、梳理页面结构