Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl

Joomla! SEOTechnical Search Engine Optimisation

René KreijveldInternet developer

Optimising your website for

requires 2 things well setup:•Your content must be in order•Your template must be spiderable and

search engine friendly

Search Engine Optimisation:

75% is content25% is technoloy

This presentationis about technology.

Sorry ;-) ...

Okay, short on content ;-)•Write a good pagetitle•Write an introductionary paragraph with

keywords about your subject•Use H1, H2 and H3 tags•Avoid structures in your content like tables

and frames•Use alt and title tags for links and images•Use Meta Descriptions•Update your content frequently

How can technology help?•Create error-free pages [wysiwyg editor]•Create content and navigation that

webcrawlers can read [css]•Present content in the right order [css]•Generate the right tags H1, H2, H3

[template overrides]

Why you need contentin the right order?

•A webcrawler is dumb:- it can’t read images- it doesn’t understand Javascript- it doesn’t understand Flash- it doesn’t understand CSS

•Let’s take a look at www.joomla.org

•And this is how a webcrawler sees this website:

Source-ordered is important•Prominence to keyword optimized sections•Spiders see unique page elements before

sitewide elements•Place searchable elements above blocks

that crawlers can’t read (flash etc.)•No undesired elements in search results•Importent content loads first•Better rankings

So it is important that yourmain content comes first.

How can we do that?•Create a source-ordered template•You can never build that with tables•CSS based design with absolute

positioning and floated elements is the key

Get the right tools•If you have Mozilla Firefox:

Firebug:https://addons.mozilla.org/nl/firefox/addon/1843

Web developer toolbar:http://chrispederick.com/work/web-developer/

•If you have Internet Explorer:IETester + DebugBarhttp://www.my-debugbar.com/wiki/IETester/HomePage

Let’s start with a simplecss based design

•http://localhost/so/01

Structure based on 5 divs in a wrapper

Outer wrapper is centered:div#wrapper {position: absolute;width: 900px;left: 50%;margin-left: -450px;text-align: left;

}

Content divs float:div#left {

float: left;width: 190px;padding: 5px 10px 5px 0px;

}div#main {

float: left;width: 490px;padding: 5px;

}div#right {

float: right;width: 190px;padding: 5px 0px 5px 10px;

}

After floats use clear:bothCSS: div.clr {

clear: both;}

XHTML: <div id="left"></div> /* floats left */<div id="main"></div> /* floats left */<div id="right"></div> /* floats right */<div class="clr"></div> /* clears all floats, this ensures footer is below floats */<div id="footer"></div>

The element “footer” is moved below all floating boxes of earlier elements in the source document.

First step of optimisation,let’s group Left & Main:

•http://localhost/so/02

Left div and Main divnow in div Maincontent

New div maincontent,main now floats right

div#maincontent {float: left;width: 700px;

}div#left {

float: left;width: 190px;padding: 5px 10px 5px 0px;

}div#main {

float: right;width: 490px;padding: 5px;

}

Second step of optimisation,re-order Left & Main:

•http://localhost/so/03

Re-order Left and Main:

Content in maincontentnow source-ordered:

<div id="wrapper"><div id="header"></div><div id="maincontent"> /* floats left */

<div id="main"></div> /* floats right */<div id="left"></div> /* floats left */<div class="clr"></div>

</div><div id="right"></div> /* floats right */<div class="clr"></div><div id="footer"></div>

</div>

Third step of optimisation,group Maincontent & Right:

•http://localhost/so/04

All divs between Header and Footer now grouped:

Content divs grouped together:

<div id="wrapper"><div id="header"></div><div id="content">

<div id="maincontent"> /* floats left */<div id="main"></div> /* floats right */<div id="left"></div> /* floats left */<div class="clr"></div>

</div><div id="right"></div> /* floats right */<div class="clr"></div>

</div><div id="footer"></div>

</div>

Next step of optimisation,How to push header down?

•Absolute positioning does the trick!•http://localhost/so/05

Full source-ordered:

All source-ordered:<div id="wrapper">

<div id="content"> /* positioned absolute at 0,100 */<div id="maincontent"> /* floats left */

<div id="main"></div> /* floats right */<div id="left"></div> /* floats left */<div class="clr"></div>

</div><div id="right"></div> /* floats right */<div class="clr"></div><div id="footer"></div>

</div><div id="header"></div> /* positioned absolute at 0,0 */

</div>

The content div is positioned absolute:

div#content {position: absolute;left: 0; top: 100px;

}

Position location is relative to parent absolute positioned element!

The header div is also positioned absolute:

div#header {position: absolute;left: 0; top: 0;

}

Putting it all together in a Joomla! template:

•http://localhost/so/06

How to generate the right H1, H2, H3 tags:

•Add template overrides to your template•http://www.yootheme.com/member-area/

downloads/item/templates-15/template-overrides-15

•More about that in the next session:Template Overrides: Hans Kuijpers

Resources:http://www.webcreatives.nl/jd09nl

Questions?

Thank you for your attention.Meet me at the Dr. Joomla.