自适应网站设计对百度友好的关键：添加applicable-device标签(转)

时间 2019-11-13

标签自适应网站设计百度友好关键添加 applicable device 标签栏目 CSS 繁體版

原文原文链接

如今不少网站都使用了自适应网页设计（Response-Web-Design），以知足庞大的移动端用户群的须要。可是在技术上设计了自适应的网页以后，出于SEO的考虑，你还要照顾到如何对百度更友好，即告诉百度“我是自适应页面”，方便百度进行识别校验。css

自适应网页设计html

浏览器对自适应识别校验代码编程

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

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

这个meta，user-scalable=yes 是声明网页能够缩小放大。网络

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

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

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

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

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

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

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

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

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

不是全部网站都适合自适应设计

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

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

对于已经比较成熟PC网站来讲，若是要实现全站的自适应，有可能须要推掉原来全部的代码进行重构，时间和技术成本都比较大，并且若是一个网站有多个portal（入口），会大大增长架构设计的复杂度，因此如今有不少网站只在移动端实现了响应式布局设计。

一天完成把PC网站改成自适应！原来这么简单！

网站自适应，不少人都认为是很高级须要不少时间去实现的东西，不肯意去把一个现成的网站改为自适应，宁愿单独另外作一个移动站。我以前以为实现网站自适应，要设计不少套CSS，而且要结合jQuery，来实现自适应不一样的设备。我还觉得要从新设计文章的图片，或者要用到JavaScript来控制图片尺寸，由于图片过大就会超出手机屏幕，而这个工做量是很是可怕的。种种顾虑使我一直不敢着手开刀，形成至今网站还只是一个PC版，而也没有多作一个移动版。

常常在群里看到你们都说移动流量怎么多怎么多，有的还说移动流量大大超过了PC流量，说移动流量的广告点击率也比PC流量高，潜移默化的做用，我也慢慢受到了感染，因而决定把网站改为自适应！

我为何是把网站改成自适应，而不是改成一个单独的移动站？由于我想一劳百逸，不想同时维护PC站和移动站，这将为往后更新文章节省大量的时间。

因为是第一次接触，没有实际经验，因此须要边找资料看案例边修改代码。

令我感到很是意外的是，我居然仅需一天时间就完成了修改工做！

先看看个人修改为果吧

PC版网页

手机版网页

此手机版效果图显示的内容比较少，事实上，手机版网页中，在文章结尾也显示Google广告，文章结尾还有用户留言，用户照样能够在手机上评论，此外，“扩展阅读”后面还显示了PC版中的侧栏几个栏目的文章列表，最后，在页尾的搜索框着色层上方投放了百度移动的自适应广告。

网站改成自适应有多简单？

下面就说说如何把网页改成自适应吧，我为何说很简单？由于你不须要任何高深的网页设计技术，你只须要懂一点html、一点css，而修改耗时对于一张普通网页来讲，确实只需几个小时。

我把整个改动过程分为两个步骤。

第一步，很是简单，把以下代码直接复制到<head></head>里面。

<meta http-equiv="Cache-Control" content="no-transform" /> 
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

前面两个meta，no-siteapp和no-transform，是告诉搜索引擎不要把网页转码。第三个meta，声明网页能够缩小放大。

第二步，在<head></head>里加上以下css代码。

<style type="text/css"> 
@media(max-width:960px)
{
  
}
</style>

这段css代码，意思是在屏幕宽度小于960px的时候执行的样式，固然你能够把960px改成其余更小的宽度，例如760px。

接下来，咱们要作的就是把那些不须要在手机网页上显示的内容隐藏掉。如何隐藏？这就须要看懂网页的html代码了，须要分析每个模块使用的div，例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div，而后，咱们就使用css隐藏不用显示的div，代码很简单，就是display:none。

举例说明，好比网页结构以下图所示：

网页结构图

手机网页只需显示正文，咱们把其余部分所有隐藏，代码以下：

<style type="text/css"> 
@media(max-width:960px)
{
     /* 网页全屏显示 */
    body {width:100%;} 

    /* 正文全屏显示 */
    #divMain{width:100%} 

    /* 为了不正文图片超出屏幕宽度 */
    /* 正文图片宽度最可能是屏幕宽度的90% */
    #divMain img{max-width:90%} 

    /* 隐藏头部、导航、侧栏、页脚 */
    #divHead{display:none}
    #divNav{display:none}
    #divSide{display:none}
    #divBottom{display:none}
}
</style>

这样，当在手机浏览网页时，就只显示正文了。

网页自适应就是这样作的！

看了这个实例，是否是很简单？网页自适应就是这样作的！

不过要把手机网页自适应得有头有尾，你还须要补充编写一些代码，例如编写针对手机网页的头部、导航和页脚的div，编写后默认为隐藏，在手机里再显示。

以下图所示网页结构：

包含手机模块的网页结构

css就能够这样写

<style type="text/css"> 
/* 默认隐藏手机版头部、导航和页脚 */
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
     /* 网页全屏显示 */
    body {width:100%;} 

    /* 正文全屏显示 */
    #divMain{width:100%} 

    /* 为了不正文图片超出屏幕宽度 */
    /* 正文图片宽度最可能是屏幕宽度的90% */
    #divMain img{max-width:90%} 

    /* 隐藏头部、导航、侧栏、页脚 */
    #divHead{display:none}
    #divNav{display:none}
    #divSide{display:none}
    #divBottom{display:none}

    /* 显示手机版头部、导航和页脚 */
    #divHead_mobile{display:block}
    #divNav_mobile{display:block}
    #divBottom_mobile{display:block}
}
</style>

至此，你就能够自适应设计出一个漂亮的手机版页面了。

看完这个实例，是否是以为自适应设计实际上是很是容易的呢？固然了，这只是一个最基本的自适应设计，着重是介绍思路，你能够在此思路的指引下，完成更加复杂的设计。