主页 > 教程合集 > SEO优化 >

自适应站点的seo优化配置

时间:2015-11-01 阅读:0

百度公开鼓励站长们多用HTML5技术做PC站与移动站,而HTML5设计的网站的一个优点就是实现自适应特别方便,它能识别终端设备屏幕的大小从而对输出的内容做出响应调整。众所周知,现在的终端屏幕尺寸分类太多,各种移动设备也层出不穷,这个技术就完美解决了在不同的终端设备上呈现相同的网页效果。

自适应网站的用户体验很好,也很利于优化,但是对于一些基本的配置,不少站长都不是很清楚,余斗今天总结几点:

1、阻止移动浏览器重构页面大小

大部分的终端浏览器都会在载入页面的时候自动调整大小,如果不加以设置,会导致布局错误,现在主流的ios和安卓浏览器都是基于 webkit核心,都支持 viewport meta元素覆盖默认的画布缩放设置,只需在HTML的标签中插入一个标签:

<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

代码表示是将一个页面放到设备实际尺寸两倍显示。

2、更改网页为百分比布局

传统的网页布局都是固定网页宽度,这样的缺点就是当某个浏览窗口处于媒体查询固定的范围之外时,网页就以水平滚动才可以完整浏览。

自适应站点的seo优化配置

自适应网站要避免这个缺点必须要以百分比布局来构架页面。在样式表中不要以 width:xxx px;而是指定一个百分比宽度:width:xx%;或者直接就是width:auto;比如我们定义的head页面宽度为940px,页面整个宽度为960px,那么我们在css中写head的宽度时应为:

#header {
            margin-right: 10px;
            margin-left: 10px;
            width: 97.916667% /* 940 ÷ 960 */
                }

这里有一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

3、用em替换px

类似与第二条,我么在文字像素的定义时也要采用相对单位em,公式为 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度,例如现在浏览器默认的文字为16像素,我们在body的全局定义中先写好样式:

body{
      font-size: 100%;
      font-size:16px;
      font-size: 1em;
      }

我们在标题的文字用的是48像素,那么就要写样式为:

#title{
      display: block;
      padding-top: 75px;
      color: #0d0c0c;
      font-family:Arial;
      font-size:3em /* 48 ÷ 16 */
}

4、流动布局的使用

流动布局可以实现每个区块都为浮动,不为固定不变,这样就避免宽度不够时,后面的块元素在水平方向溢出,而是自动滚动到前一个元素的下方。代码为;

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

5、 Media Query技术的使用

Media Query技术的最大好处可以根据获取到的设备宽度加载不同的css样式,比如,设置屏幕宽度不超过480px时加载one.css:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="one.css"/>

同样可以创建多个样式表,以适应不同设备或者不同分辨率的宽度范围,而余斗推荐的更好的做法是将多个Media Query整合在一个样式表文件中,具体代码为:

@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
      /* Styles */
}
    @media screen and (min-width: 600px) {
.hereIsMyClass {
    width: 30%;
    float: right;
}

上面的代码中定义的样式类只有在浏览器屏幕宽度超过600px时才会有效。

如果我们希望 Media Query作用于特定的设备,而忽略设备上运行的浏览器因为没有最大化的原因而与设备屏幕不一致,可以使用 max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

6、响应时图片设计

因为屏幕的尺寸不同,在加载图片的时候也要根据不同的尺寸进行缩放,同理设置 max-width属性:

img { max-width: 100%;}

IE7之前的版本不支持 max-width,要写成:

img { width: 100%; }

另外,Windows平台缩放图片会出现失真,要在css中写入:

img { -ms-interpolation-mode: bicubic; }

当然,余斗还是最推荐根据不同的尺寸加载不同分辨率的图片,这样虽然要做不少图片,但是用户体验很好。

7、 applicable-device标注

余斗在前面讲过代码适配移动站点时的注意事项时说过applicable-device标注的注意事项,而告知搜索引擎网页为自适应网站的meta标注代码为:

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

8、 mobile type标记

在使用百度站长平台工具提交sitemap时,我们还要做好mobile type标记,主要代码有以下几种,大家根据自己的网站选取:

<mobile:mobile type="pc,mobile"/><!-- 自适应网页 -->
<mobile:mobile/> <!--移动网页 -->
<mobile:mobile type="mobile"/><!--移动网页 -->
<mobile:mobile type="htmladapt"/><!-- 代码适配 -->

无该mobile type标记 标签表示为PC网页。

以上8点主要是自适应网站在seo优化的过程中需要注意的事情,优化是个细节工作,我么在每个地方都做到细致入微,积累多了就会把优化做到极致,大家如果还有什么不懂的,可以留言余斗。

开通特权,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> 特权详情 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在SEO优化分类下,2015-11-01最后更新,转载注明出处。

相关推荐

返回顶部