Joomla Template SEO
Joomla Template Tutorials
Joomla Template SEO Techniques
I am seeing many people mention that SEO is in the hands of the Joomla template designer. Well being a Joomla template designer I can definitely see what you are talking about and it is true to an extent. However it still has very much to do with the core of Joomla itself, the components and modules and how they are all coded since they will be displayed through the template. It is a group effort and that is what Joomla is all about.
When creating a Joomla template I like to make a simple as possible of a skeleton for all those other things which will be displayed through the template and keep it as sleek and steady as possible.
To do this there are a few things to take into consideration. One of these things is the module load styles you can use to call the Joomla module into the template. Joomla also uses the patTemplate system but I like to do it the old fashioned way still.
To learn more about the patTemplate system for Joomla see this page:
http://help.joomla.org/content/section/21/182/
To learn more about module load styles and other aspects of Joomla site creation, be sure to visit the following URL's:
The Joomla Developer Manual
http://help.joomla.org/content/section/12/125/
This is very useful for anyone who is looking to design templates or may already be doing so. There is also other information here for developers. It will be updated as Joomla evolves and things are changed or added as I have witnessed so far.
Note the mosLoadModule $style loading parameters.
http://help.joomla.org/content/view/33/125/
Here are the template standards which will be added to and modified in time.
http://help.joomla.org/content/view/493/125/
Also, from my experience, a search engine may not scan and rank your full page if it is simply too long. So if you put all the links at the bottom and the user decides to put too much text on it, the search engine doesn't seem to give those sites any ranking based on your sites ranking and they are not associated as heavily. This is where you must decide on the template arrangement.
If you decide to use tables, they can sometimes be useful when used properly, as discussed in the template standards section link above, but they are not usually required due to so many different tags and being hard to debug. They just don't seem very search-engine-friendly.
You can sometimes put an extra <td></td> in at the start of the <tr> like this:
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td></td>
<td width="50%" rowspan="2" valign="top">
<?php mosMainBody(); ?>
</td>
<td></td>
</tr>
<tr>
<td width="25%" valign="top">
<?php mosLoadModules ( 'right', -3 ); ?>
</td>
<td width="25%" valign="top">Some ads can go here</td>
</tr>
</table>
That is just an example of a table that moves the main body of the site closer to the top of the page so search engines are more likely to crawl it.
Otherwise, if you want a tableless design in your Joomla template, you would just use div tags in the right order and float them appropriately with css like this:
index.php
<div class="outer">
<div class="inner">
<div class="main_outer">
<div class="main_inner">
<?php mosMainBody(); ?>
</div>
</div>
<div class="col_outer">
<div class="col_inner">
<?php mosLoadModules ( 'right', -3 ); ?>
</div>
</div>
</div>
</div>
template_css.css
.outer {
width:700px;
margin:auto;
}
.inner {
padding:10px;
width:680px;
}
.main_outer {
float:left;
width:500px;
}
.main_inner {
padding:10px;
width:480px;
}
.col_outer {
float:right;
width:200px;
}
.col_inner {
padding:10px;
width:180px;
}
Take a look at the code above.
See how there is an inner and an outer for each unit in the template? This allows for padding to keep things away from the edges without breaking other parts of the template.
If you add in a <div class="col_top"></div> just below <div class="col_outer"> you will be able to insert a top area where you can have a heading or a graphic image. I like to use that for a rounded corners graphic at the top of the table in some Joomla templates that I design. It seems like the best way for me to get it to show properly in both FX and IE. There are some different ways of achieving this effect but this is the one I find the most stable for me. It is also a way to add a top or bottom graphic to the full template itself as well, and can be used to round its corners off too.
Do you understand the concept I am showing you here with this very simple template outline? It allows for several things.
- Your template is serving the main body first before the side column. This way, if you have a lot of things in the side column or a long article in the body, the search engine can still get a hold of the content on the page first and that is a good thing because it will eat more words and spit out more traffic.
- The outer-inner concept allows for a method of padding the content away from the outer edges of the boxes. If done properly this can protect your template from a whole lot of breaking due to padding, border and margin issues for cross browser compatibility.
- No tables! The absence of tables for the main layout is a very good thing for the newer standards being implemented within Joomla template design.
Once you create a Joomla template that meets the Joomla standards, validates (http://www.w3.org), loads quickly, uses tables properly or not at all, puts the relevant content first, and looks good in at least FireFox and Internet Explorer you just might have something great on your hands. Sounds easy, right?
For more about Joomla SEO you may want to upload this patch to Joomla.
Read up on it at their site and learn the benefits of getting it on your Joomla install and watch your site rise in the ranks!
More to come soon⦠Enjoy!
Learn what you need to do what you want.
Ryan
Date Module for Joomla
TY2U.com News
I wrote this tiny module becuase I couldn't find one that showed the date where I wanted it. It simply shows the date using mosCurrentDate() which is a PHP function in Joomla to display the current date. Many Joomla templates use this to display the date.
How to make your Joomla template keep the menus highlighted.
Joomla Menu Tutorials
Note: Since the writing of this tutorial I have found myself often using another module called Extended Menu. This is a very useful extension but people seem to find it hard to use. I will release a tutorial for it with a link from here soon because it is also capable of making your menus stay highlighted and much more.
Have you ever wanted to have a menu in your Joomla template which stays highlighted when submenu items are selected?
Well now you can!
For example, let's say you have a top menu in Joomla with a link to News. When you click this menu item Joomla will take you to a new page with News on it. Then on the left side you may have another menu which displays the submenus for news such as Updates, Top Stories, News Feeds, etc.
Now the way it works is that when you click News on the top menu it will highlight that menu item. Then when you select News Feeds on the left, for example, it will take you to the News Feeds page and the News Feeds menu item on the left will be highlighted as well as News on the top menu. When you select Top Stories it will highlight and News on the top will stay highlighted and so on.
I have come across this again and since it took me a long time to find the post I thought I would post it here as well because I know I will be running into this again and I am sure you may someday too so I may as well put it here.
How to make your Joomla template keep the menus highlighted.
Step 1 - Put the mysplitcssmenu.php which you can download here (slightly modified to work properly) into your templates directory inside of the template you want to use it on.
Step 2 - In your current Joomla templates index.php just below the line that says:
Add this new line to your template:
Step 3 - In your index.php change the call for the left and top menus as follows:
Change the code for your top menu... it might look something like:
to:
And the left menu just above where it says:
Add this:
Step 4 - The left menu is now the menu items you enter into the Joomla backend as children of the current active top menu. You simply create a new menu item in the main menu and then assign the Parent Item to whichever menu item you want it to appear on.
Step 5 - Edit your template_css.css to your liking.
This is what I did and you can use it as a template for yours if you like:
float:left;
position:absolute;
top:34px;
list-style:none;
width:426px;
text-align:left;
padding:0px;
margin:0px;
}
#navlist #active a:link, #navlist #active a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color:#3e4c77;
background:url('/../images/subhead_bgl.gif') repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
}
#navlist #active a:hover {
color: #3e4c77;
background:url('/../images/subhead_bgl.gif') repeat-x;
}
#navlist a:link, #navlist a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color: #FFFFFF;
background:url('/../images/subhead_bg.gif') repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
border-left:1px solid #769bd5;
}
#navlist a:hover{
color:#3e4c77;
background:url('/../images/subhead_bgl.gif') repeat-x;
}
#navlist li {
list-style:none;
float:left;
}
#subnavcontainer ul{
padding:0px;
margin:0px;
list-style:none;
width:100px;
text-align:left;
}
#subnavlist #active a:link, #subnavlist #active a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#e4eeff;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image:url('/../images/arrow.png');
background-repeat:no-repeat;
background-position:right;
padding-left:2px;
padding-right:2px;
}
#subnavlist #active a:hover {
color:#222b4e;
background-color:#bacae4;
}
#subnavlist a:link, #subnavlist a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#b1caeb;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image:url('/../images/arrow.png');
background-repeat:no-repeat;
background-position:0px 3px;
padding-left:2px;
padding-right:2px;
}
#subnavlist a:hover{
color:#222b4e;
background-color:#bacae4;
}
#subnavlist li {
list-style:none;
float:left;
width:96px;
margin:0px;
padding:0px;
}
For those of you who want to do cross domain linking like me... or maybe there are other uses, to keep the tabs at the top, place this in your Joomla! root index.php file.
Note the sef url here and if you don't use sef, change it to your frontpage component url like this /index.php?option=com_frontpage&Itemid=1.
$parsed_url=parse_url('/$url');
$sub_folder = explode('/',$parsed_url['path']);
$domain=$parsed_url['scheme'].$parsed_url['host'];
if ( $url == $domain.'/' || $url == $domain.'' || $url == $domain.'/index.php') {
header("Location: ".$domain."/component/option,com_frontpage/Itemid,1/");
exit;
}
Joomla Module - Top Authors
TY2U.com News
I know it isn't a Joomla template but I thought it would come in handy for someone.
This Joomla! module will display a list of authors and the number of articles they have contributed with the most articles first.
You can set how many authors it shows from the modules parameters in the Joomla! backend.
Joomla Template Marketing Gear 1.1
Template Releases
This Joomla template was updated. There are a couple of minor fixes.
These fixes include:
- keep white background in content editing boxes when editing content in the Joomla backend
- keep white background in print window when you click the print button on a Joomla content item.
- keep search fieldset inside the template body
- added space to separate articles apart
- added space to top and bottom of inner body content
- added separator color for polls, news items, links etc.
- made font for author and dates smaller to keep it visually separate
Page 3 of 5
