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

Revision as of 11:43, 27 November 2009

Page Actively Being Edited!

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" or "bots" to harvest your pages. These bots cannot harvest things that are created/triggered by javascript, or 'see' images (though they do check alt tags) and don't play well with flash files if at all. While all these things may make the site look better, they do little to nothing in terms of SEO (search engine optimisation).

Keywords[edit]

More about keyword density than the meta tag which is largely ignored by large search engines.

Use Semantic HTML[edit]

Use semantic HTML - only 1 H1 per page for the most important header etc.

Use links in your content[edit]

Have good links inline in text (articles) and avoid the use of things like 'click here' as the text that displays for a link. You want to try and have something that conveys the gist of the content of the page that the link points to.

Have a structured or planned navigation[edit]

having a good navigation system is hugely beneficial for allowings bots to effectively crawl your site. (joomla goes a long way for doing this for you when used correctly so thats a big bonus).

Have a sitemap[edit]

Sitemap?

Things to remember[edit]

That anything that requires a login will not be 'seen' by a search engine.
That this article only just starts to scrape the surface.
That frequent maintenance and updates are a big part of SEO.
That SEO is only the start - it might help people find your site through search engines but you've got to work out how to get them to stay or come back or use your site.

@@ Line 1: / Line 1: @@
-{{underconstruction}}
+{{inuse}}
 {{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.
+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" or "bots" to harvest your pages. These bots cannot harvest things that are created/triggered by javascript, or 'see' images (though they do check alt tags) and don't play well with flash files if at all. While all these things may make the site look better, they do little to nothing in terms of SEO (search engine optimisation).
-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.
+== Keywords ==
+More about keyword density than the meta tag which is largely ignored by large search engines.
+== Use Semantic HTML ==
+Use semantic HTML - only 1 H1 per page for the most important header etc.
-== Optimizing a Template for SEO ==
+== Use links in your content ==
-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.
+Have good links inline in text (articles) and avoid the use of things like 'click here' as the text that displays for a link.  You want to try and have something that conveys the gist of the content of the page that the link points to.
-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.
+== Have a structured or planned navigation ==
+having a good navigation system is hugely beneficial for allowings bots to effectively crawl your site. (joomla goes a long way for doing this for you when used correctly so thats a big bonus).
-'''Modules and Menus'''
+== Have a sitemap ==
-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.
+Sitemap?
-'''Editing the Template'''
+== Things to remember ==
-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:
+That anything that requires a login will not be 'seen' by a search engine.<br />
-<source lang="php">
+That this article only just starts to scrape the surface.<br />
-<div id="top_nav">
+That frequent maintenance and updates are a big part of SEO.<br />
+That SEO is only the start - it might help people find your site through search engines but you've got to work out how to get them to stay or come back or use your site.<br />
-<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.
-== 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:
-<source lang="php">
-<?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);
-}
-?>
-</source>
-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".