3. Optimising your website for
requires 2 things well setup:
•Your content must be in order
•Your template must be spiderable and
search engine friendly
6. 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
7. 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]
8. Why you need content
in 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
9.
10. •And this is how a webcrawler sees this
website:
11.
12. 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
13. So it is important that your
main 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
14. 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 + DebugBar
http://www.my-debugbar.com/wiki/IETester/HomePage
15. Let’s start with a simple
css based design
•http://localhost/so/01
19. After floats use clear:both
CSS:
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.
20. First step of optimisation,
let’s group Left & Main:
•http://localhost/so/02
31. 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>
32. The content div is
positioned absolute:
div#content {
position: absolute;
left: 0;
top: 100px;
}
Position location is relative to parent absolute
positioned element!
33. The header div is also
positioned absolute:
div#header {
position: absolute;
left: 0;
top: 0;
}
34. Putting it all together in a
Joomla! template:
•http://localhost/so/06
35. 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