![Page 1: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/1.jpg)
Joomla! SEOTechnical Search Engine Optimisation
![Page 2: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/2.jpg)
René KreijveldInternet developer
![Page 3: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/3.jpg)
Optimising your website for
requires 2 things well setup:•Your content must be in order•Your template must be spiderable and
search engine friendly
![Page 4: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/4.jpg)
Search Engine Optimisation:
75% is content25% is technoloy
![Page 5: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/5.jpg)
This presentationis about technology.
Sorry ;-) ...
![Page 6: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/6.jpg)
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
![Page 7: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/7.jpg)
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]
![Page 8: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/8.jpg)
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
![Page 9: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/9.jpg)
![Page 10: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/10.jpg)
•And this is how a webcrawler sees this website:
![Page 11: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/11.jpg)
![Page 12: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/12.jpg)
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
![Page 13: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/13.jpg)
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
![Page 14: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/14.jpg)
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
![Page 15: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/15.jpg)
Let’s start with a simplecss based design
•http://localhost/so/01
![Page 16: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/16.jpg)
Structure based on 5 divs in a wrapper
![Page 17: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/17.jpg)
Outer wrapper is centered:div#wrapper {position: absolute;width: 900px;left: 50%;margin-left: -450px;text-align: left;
}
![Page 18: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/18.jpg)
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;
}
![Page 19: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/19.jpg)
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.
![Page 20: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/20.jpg)
First step of optimisation,let’s group Left & Main:
•http://localhost/so/02
![Page 21: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/21.jpg)
Left div and Main divnow in div Maincontent
![Page 22: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/22.jpg)
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;
}
![Page 23: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/23.jpg)
Second step of optimisation,re-order Left & Main:
•http://localhost/so/03
![Page 24: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/24.jpg)
Re-order Left and Main:
![Page 25: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/25.jpg)
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>
![Page 26: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/26.jpg)
Third step of optimisation,group Maincontent & Right:
•http://localhost/so/04
![Page 27: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/27.jpg)
All divs between Header and Footer now grouped:
![Page 28: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/28.jpg)
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>
![Page 29: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/29.jpg)
Next step of optimisation,How to push header down?
•Absolute positioning does the trick!•http://localhost/so/05
![Page 30: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/30.jpg)
Full source-ordered:
![Page 31: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/31.jpg)
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>
![Page 32: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/32.jpg)
The content div is positioned absolute:
div#content {position: absolute;left: 0; top: 100px;
}
Position location is relative to parent absolute positioned element!
![Page 33: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/33.jpg)
The header div is also positioned absolute:
div#header {position: absolute;left: 0; top: 0;
}
![Page 34: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/34.jpg)
Putting it all together in a Joomla! template:
•http://localhost/so/06
![Page 35: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/35.jpg)
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
![Page 36: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/36.jpg)
Resources:http://www.webcreatives.nl/jd09nl
![Page 37: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/37.jpg)
Questions?
![Page 38: Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl](https://reader033.vdocuments.us/reader033/viewer/2022060110/555e5887d8b42ad74a8b5289/html5/thumbnails/38.jpg)
Thank you for your attention.Meet me at the Dr. Joomla.