Wednesday 14 August 2013

Some seo basics

In my previous post I mentioned seo - search engine optimization. This is a big topic area to cover, so in this post I'm going to talk a little about what you can easily do yourself to improve your website's search engine ranking by making your website load faster.
.
dilbert seo cartoon
Cartoon by Scott Adams

Firstly, I would advise everyone with their own website to learn a little about html - this is the language that most websites are written in. You don't need to become an expert, you just need to know a few basics such as html layout format, what certain characters within the coding do, what certain bits of coding do, how to add/delete/move content, how to add images, etc. Once you are competent with the basics and begin to understand the components of your webpage, you can quickly and easily make improvements that will help your seo. There is lots of helpful advice on the internet about html. I particularly like the W3Schools website as it has loads of free tutorials, working examples and bits of coding that you can easily adjust to use in your own website. I found it helped me greatly when learning html, and I still use it now if I am unsure of bits.
So assuming you now know your way (even just a little) around a website, what should you do to help your seo?


W3C Compliance

Firstly, check that each webpage is W3C compliant using the W3C markup validation service. This free tool will tell you where there are coding errors in your webpages. It is then up to you to fix the errors. Now, coding errors aren't the end of the world - your webpages and website may still function perfectly well, even with errors as many browsers are able to compensate for certain errors (missing end tags, etc.). Although I don't have evidence that Google penalizes sites with lots of coding errors, I'm pretty sure that somewhere within its 'ranking algorithms' will be a section on W3C compliance. Why? Because sites that are W3C compliant give the user's browser less work to do (filling in missing coding gaps, etc) and so the page will therefore load that little bit faster. And page-loading speed is definitely a factor in Google's ranking algorithms.


CSS files

Once your site is as W3C compliant as you can make it (there may be certain items you can do nothing about), it's time to look at the order of your webpage coding. Most webpages today are made up of at least two files - the html file for the page content, and the css file for the page layout (or three if you include js files, but more about them later). Again, check out the W3Schools site for information about css files if you are not sure what these are.
In a nutshell, when your webpage is loading on a user's computer, bits of information are sent back and forth between the browser on the user's computer and the server on which the website is stored. The html information is sent to the browser top-to-bottom, i.e. the information at the top of the page is sent first, information at the bottom is sent last.
So, it makes sense that your css information within your html page should be near the top of the page within the html coding, somewhere within the <head> tag. As soon as the browser receives the css location information, it will request the file and begin rendering the page layout and background, etc. This way, the browser will know where on the page to put the information that it is going to receive in the rest of the html file.


Javascript files

This is the opposite of where you should be putting your javascript information, aka the references to your js files. What are javascript (js) files? These are pieces of code saved as separate files that your html webpage file can reference. So, for example, my website uses a javascript file called linkfader.js which simply gives links on my website a smooth fade-in/fade-out effect when they are hovered over. Even though the effect is simple when you look at it, the coding required to achieve it is quite long and so it is kept neatly in its own little file separate from the html coding. When the user's browser comes across any references to js files in your html coding, the user's browser will call on the server to send it these files.
One of the problems with js files is that they can sometimes be pretty large, and so can take a long time to load - I'm talking half a second here when I say a long time, not minutes or hours. But half a second can have a big impact on how fast Google thinks your website is, and so can therefore have an effect on your website's ranking.
So what do we do with js files? They may be fundamental to your website and so you cannot just get rid of them. The answer is to put them at the bottom of your html coding instead of near the top. Without making things too complicated, browsers can download and 'action' most pieces of coding simultaneously, i.e. they can render (show) a webpage's written content at the same time as they are still downloading the image that accompanies the written content, plus all the other bits that make up the webpage - links, menus, headings, etc. However, once the browser sees that a js file is required - everything stops. Nothing else happens until the browser sends a request to the server for the js file, the js file is sent to the browser, the browser implements the js file on the webpage, and then everything in the remainder of the html file resumes. Consider that your webpage may have multiple js files - mine has twelve plus my Google tracking code which is itself a js file - so thirteen in total.
Most of these js files should be placed at the foot of the page. They should be the very last item above your </body> tag. The exception to this is your Google tracking code - leave this at the top of the page within your <head> tag.
By placing your js file references at the foot of the page, the js files will still be loading during the first second or two that your site visitor is looking at your webpage, but they will never know because the js files are not 'seen' by the user. You, however, will see a definite increase in page load time. Mine increased from 1.5 seconds to 1 second in some instances. This is because the page is able to load without starting and stopping for all of the js files in the middle. The js files usually do fancy little tricks on the webpage that the viewer will not need (or notice) for the first 2-3 seconds of viewing a webpage. It is important to give the user the information they are looking for as soon as possible - the fancy tricks can come later. Okay, so the user may not notice much difference between a webpage that takes 1.5 seconds to load to one that takes only one second to load, but if your webpages are taking 2-3 seconds to load, this is the first thing you should try in order to improve performance.


Remove unnecessary js files

Although I have yet to do it fully with my site, you should also remove any unnecessary js files from the html. For example, if you are using a base html file to create multiple webpages, with all necessary js files for your site within it, remove any unnecessary js files for each particular page. Don't just have all js files on all site pages as they all take time to load - time which will have an effect on your Google search ranking.
So there are some basic tips which are pretty easy to implement. Oh, and one last one - if you are new to html and are scared of messing up your website if you go moving things around - create a test page based on one of your existing webpages titled /testpage.html or similar. To do this, simply do a 'save as' of one of your existing webpages, make the changes and upload it to your server. Then type in your browser's address bar 'example.com/testpage.html' to check everything still works okay. If so, make the same changes for your other webpages. Don't forget to delete the 'testpage' from your server when you are finished so that Google doesn't index it.

This is just one of the things I did to enable DJ Surveying to rank high for the search term 'asbestos survey'. I will give more helpful tips in the forthcoming weeks.
My next post will probably be based around Google's PageSpeed service and how it can further help improve you webpage loading speed.