Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Tutorial 6: Enhancing a Template for Joomla SEO
Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website
So we have a very basic shell of a web site. Doesn't look very interesting does it. Well, we can soon change that, let's make a few changes. We will also optimize the template for SEO. Joomla has some challenges compared to a static website, but techniques such as those we describe here can improve your joomla SEO efforts.
Some basic changes to the Joomla CSS
Let's first make the text a little more readable, two quick changes to the joomla CSS.
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%; /* don't go smaller than this */
Note we dropped the style being applied to "html,body" as we didn't want the percentage font size being applied twice!
This makes the font a more reasonable size. Remember, we talked about how we were sizing our fonts in one of our previous articles, A Blank Template CSS file for Joomla. I have also chosen a sans-serif font: verdana. Web pages have the opposite readbility of paper pages. On paper, serif (like Times New Roman) are more readable, on the web its the opposite.
Next, let's center the page.
text-align:center; /* for IE */
OK, so here we have centered the page and made it a little wider. This is a fluid joomla CSS layout, the main part of the page will always be 85% of the browser window. It re-seizes depending on the screen resolution.
Now, we have to do a little changing of the column sizes. This is important, if columns overlap, it can break a layout in a browser.
margin-left: 190px; /*tweaked a little to get a slight gap*/
margin-right:165px; /*tweaked a little to get a slight gap*/
I have reduced the width of both side columns and increased the margins. Note I have made a small gap between them and the center column.
Let's make a splash of color, C00 is a shade of red and fff is white:
OK, so here is the really good bit. It's to do with joomla search engine optimization or joomla SEO. The closer something is to the beginning in the xhtml code of your page, the more weight it carries for yoursearch engine ranking . Unfortunately, a joomla website outputs alot of xhtml. This means that your important content (the middle column) gets pushed down. But, CSS to the rescue, remember that we absolutely positioned our side columns. This means that they can appear anywhere in the source, as long as they are in their container, the "wrapper". So let's put them after the main content! Heck, if you wanted and had alot of non-vital content in it, you could even make a header container and put that after the main content too.
<?php mosMainBody(); ?>
<?php mospathway() ?>