Actions

Making your site Search Engine Friendly

From Joomla! Documentation

Revision as of 10:28, 14 November 2008 by SpacePyrit (Talk | contribs)

Documentation all together tranparent small.png
Under Construction

This article or section is in the process of an expansion or major restructuring. You are welcome to assist in its construction by editing it as well. If this article or section has not been edited in several days, please remove this template.
This article was last edited by SpacePyrit (talk| contribs) 5 years ago. (Purge)

Why create a Search Engine Friendly Site?

To start off this article, I want to give an answer to this question. If your Web site is anything like mine, then your biggest visitor is an engine bot. In order to add your page, a search engine (like Google) will send out "crawlers" to harvest your pages. These crawlers cannot harvest JavaScript, images, of Flash files well if at all. While these may make the site look better, it is obsolete when it comes to SEO. SEO (Search Engine Optimization) is a big topic. There are many ways to implement it, but nothing is set in stone. SEO can become a completely separate topic by itself, but I want to use it to help you create a search engine friendly site, then you can focus on improving your page rank.

Now that we know how search engines act, let's see how we can use it. Let us take our focus first on images. Images make a site look more stylish, but they tend to slow the site down. For example, a Web site with loads of images will load much slower than sites with almost none. When you visit a Web page, your browser will have to receive the needed information to display the site - including images. The browser will then display the site and begin caching different parts of the page. A cache works like a flash drive, it can only hold so much, but it loads ten times faster. As a result, the more images your Web site has the more your browser has to cache. The three templates that are included in the default Joomla! installation are built to suit many different needs and are, therefore, relatively slow.


Optimizing a Template for SEO

Now, be prepared. This part gets a little heavy. You can complete this with little or no knowledge of HTMl and CSS, but you need to read this carefully. For space's sake, I will not explain how to create a template from scratch, but merely explain how to take any template and help it to load faster.

When a browser loads a page, it makes a number of HTTP requests. The browser must send out a different request for each item in a page. By re-using images instead of creating new ones, you can make your page load faster.

Modules and Menus These are probably the most used extensions in a Joomla site. Let's see how to use the same background image in a horizontal menu and a basic module. Open up your favorite image creator (mine is sadly Microsoft Paint, yeah I'm pretty cheap!). Set the image field to these settings: 1px in Width and 55px in Height. These settings will help in faster loading. Color your bar in any way you like, but keep it simple. Mine was just a basic black with highlights at the top. Save it as bar_background.png. Then upload it to the image folder of your template. Now we get into some CSS editing.

Editing the Template

The CSS file will look different depending on which template your using, but we should not have to worry about any of that since we will create totally new setups. Login to the back-end of your site and got to Exstension>>Template Manager>>your template>>Edit CSS. Select the main CSS file (which is usually template.css) and you can begin editing. You will probably also need to edit your HTML file. So open up another tab and repeat the same steps above except choose to Edit HTML instead of CSS. In your html file, add this line below your
line:
<div id="top_nav">
 
<jdoc:include type="modules" name="top" style="xhtml" />
 
</div>

This will be the container to hold your horizontal menu. Go to your CSS editor page and add this chunk somewhere in the file:

#top_nav {
float:left;
width:100%;
height:55px;
padding:0;
margin:0;
background:(your background image);
text-align:right;
border-top:1px solid #444;
}
 
.moduletable_nav {
font:1em Georgia, Helvetica, Verdana, Arial, sans-serif;
text-align:right;
}
 
.moduletable_nav ul {
list-style:none;
white-space:nowrap;
float:left;
padding:0;
margin:0;
width:100%;
}
 
.moduletable_nav li {
float:left;
margin:0;
padding:0;
}
 
.moduletable_nav li a {
float:left;
display:block;
margin:0;
padding:7px 10px 6px 10px;
list-style-type:none;
border-right:1px solid #555;
border-bottom:none;
}
 
.moduletable_nav a:link, .moduletable_nav a:visited {
color:#ccc;
text-decoration:none;
margin:0;
}
 
.moduletable_nav a:hover, .moduletable_nav li#current a {
color:#eee;
background:#232323;
text-decoration:underline;
}
Okay, so what does all this mean? The #top_nav element holds all the styles for the container you just created in your html file. Replace this line: background:(your background image here) with the URL style. The syntax is:
background:url(../images/bar_background.png) repeat-x;

The repeat-x will ensure that your skinny little image will reach all the way across the bar. You can change some of the color styles to suit your needs. Just make sure you add _nav at the end of the .moduletable element. It will become important later.

Now we need to set up the basic module. Here's the setup:

.moduletable_box {
font:1em Georgia, Helvetica, Verdana, Arial, sans-serif;
border:1px solid #444;
border-top:none;
margin:0.5em 0 0.5em 0;
background:#fff;
}
 
.moduletable_box h3 {
padding:5px;
margin:0;
color:#eee;
background:#313131 url(../images/bar_background.png) repeat-x;
}
 
.moduletable_box li {
margin-left:1.5em;
list-style-type:disc;
color:#5a4e41;
}
 
.moduletable_box a:link, .moduletable_box a:visited {
color:#006600;
text-decoration:none;
border:none;
}
 
.moduletable_box a:hover {
text-decoration:underline;
}

This will create a nice little box that helps the site load quicker. Again, you can change the styles and keep the _box suffix at the end.

Publish the Modules You have the code, now what? Now you get to do the easy part, configure the modules. Go to Extensions>>Module Manager. You should already have a module published called Main Menu. Open this one for editing. Once it is open, there will be some parameters on the right, set the Menu Style to List, Always show sub-menu items to no, and the Module Class Suffix to _nav (note: the last one will be under the Advanced Parameters section). Oh, and make sure you have the Show Title set to off. Save that and then create a new module. Hit the "New" button and choose the Custom HTML option. Name the menu whatever you like. Follow the same steps above except set the Module Class to _box. Add some text to the module and publish and save it. Open up your front-end and bingo! You should see your new menu and module.

Site Configuration

Now that you know how to reduce images, let's focus on reducing file sizes. One of the biggest files in your Joomla are JavaScript files. While these types of files make a site "neat", it can make the site slow and harder for a search engine to read. Joomla currently does not have any easy way to "turn off" the mootools JavaScript files. If you do not need these script files, then you can use this to "turn off" all JavaScript files:

<?php
// Remove mootool sripts for guest and registered
$user =& JFactory::getUser();
if ($user->get('guest') == 1 or $user->usertype == 'Registered') {
    $headerstuff = $this->getHeadData();
    $headerstuff['scripts'] = array();
    $this->setHeadData($headerstuff);
}
?>

Insert this into your HTML page. Make sure it is located somewhere the "<jdoc:include type="head" />".

Gzip Joomla has a great built in Gzip function. This will compress your site before it is sent out, making the site load even faster! Login to the back-end and go to Site>>Global Configuration>>Server. There will be a parameter named GZIP Page Compression. Make sure the button is set to "yes".