长沙网站seo:浅谈SEO优化技巧之HTML结构调整

SEO知识 战车网 来源:flagwind.com 25浏览 0评论

这段时间看过很多关于SEO优化的文章,发现大部分讲的都是运营阶段的知识,比如外链、文章内链、PR提升以及针对特定搜索引擎优化的一些经验之谈。这类文章实在是太多太多了,看多了就感觉千篇一律,毫无新鲜感,今天我就说点新鲜的,主要谈谈SEO优化中关于HTML排版的一些技巧,笔者是程序员出生,所以写的东西稍微偏技术性一些,希望大家能够多多谅解。

很多网站首页都有一个热点图模块,以幻灯片形式进行切换(见下图)

此模块占据国内网站的70%,包括笔者的网站也用到了,而这种效果的代码往往都是在HTML文档结构的前面部分,最常见的也就是导航栏的下面,实现方式无非就是FLASH或者JS脚本,最常用的布局代码如下:

 <div class="banner">
    <object>
        FLASH版本
    </object>
 </div>
 <div class="banner">
    <script type="text/javascript">
        Javascript版本
    </script>
 </div>

笔者认为如果在HTML前面部分插入了上面的代码,不仅对SEO优化不利,对普通用户来讲也是很郁闷的事情,对SEO不利的地方在于:站长朋友们都知道,一个HTML文档的前面部分是搜索引擎比较看重的地方,如果您使用JS或者FLASH去实现,虽然这些代码搜索引擎识别不了,但完全可以把其他重要的地方先展示出来给搜索引擎,这些识别不了的东西靠后显示。对普通用户不好的地方在于:此效果一般是4~5张图片进行切换,而这些图加起来最少都有200KB左右,无论您使用JS或者FLASH实现,只要您是嵌入在HTML文档里面,用户必须等待这些东西加载完成,特别是图片大的时候,很有可能卡住在头部那一块,造成浏览器假死现象,这一点对用户来说是最恐惧的事情。

这段时间笔者总结了一些解决方案,并通长时间的观察,实践证明这些方案是OK的,排名也没影响,收录正常,在此斗胆分享给大家。

一、结构顺序调整

按照以往的排版布局经验,我们的代码应该是这样子的:

HTML代码:

 <body>
    <div class="container">
        <div class="header">头部内容</div>
        <div class="banner">幻灯片效果模块</div>
        <div class="content">正文内容</div>
        <div class="copyright">版权部分</div>
    </div>
 </body>

CSS代码:

 body {margin:0;padding:0;text-align:center;}
 .container {width:980px;margin:0 auto;position:relative;background:silver;}
 .header {height:200px;line-height:200px;background:red;}
 .banner {height:150px;line-height:150px;background:yellow;}
 .content {height:400px;line-height:400px;background:blue;}
 .copyright {height:50px;line-height:50px;background:green;}

笔者改良过的代码如下:

HTML代码:

 <body>
    <div class="container">
        <div class="header">头部内容</div>
        <div class="content">正文内容</div>
        <div class="copyright">版权部分</div>
        <div class="banner">幻灯片效果模块</div>
    </div>
 </body>

CSS代码:

 body {margin:0;padding:0;text-align:center;}
 .container {width:980px;margin:0 auto;position:relative;background:silver;}
 .header {height:200px;line-height:200px;background:red;}
 .banner {position:absolute;top:200px;width:980px;height:150px;line-height:150px;background:yellow;}
 .content {margin-top:150px;height:400px;line-height:400px;background:blue;}
 .copyright {height:50px;line-height:50px;background:green;}

通过以上代码的对比分析,其实我用的就是CSS里面的Position浮动布局这个技巧,关于Position浮动布局的知识,大家可以查找相关资料,务必要掌握好这个知识点,对SEO优化很有用的。

二、巧用延时加载

HTML代码:

 <body>
    <div class="container">
        <div class="header">头部内容</div>
        <div class="content">正文内容</div>
        <div class="copyright">版权部分</div>
        <div class="banner"></div>
    </div>
 </body>

Jquery代码:

$(document).ready(function() {
    window.setTimeout(function() {
        FLASH 版本
        $(".banner").html("<object>这里是FLASH代码插入的地方</object>")

        AJAX 版本
        $.get("http://www.flagwind.com/GetBanner.html", function(data){
                $(".banner").html(data);
        });
    }, 3000);
});

这段Jquery代码的大概意思是,文档加载完成后,过3秒钟,执行AJAX请求,或者一些别的东西,去控制banner这个DIV里面的内容。

上面两个方案的代码只是一些抛砖引玉的例子,您完全可以把它用他其他地方,把一些对SEO无关的内容靠后加载,或者用JS延迟加载去显示,这样对搜索引擎来说并无大碍,对普通用户来说也是一件很好的事情。本文由深圳网站建设旗风网络 www.flagwind.com 原创,转发的时候请不要删除原作者版权信息,谢谢!

转载请注明:战车网 » 长沙网站seo:浅谈SEO优化技巧之HTML结构调整

猜你喜欢

惠州seo顾问:SEO诊断方案及执行方案应从哪几方面分析

今天和大家一起讨论一下SEO诊断方案以及SEO执行方案要怎么写,主要从哪些方面进行呢,做SEO的朋友们一直在探讨研究高效的提高关键词排名,高效提升网站流量、高效提升SEO对网络营销辅助程度,所谓实践出真知,三思而后行。做SEO切忌盲人摸象,有思路有方...

博客营销:网站SEO排名必须做的三个步骤

现在做SEO的人都在向搜索引擎前十页而努力,想用自己的网站把别人的网站挤到自己的后面去,所以为了这个目的大家都在努力的工作,但是在努力没有方法想把别人的网站挤在你之下是难上加难啊,所以做SEO要寻找方法,如果找到了方法你就会如鱼得水一般在SEO的世界...

杭州百度推广公司:SEO选择中庸平稳还是颠覆式的破坏

周鸿祎在最近 《IT时代周刊》中的一篇文章中谈到关于创业相关的两个概念,一个是颠覆式创新,一个是微创新,他提到前者是道,后者是术。SEO做为草根创业的一个非常重要的工具,这里谈创业这个问题,我就不由得想到SEO中的道与术,道通常说的是道理,规律等形而...

avatar
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址