Building Optimized, SEO Friendly XHTML Templates

Depending on which sector your business is in, or what topics your site or blog deals with, your SEO strategy (or lack of one) could be what determines whether your site receives traffic or not, and therefore whether or not it is successful. I hear a lot about the importance of the title tag, meta keywords, meta descriptions, internal and external linking, and body copy optimization. But if you are in a highly competitive market, most top-20 sites probably already have these elements optimized. So how could you gain further advantage over your competitors?

One overlooked aspect of Search Engine Optimization is HTML/XHTML template structure. There is some debate over how important HTML structure is in search results, and it certainly is not going to “make or break” your site’s results. This is obvious just because of the shear number of absolutely awful table-based layouts that make the top-20 results on most Google Searches. But I’ve built many high profile sites in highly competitive markets, such as the hospitality and tourism industry, and my experience is that Search Engines like lightweight, semantic, optimized markup and generally clean code.

Like most developers who have been coding for some time, I have my own framework/base templates that I use to start most standard layouts. It looks something like this:

<!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="http://www.yoursite.com/templates/yourtemplates/css/template.home.css" type="text/css" />			
	<!-- Libraries & Scripts -->
	<script src="http://www.yoursite.com/templates/yourtemplates/css/jquery.min.js" type="text/javascript"></script>
</head>
 
<body id="your_page" class="your_page_type">
<div id="container">
	<h1>Your Business in your Location – Your Services</h1>
	<div id="branding">
		<a href="http://www.yoursite.com/default-en.html">
			<img id="logo" src="http://www.yoursite.com/templates/yoursite/images/logo.png" alt="Your Site" />
		</a>
	</div><!-- end branding -->
 
	<ul id="language-list">
		<li><a href="http://www.yoursite.com/default-en.html">English</a></li>
		<li><a href="http://www.yoursite.com/default-es.html">Spanish</a></li>
	</ul><!-- end language-list -->
 
	<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 -->
 
	<ul id="main-menu">
		<li><a href="#">First Link</a></li>
		<li><a href="#">Second Link</a></li>
	</ul><!-- end main menu -->
 
	<div id="additional-content">
		<h3>Third Level Title</h3>
		<p>More Content...</p>
	</div><!-- end additional content -->
 
	<div id="sidebar">
	</div><!-- end sidebar -->
 
	<div id="footer">
		<div id="copyright">
		</div>
		<ul id="bottom-menu">
			<li><a href="#">First Link</a></li>
			<li><a href="#">Second Link</a></li>
		</ul>
	</div><!-- end footer -->
 
</div><!-- end container -->
</body>
</html>

There are several points here to take into consideration:

Use as little markup as necessary to create the template structure, later styling and moving content around with CSS
Use semantic markup that follows a logical order, as if you were writing an essay
Make sure you have only one H1 heading, this is the main heading for the entire page, and the rest of your headings should reflect the importance they have relative to this
Make sure the content, or “meat” of your page is as high up in the code as possible so spiders can find it as quickly as possible (this requires optimizing the head and making css and js files external
Place menus (including main-menus) below the main content of the page, or include a method for skipping the menu and going straight to the content

The result of all these techniques is that you end up with a page that is as light as possible, loads quickly, and and when you switch off css styles, the page itself follows a very logical structure and is more readable (this is great for screen readers as well, making the site more accessible).

The trick, of course, is to then style this page using CSS to fit a wide variety of possible designs. Keeping the H1 and the main content of your page at the top of the markup, when perhaps in the design it is at the very bottom of the page, is a great way to take your CSS to the limit.

Building Optimized, SEO Friendly XHTML Templates

classes, and I'm wondering if I should be using <ul> lists instead. The content is on the page though. I just want to know what you think Google will perceive as more important.

Search

Categories