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

  • Published on

  • View

  • Download


Presentation on Joomla!Days Netherlands by Rene Kreijveld


Joomla! SEOTechnical Search Engine OptimisationRen KreijveldInternet developerOptimising your website forrequires 2 things well setup:Your content must be in orderYour template must be spiderable and search engine friendlySearch Engine Optimisation:75% is content25% is technoloyThis 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 frequentlyHow 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 CSSLets take a look at www.joomla.orgAnd 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 rankingsSo 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 keyGet the right toolsIf you have Mozilla Firefox:Firebug: developer toolbar: If you have Internet Explorer:IETester + DebugBar Lets start with a simplecss based designhttp://localhost/so/01 Structure based on 5 divs in a wrapperOuter 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:http://localhost/so/02 Left div and Main divnow in div MaincontentNew div maincontent,main now floats rightdiv#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: /* floats left */ /* floats right */ /* floats left */ /* floats right */Third step of optimisation,group Maincontent & Right:http://localhost/so/04 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:http://localhost/so/06 How to generate the right H1, H2, H3 tags:Add template overrides to your template about that in the next session:Template Overrides: Hans KuijpersResources: you for your attention.Meet me at the Dr. Joomla.