Using CSS to Create an SEO Friendly HTML Layout

In a previous post I examined how to put together an HTML / XHTML template that is optimized for the best possible Search Engine rankings. This entailed creating a logical HTML structure that puts the important content first, minimizing the <head> length, externalizing CSS and Javascript to speed up loading times, and generally using minimal markup.

Now let’s take a similar optimized HTML template, and using some CSS magic, create a layout that is solid yet light, holds together well cross-browser, and is SEO friendly from the ground up.

This will be the XHTML markup we will work be working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
	<title>Your Site - Your Location - Your Tagline</title>
	<meta name="keywords" content="Your site purpose, Your Location, Your other keywords..." />
	<meta name="description" content="Your site in your location, the rest of your description..." />
	<meta name="copyright" content="" />
	<!-- Load Styles -->
	<link rel="stylesheet" href="css/seo-template.css" type="text/css" />			
</head>
 
<body id="your_page" class="your_page_type">
<div id="container">
	<h1 id="doc-header">Your Business in your Location - Your Services</h1>
	<div id="branding">
		<a href="#">
			<img id="logo" src="images/logo.png" alt="Your Site" />
		</a>
	</div><!-- end branding -->
 
 	<!--[if lt IE 7]><div id="language-list-bugwrapper"><![endif]-->
	<ul id="language-list">
		<li><a href="#">English</a></li>
		<li><a href="#">Spanish</a></li>
	</ul><!-- end language-list -->
	<!--[if lt IE 7]></div><![endif]-->
 
	<div id="main-content">
		<h2>Your Secondary Title</h2>
		<p>More paragraph content here...</p>
		<h2>Another Secondary Title</h2>
		<p>More paragraph content here...</p>
	</div><!-- end main content -->
 
	<!--[if lt IE 7]><div id="main-visual-bugwrapper"><![endif]-->
	<div id="main-visual">
		<img id="image-1" src="images/main-seo-image.jpg" alt="Main SEO alt text" height="300px" width="960px"/>
	</div>
	<!--[if lt IE 7]></div><![endif]-->
 
 	<!--[if lt IE 7]><div id="main-menu-bugwrapper"><![endif]-->
	<ul id="main-menu">
		<li><a href="#">First Link</a></li>
		<li><a href="#">Second Link</a></li>
	</ul><!-- end main menu -->
	<!--[if lt IE 7]></div><![endif]-->
 
	<div id="additional-content">
		<h3>Third Level Title</h3>
		<p>Third Level Content...</p>
	</div><!-- end additional content -->
 
	<div id="sidebar">
		<h3>Sidebar Title</h3>
		<p>Sidebar Content</p>
	</div><!-- end sidebar -->
 
	<div id="footer">
		<div id="bottom-menu">
			<ul>
				<li><a href="#">First Link</a></li>
				<li><a href="#">Second Link</a></li>
			</ul>
		</div>
	</div><!-- end footer -->
 
</div><!-- end container -->
</body>
</html>

Now, this is not a design post, so we are going to give some rather shockingly bright background colors to each of our main divs just for the purpose of the build, so we can see exactly what is going on. We’ll use standard rainbow CSS colors for this purpose: gray, lightgray, lightblue, orange, etc.

The final layout is going to look like this:

SEO Template Layout

So let’s get to it. As you can see, we are going to create a fairly standard centered layout. The first thing we need to do is center our container div. We can set our width to a standard 1024px, then set the margins to auto which should center it:

#container {
	width:1024px;
	min-height: 800px; _height: 800px; /* IE 6 does not support min-height */
	background-color: lightblue;
	margin: 0px auto 0px auto;
	position: relative;
}

After we have out container centered, we can position our main content by creating margins that will push the content where we want it to go. Our layout’s height will vary, so we will float it left so that it pushes the rest of the content down by allowing the main content area to expand.

#main-content {
	background: pink none repeat scroll 0 0;
	float: left;
	margin: 340px 252px 20px 32px;
	min-height: 300px; _height: 300px; /* IE 6 does not support min-height */
	width: 740px;
	display: inline; /* IE 6 double margin bug */
}

We then use a similar technique to position the other content divs, including our sidebar, additional-content, and footer. We use margins, although depending on the layout, padding could also work.

This creates a layout that puts our HTML in a logical, SEO friendly order, as if we were organizing an essay or an outline, while allowing us to position the elements wherever the design demands. Google and other search engines don’t really care where we place our content with CSS of course, the only thing search engines read is the underlying HTML markup. If you want to have an idea what Google sees, just hitting the good old Ctrl+U command, or using a screen reader or Google Webmaster tools will give you a good idea.

So, according to our HTML structure, we’ve decided that the order of importance for our elements is as follows:

We wrap everything in a container div, in order to center it. We might be able to use just the body to center it, but in order to create a more flexible layout, we wrap everything in a container.
The first truly important element for SEO purposes is going is our H1 heading. This should be the title of this page in particular, and we should not put any other H1’s on the page. We also want search engines to find this as quickly as possible, so we put it immediately after our container div.
After the H1, we are going to add our company branding div, with our logo.
The next element will be the language selection div. Since we don’t know what language our user’s speak, it’s always good to let them change it so they don’t have to go further down the markup looking for it.
Then we get to the “meat and potatoes” of our page, the main content div, with it’s H2 headings and rich paragraph text. This is the most important part of our site in terms of SEO.
After the main content, we have our main visual content. This is visual content, such as images, that is associated with the above mentioned main content.
We then add all our other elements, such as any additional content, sidebar, footer, etc. in order of importance to the page

This looks ok, we now have a logical structure for our HTML markup.

As I mentioned earlier, our main image (or slideshow), for example, is important for SEO because the Alt information and image names get indexed by Google and other major search engines. However, the image Alt tags are not as important as the main content div itself, and the rich H2 and paragraph text it contains. This is why in the HTML markup we have put the <div id="main-visual"> after the main content div.

In the design of the layout however, the main visual div is above the main content. So how do we flip the order and get the images contained in our main visual div above the floated main content in the layout even though it is further down in the markup? We can use CSS to absolutely position in the correct place, of course, like so:

#main-visual {
	position: absolute;
	top: 120px;
	left: 32px;
	height: 300px;
	width: 960px;
}

We can then use a similar technique with all our other elements, either floating them and using margins (or padding) to push them around, or using absolute positioning to position them anywhere on the page.

Here is the fulll CSS code:

/* ==== reset css ==== */
 
body, h1, h2, h3, h4, h5, h6, p, ul, form, td, button, input, select {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; font-weight: normal;}
ul {padding-left: 1.2em}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a img {border: none;}
body {font-family: Arial, helvetica, sans-serif; font-size: 76%;}
 
/* ==== main layout ==== */
 
body#your_page {
	background: darkgray;
}
 
body.your_page_type {
}
 
#container {
	width:1024px;
	min-height: 800px; _height: 800px; /* IE 6 does not support min-height */
	background-color: lightblue;
	margin: 0px auto 0px auto;
	position: relative;
}
 
#container:after {
	content: '.';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
 
h1#doc-header {
	height: 20px;
	line-height: 20px;
	padding-left: 32px;
	width: 992px; /* 1024px - 32px padding */
	background: darkgray;
	margin: 0px auto;
}
 
#branding {
	height: 80px;
	width: 100%;
	background: gray;
}
 
#logo {
	margin: 5px 5px 5px 32px;
}
 
#main-visual {
	position: absolute;
	top: 120px;
	left: 32px;
	height: 300px;
	width: 960px;
}
 
#main-content {
	background: pink none repeat scroll 0 0;
	float: left;
	margin: 340px 252px 20px 32px;
	min-height: 300px; _height: 300px; /* IE 6 does not support min-height */
	width: 740px;
	display: inline; /* IE 6 double margin bug */
}
 
#additional-content {
	width: 740px;
	background:  black;
	float:left;
	min-height:400px; _height: 400px;
	margin: 0px 20px 20px 32px;
	display: inline; /* IE6 double margin bug */
}
 
#sidebar {
	display: inline; /* IE6 double margin bug */
	float: right;
	margin: -320px 32px 0 0; /* negative main content height + margin */
	min-height:500px; _height: 500px;
	width: 200px;
	background: green;
}
 
#footer {
	width: 100%;
	height: 200px;
	background: #333;
	color: white;
	float: left;
}
 
#language-list {
	background: lightgreen none repeat scroll 0 0;
	height: 40px;
	position: absolute;
	right: 32px;
	top: 55px;
	width: 65px;
	list-style: none;
}
 
#language-list li {
	line-height: 20px;
}
 
#main-menu {
	background: red none repeat scroll 0 0;
	height: 25px;
	left: 190px;
	position: absolute;
	top: 70px;
	width: 700px;
	list-style: none;
}
 
 
#main-menu li {
	display: inline;
	padding: 0px 5px;
	line-height: 25px;
}
 
#copyright {
}
 
#bottom-menu {
	width: 100%;
	height: 25px;
	background: red;
	position: absolute;
	bottom: 0px;
	left: 0px;
	line-height: 25px;
}
 
#bottom-menu ul {
	width: 900px;
	height: 25px;
	background: orange;
	list-style: none;
	margin: 0px auto;
}
 
#bottom-menu ul li {
	display: inline;
}
 
/* ==== text styles ==== */
 
 #main-content h2 {
 	width: 720px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: white;
	background: black;
	padding-left: 20px;
 }
 
 #main-content p {
 	margin-bottom: 30px;
	padding-left: 20px;
 }
 
 #sidebar h3 {
 	width: 200px;
	height: 25px;
	line-height: 25px;
	background: black;
	color: white;
 }

This gives us an underlying HTML structure that is excellent for SEO purposes and is logical and follows a clear outline. Yet by using some smart CSS we can create almost any type of layout we desire without modifying the base markup.

On a side note, as you can see in the full CSS code, I have given a min-height to several of our divs just to give you an idea of how the page would look with more content in it (using _height to adjust for IE6 which does not support min-height). I’ve also used the clear fix technique so content doesn’t escape our container div in Firefox, and in the HTML code, we’ve had to use conditional comments to avoid the disappearing content bog in IE6, as well as the old display:inline trick to avoid the double-margin bug in IE6.

That’s it, now you can check out our SEO friendly, cross-browswer, HTML and CSS template in action.

Using CSS to Create an SEO Friendly HTML Layout

Search

Categories