成都网站建设
扫描关注木子网络微信号

扫一扫微信二维码

html5自适应网站meta标签如何优化?

木子网络2017-07-19网站优化

  在响应式网站建设过程中,很多朋友都会忘记用meta标签来告诉浏览器该网站是自适应页面,那么我们在对响应式网站做优化的时候就需要通过meta标签规则来告诉浏览器,该页面是自适应的,通常需要加以下meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  标签释意:

  width设置layout viewport 的宽度,为一个正整数,或字符串"width-device"initial-scale设置页面的初始缩放值,为一个数字,可以带小数minimum-scale允许用户的最小缩放值,为一个数字,可以带小数maximum-scale允许用户的最大缩放值,为一个数字,可以带小数height设置layout viewport 的高度,这个属性对我们并不重要,很少使用user-scalable是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许。

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

<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />

  这两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码,如果没有添加这个meta留恋器就会自动转码,会导致我们网站样式精简。

  自适应网站设计对百度友好的关键

  其实,使用上面两个meta声明,百度就能识别自适应网页了。

  不过,为了对百度更友好,让百度更方便识别校验,我们要再添加一个meta标签。

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

<meta name="applicable-device" content="pc,mobile">

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

  不是所有网站都适合自适应设计

  自适应网页设计(Responsive Web Design)是指可以自动识别终端设备屏幕的大小从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有4个好处:提升用户体验;PC端和移动端SEO保持一致,避免重复内容和出错内容;链接统一。

  而自适应比较明显的缺陷是,开发成本比较高,尤其是要构建包含额外编程的复杂的自适应网站,所需的时间会比较长。如果网站需求较简单,有许多开源模板可供选择。

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

转载请注明:木子网络 » http://www.muziwl.com

文章标签
自适应网站