很多朋友意识中,建了一个PC网站、一个手机网站,在百度站长平台、360站长平台等搜索引擎资源平台上提交了移动适配规则,就大功告成了,就已经完成了网站的移动适配了。事实上是如此吗?博主觉得,这最多只算完成了一半。
网站的移动适配(一):用户访问的全屏全网全端适配
举例说明:
PC网站首页:www.raoyu.net
手机网站首页:m.raoyu.net
如果用户用手机访问www.raoyu.net,你在站长平台提交的移动适配规则能帮助用户跳转到手机端网站首页吗?显然不能。
这个时候需要你在网页代码里进行自动识别并适配。
博主用得比较多的适配方法是UA判断,然后进行前端适配。
如果用户是PC设备,则直接显示www.raoyu.net的页面(无论用户输入或访问的页面是www.raoyu.net还是m.raoyu.net);
如果用户是移动设备,则直接显示m.raoyu.net的页面(无论用户输入或访问的页面是www.raoyu.net还是m.raoyu.net)。
目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配、代码适配和自适应,以下为这三种配置方式的名词解释及异同对比。
1,跳转适配:该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua,然后使用 HTTP 重定向和 Vary HTTP 标头重定向到相应的页面。
2,代码适配:该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的 HTML。
3,自适应:通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。
适配方式 | PC、移动网址是否一致 | PC、移动网页代码是否一致 |
跳转适配 | 否 | 否 |
代码适配 | 是 | 否 |
自适应 | 是 | 是 |
网站的移动适配(二):基础代码优化
博主常用的一些代码:
告诉搜索引擎这是一个PC网站:<meta name="applicable-device" content="pc">
告诉搜索引擎这是一个移动端网站:<meta name="applicable-device" content="mobile">
告诉搜索引擎当前网页的唯一网址:<link rel="canonical" href="https://www.raoyu.net" >【在百度最新的适配法则里,这行代码已经充当着移动适配的重要角色职能】
告诉搜索引擎这是一个主要服务湖北武汉地域用户的网站站点:<meta name="location" content="province=湖北;city=武汉">【province为省份简称,city为城市简称,本行代码还可以使用coord。关于location标签,百度官方有一个页面解释得比较详细:https://ziyuan.baidu.com/college/articleinfo?id=10 】使用这个代码对地域关键词的排名还是有一定助推作用的。
至于其它细节的优化,如MIP、网站速度、UE设计及优化等,都是大家熟知的领域,以后有时间再单独赘述。
http://www.jnxfx.com
http://www.jnxfx.com