-
I have read a lot of articles about SEO optimization during this period, and found that most of them talk about knowledge in the operation stage, such as external links, internal links in articles, PR improvement, and some experience talks about specific search engine optimization. There are really too many articles of this type. If you read too many of them, you will feel that they are the same and have no freshness. Today I will talk about something new, mainly about some techniques about HTML layout in SEO optimization. The author is a programmer by birth. So what I wrote is a little bit technical, I hope you can understand me.
Many website homepages have a heat map module that can be switched in the form of a slideshow (see the picture below)
This module occupies 70% of domestic websites, including the author's website. The code for this effect is often in the front part of the HTML document structure, the most common one is under the navigation bar. The implementation method 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 believes that if the above code is inserted in the front part of HTML, it will not only be detrimental to SEO optimization, but also very depressing for ordinary users. The disadvantage to SEO is: as webmaster friends all know, the front part of an HTML document This is what search engines value more. If you use JS or FLASH to implement it, although these codes cannot be recognized by search engines, other important parts can be displayed to search engines first, and these unrecognizable things will be displayed later. The bad thing for ordinary users is that this effect usually requires switching between 4 to 5 pictures, and the total size of these pictures is at least about 200KB. Whether you use JS or FLASH to implement it, as long as you embed it in an HTML document, the user You have to wait for these things to be loaded. Especially when the picture is large, it is very likely to get stuck in the head area, causing the browser to freeze. This is the most terrifying thing for users.
During this period, the author summarized some solutions and through long-term observation, practice has proved that these solutions are OK, the rankings are not affected, and the inclusion is normal. I boldly share them with everyone here.
1. Structural sequence adjustment
According to past typesetting and layout experience, our code should look like this:
HTML code:
<body>
<div class="container">
<div class="header">Header content</div>
<div class="banner">Slideshow effect module</div>
<div class="content">Text content</div>
<div class="copyright">Copyright 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's improved code is as follows:
HTML code:
<body>
<div class="container">
<div class="header">Header content</div>
<div class="content">Text content</div>
<div class="copyright">Copyright section</div>
<div class="banner">Slideshow 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 comparative analysis of the above codes, I actually used the Position floating layout technique in CSS. You can find relevant information about Position floating layout. Be sure to master this knowledge point, which is very useful for SEO optimization.
2. Use delayed loading skillfully
HTML code:
<body>
<div class="container">
<div class="header">Header content</div>
<div class="content">Text content</div>
<div class="copyright">Copyright section</div>
<div class="banner"></div>
</div>
</body>
Jquery code:
$(document).ready(function() {
window.setTimeout(function() {
FLASH version
$(".banner").html("<object>This 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, after 3 seconds, execute an AJAX request or something else to control the content in the banner DIV.
The codes of the above two solutions are just some examples. You can use them in other places, load some content that has nothing to do with SEO later, or use JS to delay loading for display. This will not have a big impact on search engines. However, it is also a good thing for ordinary users. This article was originally created by Shenzhen website construction Flagwind Network www.flagwind.com . Please do not delete the original author's copyright information when forwarding, thank you!
Thanks to Shenzhen Qifeng Network for the contribution