Code

Optimizing HTML Code for Maximum SEO

Overview

Search engine optimization has come to the forefront in recent years as competition for search engine rankings increases. Online business owners often times rely heavily on search engines to generate traffic to their websites, which in turn increases the chances of those visitors becoming customers. The quest for higher rankings spawned the industry of search engine optimization, or SEO, which encompasses the entire spectrum of techniques for improving the ranking of a website. One primary area of search engine optimization, and arguably the most important, is the optimization of the HTML code that actually makes up a website. Regardless of any other efforts made to improve search engine rankings, if the search spiders cannot efficiently traverse and index a website, the site will not receive a good ranking.

Many business owners never actually see the code, despite its importance, behind their website. They frequently trust that their web designer is handling it. Sadly, many web designers are no more versed in the optimization of code than anyone else, having put their focus into the visual and functional aspects of website design. Search engine spiders examine the HTML code of a website, attempting to get at the textual (that is, the text actually shown on your website and visible to users) content of the page and separate it from the structural code used to display the information. Excessive structural code can bog down the spiders, making it difficult for them to find the real content of the page, and is often times unnecessary.

For example, most websites are comprised of a header with some sort of navigation or menu in it. Often times this header and menu navigation will be composed of a series of images, held in place by an HTML table. While to a human visitor this is perfectly fine, a search engine spider sees only images with no textual content. The spider would be able to follow the links from the images, but with no anchor text they will not get as much weight as a textual link with relevant anchor text. Additionally, the amount of code required to create an HTML table and a series of menu images is enormous, and will push the real content of our page further down the code. Some search engines assume that the farther down in the code content is on a page, the less important it is.

So what now, do we go back to the first days of the Internet where websites are all text and no graphics? Hardly, but we do need to do something. In this first tutorial about optimizing HTML code we will examine alternative coding methods to achieve leaner code without sacrificing our visual appeal. We will begin by replacing a bulky header full of images with a more optimized header using a fraction of the code. The first thing we will focus on is removing the HTML table, since it requires quite a bit of code to accomplish a simple task. After that, we will look at another way to create our navigation menu using text links formatted with CSS. This will allow us to create anchor text for our links, as well as to strip out all the HTML code associated with placing images. Once our header has been recreated, we will look at a simple method of creating a rollover effect for the menu buttons that only requires one image.

Instruction

To start with, let’s look at an example of how someone might make a header for a website using some images and tables. This is quite common, and is the type of code that would be automatically generated by an application such as Photoshop. While this code works fine, and looks the same as the way we will do it, it is bulky, not accessible to handicapped users, and full of extra code that is simply not needed. Take a look:

<code>&lt;table width="770" border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td colspan="5"&gt;&lt;img src="" alt="Logo" width="770" height="50"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;a href="page1.htm"&gt;
&lt;img src="first.gif" alt="Logo" width="110" height="20"&gt;
&lt;a/&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="page1.htm"&gt;
&lt;img src="second.gif" alt="Logo" width="110" height="20"&gt;
&lt;a/&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="page1.htm"&gt;
&lt;img src="third.gif" alt="Logo" width="110" height="20"&gt;
&lt;a/&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="page1.htm"&gt;
&lt;img src="fourth.gif" alt="Logo" width="110" height="20"&gt;
&lt;a/&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="page1.htm"&gt;
&lt;img src="fifth.gif" alt="Logo" width="110" height="20"&gt;
&lt;a/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code>

This is a relatively simple table for the header, which is nothing more than a table and some images. However, I have left out any code that would be needed to produce a JavaScript rollover effect for our buttons. The most important part to notice is that there is no text, especially not any anchor text to give our links context. To a search engine, the only important part of the header is the navigation links, but as you can see the spider needs to traverse quite a bit of code to get at them.

So let&’s begin. First we will want to create the HTML for our header, thinking of data structure first. Since our header consists of a large banner image with some menu links below it, lets break our header into two “rows”. In order to effectively use CSS to format our HTML visually, we will want to make sure that we have enough markup to accomplish our goals. To illustrate this, I want to have my header image also be a link back to the home page of my website. However, the image is one large image, and the link that I want will only be over the logo. Here is the markup needed to get this done:

<code>&lt;div&gt;
&lt;h1&gt;&lt;a href="/"&gt;My Company Name&lt;/a&gt;&lt;h1&gt; 
&lt;/div&gt;
</code>

As you can see, this is not very much code. The div element serves to enclose everything that we want in the top part of our header. Since we also want to draw prominence to the name of our site, we put the title of the site into <h1> header tags. Also, since we want to include a link to our home page, we include the <a> tag that sets this link. It might not seem like much, but as we get into formatting you should really begin to see why the tags that we chose are needed.

Let’s move on to our menu. We will include everything that makes up our menu inside another div element in order to keep it discrete. Since we want some markup in order to do our formatting, I am going to place all of our links into an unordered list, or inside <ul> Take a look at our menu below code added to the HTML document below:

<code>&lt;div&gt;
&lt;h1&gt;&lt;a href="/"&gt;My Company Name&lt;/a&gt;&lt;h1&gt; 
&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="menu1.html"&gt;First Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="menu2.html"&gt;Second Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="menu3.html"&gt;Third Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="menu4.html"&gt;Fourth Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="menu5.html"&gt;Fifth Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code>

Now that we add all of our menu links, we notice that the code is about the same size. That is correct, except that this new code offers some definite advantages. Preview the code above in a browser and you will see a very friendly page that a search engine would really enjoy. Nothing too much to look at… yet. In addition, we have anchor text in our menu links, which will add context to the link for the search spiders, as well as add keyword text to our document– and right at the top. Not only that, but accessibility programs are able to read our content and provide a meaningful experience, which is not possible using images.

But then again, our header right now looks like something from the first days of the web. The only real thing that it has going for it is that our company name is really big. So let’s get to work on our CSS file. We’ll start with getting our image in the top section. We’ll call this div section “banner”, and set it’s size to the size of our header image- in this case 770 pixels wide and 60 pixels tall:

<code>#banner {
background: url(/images/header.gif) no-repeat;
margin: 0px;
padding: 0px;
height: 70px;
width: 770px;
}
</code>

This will give us the space we need at the top for our header image. As you can see, we have also set a property for the background to get our image to show up. Next we want to make sure that the header tag inside this banner section works the way that we want. Our goal is to make the text invisible, while still providing a link to the homepage. We will need two CSS styles to pull this off:

<code>#banner h1 {
font-size: 1px;
line-height: 1px;
color: #FFFFFF;
letter-spacing: -2000em;
margin: 0px;
padding: 0px;
}

#banner h1 a {
display: block;
height: 70px;
width: 300px;
}
</code>

The first declaration makes the text in the header tag nearly invisible. In actuality, it compresses all the text into one pixel, which is then colored to appear invisible. That takes care of our text showing up over the image, but it also compresses our link into one pixel, which won’t do our visitors any good. That is why we use the second style declaration, which targets the link inside the header tag. By defining the size of our link, we can create an invisible link that will cover our logo, and serve as a link back to our home page.

Next we need to concentrate on our menu section. Remember before when it seemed unnecassary to use an unordered list to present our menu? Here is where it will become apparent. Let me just start by saying that we needed the extra markup to apply styles to, which will make more sense in a minute. First, let me outline the CSS style declarations for the menu section.

<code>#menu {
margin: 0px;
padding: 0px;
height: 30px;
width: 770px;
}

#menu ul {
margin: 0px;
padding: 0px;
}

#menu ul li {
display: inline;
}

#menu ul li a {
display: block;
float: left;
font-size: 1px;
line-height: 1px;
letter-spacing: -2000em;
height: 30px;
}

#menu ul li.first a {
background: url(/images/first.gif) no-repeat;
height: 30px;
width: 150px;
}

#menu ul li.second a {
background: url(/images/second.gif) no-repeat;
height: 30px;
width: 162px;
}

#menu ul li.third a {
background: url(/images/third.gif) no-repeat;
height: 30px;
width: 149px;
}

#menu ul li.fourth a {
background: url(/images/fourth.gif) no-repeat;
height: 30px;
width: 160px;
}

#menu ul li.fifth a {
background: url(/images/fifth.gif) no-repeat;
height: 30px;
width: 149px;
}
</code>

As you can see, this seems like a lot of code. However, since our CSS code is going to be put into an external file, all of this code will be cached by the user’s browser and re-used for each page of our site. Essentially we are moving all the code associated with formatting into an external CSS file, which leaves our HTML file stripped down to only relevant content. So let’s take a look at what we are doing with our style declarations here.

The first style declares the menu div section. As we did before, we define the dimensions, padding, and margin of the menu section. Next we declare a style for the ul elements that appear inside our menu section. Since unordered lists have an inherent margin and padding, we need to tell a browser to eliminate them.

This next section is where the magic happens. We start by telling the browser to display our unordered list items as inline elements, rather than the default block. This will allow our list to appear horizontally, although will will need to do some work to get the spacing correct. Our inline declaration also eliminates the bullets that appear in from of unordered list items by default, which is good. However, since we want our menu to be our images, and not have our anchor text appear to users, we need to go a bit further.

We start by declaring a style for all links in the menu that will hide the anchor text. This text is great for search engines, but won’t look so good overlayed on our menu image. Just as we did for the header tag before, we set the text size to 1px, the line height to 1px, the letter spacing to -2000em, and set the color to match our image. We have now made our menu links only 1 pixel again, so we need to go through an improve that. Finally, you notice that I set the display property to block, which if basically counteracts the inline property that we set for all list items. We need to do this in order for the browser to display the rectangle that we want, much like the link inside the header tag from before. To make sure that the items are still displayed in an inline fashion, we need to set the float property to left. Without going in to too much detail, this will stack the rectangles that we are going to create horizontally, and allow us to create our menu.

Next we need to put our individual images into each link, and create our rectangles. To do this we need to target the links individually, which we manage by applying a class name to each list item. So to walk through it, the following style declaration:

<code>#menu ul li.first a {
background: url(/images/first.gif) no-repeat;
height: 30px;
width: 150px;
}
</code>

Will target the any link inside <li class="first"> tags that appear within <ul> tags inside the <div id="menu"> section. CSS allows us to gain very precise control over our styles. So what are we doing to create a graphical menu? Essentially, we are just setting the size of each link rectangle, which should be the size of the image you want to appear there, and then declaring which image to display via the background property. We do one for each menu item, ensuring that the correct image is going to show for each link. And with that, we are done with our CSS. The last thing that we need to do is apply the styles to our HTML, which I have shown below:

<code>&lt;div id="banner"&gt;
&lt;h1&gt;&lt;a href="/"&gt;My Company Name&lt;/a&gt;&lt;h1&gt; 
&lt;/div&gt;
&lt;div id="menu"&gt;
&lt;ul&gt;
&lt;li class="first"&gt;&lt;a href="menu1.html"&gt;First Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li class="second"&gt;&lt;a href="menu2.html"&gt;Second Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li class="third"&gt;&lt;a href="menu3.html"&gt;Third Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li class="fourth"&gt;&lt;a href="menu4.html"&gt;Fourth Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;li class="fifth"&gt;&lt;a href="menu5.html"&gt;Fifth Menu Choice&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; 
&lt;/div&gt;
</code>

Make sure to link your CSS file in the head section of your HTML document, and preview in a browser. A nice, pretty, CSS-based header for a website that provides optimal code for search engines and exactly the visual appearance that we wanted.

Of course, it is a little boring. I really like rollover links, or buttons that change color or interact in some way when the mouse is placed over them. Usually this is accomplished by using javascript, but that adds a LOT of bulky code to the HTML file, as well as the code needed to define JavaScript functions. Thanks anyway. Instead I am going to show you a trick that works even better (there are no extra images to preload) and only requires a tiny change to our CSS files.

We do need to change our images though. So the way that this trick works is by only displaying part of the background image for each link. By creating an image that has both our normal and rollover states for each link, we can then use CSS to move the background image when the mouse is placed over the link. This happens instantaneously, so the visuall effect is the same as a JavaScript rollover button.

Example Take a look at one of our menu link images on the left. Notice that I have simply placed the rollover state below the original, effectively making the image twice as tall. However, since it is just one image, the file size is smaller than two similar images would be, which is another small advantage.

Now, to get this to work, we simply need to add one more style declaration to our CSS file. This declaration will state that whenever a link in the menu bar has the mouse over it, move the background image up to display the rollover effect. Take a look;

<code>#menu ul li a:hover {
background-position: 0px -30px; 
}
</code>

Upload your new images and preview again in a browser and you will see a nice interactive rollover effect that required no additional code in our HTML document. Hopefully this tutorial will give a starting point for evaluating the code behind your website.

Brian Getting
Brian Getting
Bio   •   RSS Feed


x