Improve Your Rankings with a Sitemap That Works: The CSS

If you’ve read the previous article and followed the examples therein, you should have a working sitemap that will enhance your ranking rather than tarnish it. Admittedly, although autonomous visitors will be pleased by it, most human ones will not, so it’s time to add some basic CSS that will improve the visuals without detracting from the SEO ambitions of the page.

The style of your site map will need to reflect upon the style used throughout your site, you can brighten the page up and add roll-over effects with some simple CSS without needing to mess about with JavaScript (as fun as that may be).

The key here is to keep it minimal. Use some brand colors for consistency without overdoing it.  Remember that whitespace is a professional commodity that is rarely used to its full potential.   Create a type selector for the div at the top of the page; this will target all of the div elements in the linked HTML page that don’t have an ID attribute:

div {
  background-color:ffffce;
  color:003399;
  border-width:1;
  border-color:ffcc00;
  border-style:dashed;
  padding:10;
}

Now create a one type selector for the heading ones and another for the headings twos:

h1 {
  background-color:ffcc00;
  width:100%;
  border-width:1;
  text-align:center;
  font-weight:bold;
  font-size:18;
  font-family:sans-serif;
  left:0;
  top:0;
}

h2 {
  font-size:16;
  margin:0;
  padding:0;
  font-weight:normal;
}

Link the style-sheet to the HTML document in the normal way and take a look at the page so far. Just these selectors, however, will leave the page looking a bit odd.  You’ll also notice that you need to scroll too far down to reach some of the bottom links.

You can contain each of the sections in styled <divs> to further improve the look of the page, and you can create columns that minimize the scroll effect.  This time, create the following ID selectors:

#left {
  text-align:right;
  float:left;
  width:50%;
  background-color:ffffff;
  border-width:0;
  padding:10;
}

#right {
  text-align:left;
  float:right;
  width:50%;
  background-color:ffffff;
  border-width:0;
}

You could also use class selectors instead of ID selectors; the end result is the same, and the choice is yours.  The time that you wouldn’t want to use ID selectors would be if you were doing work involving scripting or the DOM because these can sometimes rely on elements having unique ID attributes.  What these two selectors do is create two side-by-side <div> elemtns and align the contents to either left or right to give the appearance of columns.  Further columns can be created if necessary, and the width and alignment attributes altered accordingly.  This prevents your visitors from having to scroll too far down.

To use the selectors with the HTML, you’ll need to encase the lists that you want to appear as either column in a <div> with an ID set to the name of the selector; so in the HTML file, put the first three lists into a div with an ID of left, and the remaining lists in a <div> with an ID of right. 

This changes the flow of the document and takes things out of their natural order.  As a side issue, you can add the following ID selector and use it to reset the document back to the normal flow if you want content to appear below the columns:

#foot {
  clear:both;
  background-color:ffffff;
  border-width:0;
  text-align:center;
  font-size:10;
}

Now in the HTML document, create the following section of code and place it at the end of the file, just above the closing <body> tag:

<div id=”foot”>Copyright &copy; Rogue Records 2005</div>

View the web page again and see what this achieves.

Now, the page looks better, but it’s still not that attractive; you can enclose each of the lists inside its own <div id=”block”> element, including the lists headings, and add some further styling effects to help space out and separate the lists in a more presentable manner.  Create the following ID selector:

#block {
  border-width:1;
  border-style:solid;
  border-color:ffccoo;
  background-color:ffffff;
  width:50%;
  padding:0;
}

Again, the page has improved, but there is still a lot that can be done with it.  The following ID selectors will finish off the appearance aspects of the page and add the roll-over effects mentioned earlier:

#navigation {
  border-width:0;
  background-color:ffffff;
}

#navigation ul {
  width:100%;
  margin:0 0 0 0;
  padding:0;
  list-style-type:none;
}

#navigation li {
  margin: 0 0 5 0;
}

#navigation a {
  display:block;
  color:003399;
  background-color:ffffce;
  text-decoration:none;
  border-width:1;
  border-style:solid;
  border-color:ffcc00;
  padding:0 5 0 5;
  width:100%;
}

#navigation a:hover {
  background-color:ffcc00;
  color:003399;
}

Now, you just need to put just the lists themselves in their own <div id=”navigation”> elements.  Do this, save the files and take a look.  Obviously, the color scheme used here is just an example.

If your site hierarchy includes more than 2 levels, you can easily work this logically into the existing style with just a few more selectors.  Say the House music page links to three sub pages displaying different sub-genres of music.  Just add the following selectors to your CSS file:

#navigation ul h3 {
  font-size:12;
  margin:0 0 0 0;
  font-weight:normal;
}

#level2 {
  width:70%;
}

Then add the following code to the HTML file, directly beneath the page that links to the sub pages:

<li id=”level2″><a href=”http://deephouse.htm”><h3>Deep House</h3></a></li>

<li id=”level2″><a href=”http://hardhouse.htm”><h3>Hard House</h3></a></li>

<li id=”level2″><a href=”http://proghouse.htm”><h3>Progressive House</h3></a></li>

With this CSS file externally linked to your HTML page, you can vastly improve the appearance of a site without damaging its SEO potential.  The HTML from the first article is coded in such a way that it still works perfectly in situations where the CSS is ignored or not available.  The following screenshot shows the page with no CSS:

While this screenshot shows what can be achieved with some simple selectors:

You’ll notice that that the CSS file will only work correctly on Microsoft’s Internet Explorer, which is an unfortunate event, but it is a problem that can easily be rectified.

You’ll need to create a slightly different CSS file that will render the page in the same way in Mozilla browsers, and a script file that will detect the browser and select the stylesheet accordingly.  You could cater for almost any browser, but as MSIE, Firefox, Mozilla and Navigator are easily the most popular, this example script will just target those ones.

First off, modify the #left and #right ID selectors in the CSS file:

#left {
  text-align:right;
  float:left;
  width:35%;
  border-width:0;
  margin-left:10%;
  background-color:ffffff;
}

#right {
  text-align:left;
  float:right;
  width:35%;
  border-width:0;
  margin-right:10%;
  background-color:ffffff;
}

You can see that the width of the elements has been reduced, and a margin attribute added.  For some reason, Mozilla doesn’t like to place elements flush against one another so the second column will overspill to below the first column when the original stylesheet is used.

To align each box heading against the top and sides of each box correctly, you will also need to remove the top and left attributes from the h1 type selector and replace it with:

Margin: 0 0 0 0;

The width of the #block selector should be increased to 100%, and the padding attribute can be safely removed from the #navigation ul and #navigation a selectors.  Finally, a margin-left:30%; attribute should be added to the #level2 ID selector.

Save the updated CSS file as styleMoz.css and change the link element in the main HTML file so that it links to the new stylesheet.  Open the web page in Mozilla and it should appear as intended.

The JavaScript function that selects the correct stylesheet is extremely simple; it just detects whether the browser is MSIE, and re-writes the href attribute of the link element if it is:

function iestyle() {
  if (document.body.createTextRange() != ‘undefined’) {
    a = document.getElementById(‘link’)
    a.setAttribute(‘href’,'sitemapStyle.css’);
  }
}

As the createTextRange method is proprietary to Ineternet Explorer, it will not return undefined when IE is in use.  When this condition is true, it selects the link element in the a variable and replaces the href attribute with the URL to the Microsoft-friendly CSS file using the setAttribute method.  When a browser that doesn’t implement createTextRange (or any IE only object of your choice) runs the script, it will return undefined and the href attribute will not be changed in the HTML file, leaving the Mozilla friendly stylesheet in use.

The only down-side to this is that with JavaScript switched off in the browser, a visitor will default to the pretty plain looking un-styled list, so be sure to include <noscript> tags at the top of the page.  Again, it’s more junk for the spiders to swallow, but it is good practice and should be adhered to, your visitors shouldn’t suffer at the hands of your SEO campaign.

Finally, just add an onload event handler to the <body> element of the main HTML page that calls the function then the page has loaded, and link the JavaScript file to the head of the HTML document.  JavaScript should not be used in-line because it is something else that the search engine crawlers dislike and is more unnecessary data for them to ingest.

Test the page now in the mainstream browser of your choice and you should see the page as you intended to.  There are still minute differences in the way the page is rendered in any of the different browsers but overall, it will look and feel the same.

An optimized sitemap should be part of any SEO campaign.  Your entire site should be search-engine friendly and contain (at the very least) a sitemap already. You’ll find that search engine spiders may start to like your site a little more after they find your stash of links.

Google+ Comments

Google+ Comments