On the adjustment of HTML structure of SEO optimization techniques

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

This time has seen a lot of SEO optimization articles, found that most of the talk is the operational phase of knowledge, such as the chain, article chain, PR promotion and specific search engine optimization for some experience. There are so many such articles, see more to feel the same, no fresh feeling, today I said something new, mainly talk about SEO optimization of some of the skills of HTML typesetting, the author is a programmer born, so write something a little more technical, I hope we can understand a lot. Many of the home page has a hotspot map module, slide form to switch (see below)

This module occupies 70% of the domestic site, including the author's website also used, and the effect of the code is often in the front of the structure of HTML documents, the most common is the navigation bar below, the implementation of the way is nothing more than flash or JS script, the most commonly used layout code is as follows:

<div class= "banner" >


<object>


Flash version


</object>


</div>


<div class= "banner" >


<script type= "Text/javascript" >


JavaScript version


</script>


</div>

The author thinks that if the above code is inserted in front of the HTML, not only for SEO optimization, but also for ordinary users is very depressing thing, the disadvantage of SEO is: Webmaster friends know that an HTML document in the front part of the search engine is more valued place, If you use JS or flash to achieve, although these code search engine can not identify, but it is possible to put other important places first to the search engine, these cannot identify things back to show. Bad for ordinary users is: This effect is generally 4~5 picture to switch, and these figures add up to at least 200KB or so, whether you use JS or flash implementation, as long as you are embedded in the HTML document, users must wait for these things loaded, especially when the picture is big, Probably stuck in the head, causing the browser to suspend animation, which is the most feared for users.

This time the author summed up a number of solutions, and through a long period of observation, practice has proved that these programs are OK, ranking did not affect, included in the normal, this bold to share with you.

I. Structural sequence adjustment

According to previous layout experience, our code should be like this:

HTML code:

<body>
<div class= "Container" >
<div class= "header" > Header content </div>
<div class= "banner" > Slide effect Module </div>
<div class= "Content" > Body contents </div>
<div class= "Copyright" > Copyrights Section </div>
</div>
</body>

CSS code:

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;}

The author has improved the following code:

HTML code:

<body>
<div class= "Container" >
<div class= "header" > Header content </div>
<div class= "Content" > Body contents </div>
<div class= "Copyright" > Copyrights Section </div>
<div class= "banner" > Slide effect Module </div>
</div>
</body>

CSS code:

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;}

Through the comparison of the above code, in fact, I use the CSS inside the position floating layout of this technique, about position floating layout of knowledge, we can find relevant information, it is important to master this knowledge, SEO optimization is very useful.

Second, the skillful use of delay loading

HTML code:

<body>
<div class= "Container" >
<div class= "header" > Header content </div>
<div class= "Content" > Body contents </div>
<div class= "Copyright" > Copyrights Section </div>
<div class= "banner" ></div>
</div>
</body>

jquery Code:

$ (document). Ready (function () {
Window.settimeout (function () {
FLASH version
$ (". Banner"). HTML ("<object> here is where the Flash code is inserted </object>")

AJAX version
$.get ("http://www.flagwind.com/GetBanner.html", function (data) {
$ (". Banner"). HTML (data);
});
}, 3000);
});

The general meaning of this jquery code is that after the document is loaded, it takes 3 seconds to execute the AJAX request, or something else to control the contents of the banner Div.

The code for the top two programs is just a few examples you can put it in his other place, put some of the content unrelated to the SEO load, or use JS delay load to display, so that the search engine is not serious, for ordinary users is also a good thing. This article from the Shenzhen website Construction Flag Wind Network www.flagwind.com original, forwarding time please do not delete the original author copyright information, thank you!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.