How to read your website’s source code

Written on 10 February, 2014 by Karen Lim-Sam
Categories Search Engine OptimisationWeb Design & ContentTags contentweb design

The source code is the foundation of your website and you should always make it your duty to ensure it's as strong as it should be. Checking, optimising and maintaining your source code will not only ensure your website displays as it should, it will also offer you valuable opportunities for search engine optimisation.

Understanding source code

On the surface, your website will be a collection of carefully chosen images and crafted text boxes. Drill down a layer and you'll find that supporting all of this eye-catching design is the source code. It may be somewhat ugly and basic to look at, but it's thanks to this code that your browser is able to make sure your website is an enjoyable and functional experience for your users. 

The source code is also very important as search engines such as Google and Bing index it. Search engines will use your code to determine where your website should rank in any given query, so it's essential that you optimise it.  

How to display your source code

Displaying your source code is easy. All you need to do is open your website on any browser and click the appropriate command. This differs slightly from browser to browser – depending whether you are using a Mac or PC you can often right click and select 'Show Page Source' or 'Developer' then 'Page Source'. Alternatively, you can navigate to menu items such as Tools or Web Developer and then select 'Page Source'. 

If you can't find the right tool straight away, simply use your browser's help function and it will show how to access your source code. 

Reading and searching your source code

There are several areas you should be checking regularly. These include:

Title Tags

When it comes to search optimisation, title tags are the most important element for you to look at. These show search engines what the title of your page is and are what they use to display your page in the listings. If there's no title tag, you won't rank. It should be placed under the <head> section and look like this:

<title>The keyword-friendly title of your webpage</title>

Meta descriptions

Your source code should also include meta descriptions for each page. These are often used by search engines as the snippets that display in your results. Your description should be limited to 160 characters and look like this:

<meta name="description" content="This is where you want to describe what users will find on your webpage"/>

H1 Headings

These give you the opportunity to highlight important areas of your page – you can use one H1 heading per page. H1 headings should reflect your page's key purpose and look like this:

<h1>Short, relevant heading</h1>

No follows

When you link to another website, you must make sure that you have a nofollow tag in place. This alerts search engines to the fact that you don't wish to pass value to another site in favour of your own. Insert a nofollow tag into your backlinks. It should look like this:

<a href="www.website.com rel=" external nofollow">Link copy</a>

Reading your source code is relatively simple and there are lots of quick wins to implement, so delve into your code and see what you can improve.  If you havve difficulty or would like to speak to someone about refreshing your website, contact Netregistry on 1300 638 734 to speak to one of our consultants.  Alternatively you can get a free website review, where we will discuss over the phone potential improvements to be made to your current website.