Difference between revisions of "Making your site Search Engine Friendly"

From Joomla! Documentation

m (New page: {{cookiejar}})
 
Line 1: Line 1:
 +
{{underconstruction}}
 
{{cookiejar}}
 
{{cookiejar}}
 +
 +
== 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.
 +
 +
On source I find very useful is http://www.joomlaperformance.com/component/option,com_performance/Itemid,52/. Type in the URL of your Web site, and you will get a free analysis of how fast your site loads. I used this site to see what I could change to help it load quicker. 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. Now take a look at Alledia's Bolt template http://demo.alledia.com/bolt
 +
This template uses the same blue bar image about four times! Here's an example of how you can do the same.
 +
 +
'''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 <div id="wrapper"> line:
 +
<source lang="php">
 +
<div id="top_nav">
 +
 +
<jdoc:include type="modules" name="top" style="xhtml" />
 +
 +
</div>
 +
</source>
 +
 +
This will be the container to hold your horizontal menu. Go to your CSS editor page and add this chunk somewhere in the file:
 +
<source lang="css">
 +
#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;
 +
}
 +
</source>
 +
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: <source lang="css">background:url(../images/bar_background.png) repeat-x;</source>
 +
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:
 +
<source lang="css">
 +
.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;
 +
}
 +
</source>
 +
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.

Revision as of 13:53, 13 November 2008

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) 15 years ago. (Purge)

Quill icon.png
 This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.

The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you.

This article was last edited by SpacePyrit (talk| contribs) 15 years ago. (Purge)

Why create a Search Engine Friendly Site?[edit]

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[edit]

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.

On source I find very useful is http://www.joomlaperformance.com/component/option,com_performance/Itemid,52/. Type in the URL of your Web site, and you will get a free analysis of how fast your site loads. I used this site to see what I could change to help it load quicker. 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. Now take a look at Alledia's Bolt template http://demo.alledia.com/bolt This template uses the same blue bar image about four times! Here's an example of how you can do the same.

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.

Retrieved from "https://docs.joomla.org/index.php?title=Making_your_site_Search_Engine_Friendly&oldid=11723"