6: Enhancing a Template for Joomla SEO

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.

body {
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.

body {
text-align:center; /* for IE */
}
#wrapper {
position:relative;
width:85%;
margin:0 auto;
}

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.

#leftcontent {
width:175px;
}
#centercontent {
margin-left: 190px; /*tweaked a little to get a slight gap*/
margin-right:165px; /*tweaked a little to get a slight gap*/
}
#rightcontent {
width:150px;
}

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:

body { .....
background-color: #C00;
......}
#wrapper {
background-color:#fff;
}

Joomla SEO

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.

Overview of a Joomla Design

<body
<div id="wrapper"

<div id="centercontent"
<div class="insidecenter"
<?php mosMainBody(); ?
</div

<div id="header"
<?php mospathway() ?
<?php mosLoadModules('top');?
</div

<div id="leftcontent"
<?php mosLoadModules('left');?
</div

<div id="rightcontent"
<?php mosLoadModules('right');?
</div

</div

<?php mosLoadModules('bottom');?
<p
uri=http://livesite.compassdesigns.net" target="_blank" title="W3C Joomla Design"

</body
</html

We had to add this rule (you can see it in the xhtml above) to push the center column down.

.insidecenter {
padding: 100px 0 0 0;
}

Last but not least we move the footer below the end of the wrapper div, putting it into the colored page background.

Now we add some titles for the site.

<div id="header"
<h1
<h2
<?php mospathway() ?
<?php mosLoadModules('top');?
</div

Notice how the name of the site and its url are in header tags. This does two things, first it is good practive for semantic layout, so increases the accessibility of the site, second, it helps your joomla SEO as anything in a header tag is given slightly more weight as a keyword.

So, there you have it, a source ordered joomla template, this week with a little kick for your joomla SEO needs.

A Joomla SEO template

Is it still a W3C valid joomla template?? Well, what do you think?

Comments (3)add comment

Sean said:

It might just be my browser messing things up, but for me the livesite does not show what I see in the last screenshot...that and there seem to be some things left out on the way here, like the way to do the two seperate CSS files...I'll get it in the end by figuring things out myself, but it might be nice things to add to the tutorial smilies/smiley.gif
August 31, 2006

trini said:

Seems to make sense but most search engines dont read tables and joomla is full of them, doesnt this makes SEO hopeless....
November 06, 2006

Corinna Salmon said:

Hi Barrie

This article is not wrapping for me, some of the words have been cut off the edge of the main content and are being hidden behind your first right column. This is not the case for all articles.

I couldn't connect to the library pdf referenced in the tutorial link above ('helper.php licence file required' error)

Same error for the the second link referenced 'to find out more'

When I click on link to validate the joomla template I am getting a 500 server error (Bad hostname 'livesite.compassdesigns.net')coming back from w3.org

When I tried to logon to comment here I got an 'invalid token' error, but somehow managed to get logged on anyway.

Maybe I am just having a bad day...do you have days like that!

smilies/wink.gif
March 31, 2008

Write comment
You must be logged in to a comment. Please register if you do not have an account yet.

busy
Last Updated ( Monday, 21 April 2008 14:15 )
 

Did you enjoy this Compass Design blog post/tutorial?

Then sign up for regular monthly newsletter. I'll send you great tips on Joomla, email only offers and news from the Joomlasphere.

Email: First Name:

Find more posts tagged with...

Get Joomla Tips by RSS or Email


Register or login for free downloads



Joomla 1.5 Book

Get the "have to have book" about Joomla 1.5 from Amazon and free access to the companion site, joomlabook.com.

Joomla 1.0 eBook

Get the best selling Joomla 1.0 Admin Manual eBook

Also available in hard copy from
Support independent publishing: buy this book on Lulu.

Who's Here

We have 226 guests and 1 member online

Stuff I Recommend

Basecamp