为自适应网站添加meta标签增强搜索友好性

  • 4,637 views

自适应网页可以自动识别终端设备屏幕的大小从而做出相应调整,完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有提升用户体验,PC端和移动端保持一致;避免重复内容和出错内容、链接统一。不过为了将强自适应网站对百度等搜索引擎的友好性,还需要为自适应网站添加meta标签增强搜索友好性,即搜索引擎“我是自适应页面”,方便进行识别校验。
为自适应网站添加meta标签增强搜索友好性-王发利SEO博客

1、浏览器对自适应识别校验代码

在自适应网页设计中,我们使用meta标签来告诉浏览器网页的自适应规则。如:

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

这个meta,user-scalable=yes 是声明网页可以缩小放大。
再如:

<!-- 强制让文档与设备的宽度保持1:1 -->

网页宽度默认等于屏幕宽度(width=device-width),初始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2、通用搜索引擎对自适应识别校验代码

这两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。

3、自适应网站对百度友好的meta

其实,使用上面两个meta声明,百度就能识别自适应网页了。不过,为了对百度更友好,让百度更方便识别校验,我们要再添加一个meta标签。

方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:

这个meta标签,表示页面同时适合在移动设备和PC上进行浏览。

  1. <meta name="HandheldFriendly" content="true"/>

HandheldFriendly 标签最早在 AvantGo 浏览用来标示移动内容的,后来变成一个通用的标准用来标示移动站点,但是不知道这个标签的支持情况。

王发利SEO博客说:不是所有网站都适合自适应,如果有成熟PC网站来说,如果要实现全站的自适应应,有可能需要推掉原来所有的代码进行重构,时间和技术成本都比较大,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度,所以现在有很多网站只在移动端实现了响应式布局设计。

weinxin
我的微信
分享SEO优化、SEM营销、新媒体知识,交流营销运营经验,提供网站制作、SEO、竞价托管和公众号代运营服务。
王发利
  • 本文由 发表于 2016 年 9 月 26 日
  • 转载请务必保留本文链接:http://wangfali.com/wzzz/4817.html
网页制作常用代码中的20个功能代码 网站制作

网页制作常用代码中的20个功能代码

好的网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。那么在网站制作过程中有哪些代码功能能使我们的网站更加的个...
dreamweaver网页模板批量制作方法、技巧 网站制作

dreamweaver网页模板批量制作方法、技巧

对于网页模板的出现,可以说在很大程度上节省了美工和程序人员的工作时间,并大幅度提高了工作效率,一个合格的网页模板的确让我们可以有一条更好的路径对待一些低端的客户,能够快速的去完成我们的一些任务,而且这...
新手制作网页必知10大要点 网站制作

新手制作网页必知10大要点

在网站制作时,我们可能会遇到很多的问题,所以网页设计师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识。 所以,今天分享一下新手制作网页必知10大要点,这应该也是每位网页设计师新手都应...
提高网页访问速度的方法和技巧 网站制作

提高网页访问速度的方法和技巧

获得提高网页访问速度的方法和技巧,帮助网页打开速度加快,因为网页的加载速度是评估网站质量一个重要指标,大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: