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" >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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
