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

  • Published on

  • View

  • Download

Embed Size (px)


Presentation on Joomla!Days Netherlands by Rene Kreijveld


  • Joomla! SEOTechnical Search Engine Optimisation

  • Ren KreijveldInternet developer

  • Optimising your website for

    requires 2 things well setup:Your content must be in orderYour 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 pagetitleWrite an introductionary paragraph with

    keywords about your subjectUse H1, H2 and H3 tagsAvoid structures in your content like tables

    and framesUse alt and title tags for links and imagesUse Meta DescriptionsUpdate 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 cant read images- it doesnt understand Javascript- it doesnt understand Flash- it doesnt understand CSS

    Lets take a look at

  • And this is how a webcrawler sees this website:

  • Source-ordered is importantProminence to keyword optimized sectionsSpiders see unique page elements before

    sitewide elementsPlace searchable elements above blocks

    that crawlers cant read (flash etc.)No undesired elements in search resultsImportent content loads firstBetter rankings

  • So it is important that yourmain content comes first.

    How can we do that?Create a source-ordered templateYou can never build that with tablesCSS based design with absolute

    positioning and floated elements is the key

  • Get the right toolsIf you have Mozilla Firefox:


    Web developer toolbar:

    If you have Internet Explorer:IETester + DebugBar

  • Lets start with a simplecss based design


  • 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: /* floats left */ /* floats left */ /* floats right */ /* clears all floats, this ensures footer is below floats */

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

  • First step of optimisation,lets group Left & Main:


  • 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:


  • Re-order Left and Main:

  • Content in maincontentnow source-ordered:

    /* floats left */

    /* floats right */ /* floats left */

    /* floats right */

  • Third step of optimisation,group Maincontent & Right:


  • All divs between Header and Footer now grouped:

  • Content divs grouped together:

    /* floats left */ /* floats right */ /* floats left */

    /* floats right */

  • Next step of optimisation,How to push header down?

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

  • Full source-ordered:

  • All source-ordered:

    /* positioned absolute at 0,100 */ /* floats left */

    /* floats right */ /* floats left */

    /* floats right */

    /* positioned absolute at 0,0 */

  • 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:


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

    Add template overrides to your template


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

  • Resources:

  • Questions?

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


View more >