当前位置:骄阳博客 > SEO优化 > 网站页面适应展现及移动适配方案

网站页面适应展现及移动适配方案

03-17 SEO优化

  随移动端设备的普及,移动web网站成为了前端工程师工作主攻点,诸多的手机厂商,导致每种手机机型、分辨率等手机参数相差很多,同时给前端开发人员增加了工作难度,此时手机端的适配是个不得不解决的问题。

  1.前端页面的自适应

  前端页面自适应,即前端通过css,js技术,根据浏览器屏幕的宽度高度自动调整页面显示方式,在同一套前后端代码的基础上,实现在不同尺寸的屏幕中都能有良好的体验展示.现在很多免费的模板都支持前端自适应了,建议在建站初期就确认好.我个人还是比较推荐这种方式的,虽然前端逻辑重了一点,但是一劳永逸,不存在多个域名和多套代码的情况,维护也更加方便.

  2.服务端的自适应输出页面

  服务端根据请求的User-Agent判断请求是来自PC还是移动端,主流的移动端User-Agent为:“iphone”, “ipod”, “android”, “ios”, “ipad”, “mobile”,如果小写转换的User-Agent能命中上述关键词,即可认为是移动端访问,则返回的页面使用html5模板,否则使用pc的web模板.这种方式的优点是域名只用一个www的,但是模板要维护两套.

  3.移动端和PC端使用独立的域名和模板

  实现方式和第2点类似,不同的是,如果判断是移动端的访问,通过301跳转到m开头的域名去,访问移动网站.这种方式比较麻烦,也是相对让站长头疼的方式,这里重点说明一下这种方式的适配方案

  PC端添加标签:

  <meta name="mobile-agent" content="format=html5; url=对应的移动网页地址" />
  <link rel="alternate" media="only screen and(max-width: 640px)" href="对应的移动网页地址" />

  目的是告诉搜索引擎,当前web页面,所对应的移动页面

  移动端添加标签:

  <link rel="canonical" href="对应的PC网页地址">
  目的是集中权重到web页面,以免让搜索引擎误认为是重复的站点

  百度站长工具添加移动适配

百度移动适配

  在百度站长工具(搜狗也有,其它的没操作过)的数据引入>移动适配 功能中,提交适配规则,规则提交后,需要一段时间给搜索引擎校验(百度为14天),校验通过后搜索展现会调整.

  通过上述操作后,搜索引擎就会根据用户的终端去展现对应的页面,搜索体验就会提高很多,各大搜索引擎也本着从用户体验出发,给予移动端更好的排名.

  郑州SEO小编认为移动流量会随着手机的普遍性和便捷性而不断增多,也终将会成为SEO的最终战场,掌握好移动适配和移动搜索引擎优化技术,必将让流量迎来新的高峰!