Forum Moderators: not2easy
I run an ecommerce website and it is very important for me to be able to control how my site is listed in the SERPs. Namely, instead of letting google choose what kind of description to write, I prefer to "give" to google my description. I'm in ecommerce & have found this makes a huge difference in terms of conversions. Digitalghost has told the story better than I could so I'll just link his post (Increasing Your Conversion Rate [webmasterworld.com]).
As a practical add on to DG's post, here's the CSS code that I'm using to display my most important paragraph to the search engines first.
HTML Code
<html>
<head>
<title>THIS IS MY TITLE</title>
<style type="text/css">
#container{
margin: 125px auto 0 auto; /* 125px top margin */
width: 768px; /* width works well 4 800x600 & 1024x768 */
background:url(container.gif);
background-repeat: repeat-y;
text-align: left;
}
#rightSide{
float: right;
width: 626px;
background :#9999FF;
}
#leftSide{
margin-right: 632px;
width: 122px;
background: #f0f0f0;
}
#footer{
clear: both;
margin: 0 auto;
width: 768px;
text-align: left;
background: #ccc;
}
#top{
text-align: left;
position: absolute;
top: 0;
width: 768px;
height: 125px;
margin: 0 auto;
padding: 0;
background: #ccc;
color: #00CC33;
}</style>
</head>
<body>
<div id="container">
<div id="rightSide">
<h1>THIS IS MY TITLE</h1>
<p>
Here is your money paragraph.
</p>
</div>
<div id="leftSide">
Here is your fancy CSS built menu
</div>
<div id="footer">
Here is your footer
</div>
<div id="top">
Here is your fancy header.
</div>
</div>
</body>
</html>
Explanation
As you can see the code is really quite simple. For my template, I've done a lot more floats within the rightSide and my #top has a large number of spliced up images positioned using position: relative. I've been able to apply the template to a graphical heavy site (other tweaks are needed to fix IE bugs but then I suppose that's the nature of IE).
You'll notice in #container there is a background image. You use this to create your 2 column design. i.e. A 1px high image has your desired background colors. You can of course be quite creative with this.
At any rate, hope others find this useful also. My designer and I have really pushed this base template so we look as good as our tabled competitors while sharing my love of KISS (keep it simple stupid) with the spiders. :)
