On-page Optimisation
It is now time to start optimising your web pages. By this stage you should have a good idea about the keywords you wish your site to rank for and some knowledge of who your main competitors are. This unit will show you how to use this information when constructing web pages.
By the end of this unit, you should be able to:
- optimize the page title of HTML pages
- optimize the Meta tags of HTML pages
- optimize your page headings
- write keyword focused page content and copy
This unit assumes that you have read the last two units of the course, and that you know how to construct a basic HTML web page.
10.1 On-page factors
As we explained in earlier units of the course, on-page factors relate to the code and content that actually appears on your web pages. In SEO, on-page factors are usually distinguished from off-page factors such as external links. Unlike external links, on-page factors are largely under your control as a webmaster, web designer or site owner. This means that they are fairly easy to manipulate in order to improve your search engine visibility.
In this section we will be looking at how to optimise such basic things as:
- page titles
- Meta tags
- headings
- page copy
- img alt attribute
In simple terms, the key to optimising your web pages is to focus all of these areas around the main keywords for your product or services - assuming that you have followed the instructions set out in previous parts of this course and have already researched the keyphrases that your website should be targeting.
Note: focusing your pages around the wrong keywords can potentially have a detrimental effect on search engine visibility, so make sure that you have researched your market and competitors prior to attempting to optimise your site.
Before we cover the above topics, let’s have a basic look at the areas of a HTML web page that concern us:
- Title tags
- Meta tags dealing with ‘keywords’ and ‘description’
- Internal links (including the anchor text used in internal links)
- Headings (particularly the first heading <h1></h1>)
- Page copy
10.1.1 Page Title
The Page title is the title that appears at the top of your browser when you visit a web page. It is the first thing that a search engine sees and is therefore a particularly important part of the page from an SEO point of view.
It is one of the strange facts of Internet life that people often forget to include a title in their web pages. No doubt you have come across one of the countless pages on the Internet that simply read ‘Untitled Document’ when you view them in your browser. By failing to give your web pages a title you miss a golden opportunity to communicate what they are about to search engines and Internet users.
The page title appears in title tags (<title></title>) in the header section of your HTML web page as follows:
<head>
<title>Put your page title here</title>
</head>
It is particularly important that the page title contains the main keywords for the product or service that you offer on that page.
For example, the title of this page looks looks like this:
<title>On Page SEO Part 1, SEO Training Basics</title>
This title will appear in search engine results as an active link to our homepage:
Besides letting the user know what the page is about – which is an important function of the page title and should not be neglected – the title tag also signals to the search engine that our homepage is relevant for the following keywords:
- On
- Page
- SEO
- Part
- 1
- Training
- Basics
Note how these words can be combined in numerous ways to make more complex keyphrases, e.g.:
- seo training
- on page SEO
- on page SEO Training
- basic SEO Training
This is a good principle to follow as it will help your page appear relevant for a variety of search queries.
To optimise your page title, take the following steps:
- Follow the instructions for researching keywords outlined in the ‘Keywords’ section of the course.
- Make a list of keywords for the page that you are optimising.
- Write a title for the page that contains all your keywords.
- Insert this title between the title tags of your HTML page.
Note: It is generally a good idea to limit the number of keywords/keyphrases you wish to make a page rank for to about a handful (ideally 3 or 4 closely related terms). Keep pages highly focused and use the most relevant and most searched terms for the product first. If you are targeting more than 4 keywords/keyphrases consider making another page that to target these additional terms so that each page is focused and highly relevant.
TASK 1: BEGINNING TO OPTIMISE YOUR HOMEPAGE
We will now begin the practical optimization of web pages by looking at your homepage.
If you already have a homepage, it would be a good idea to make a copy of your site and save it locally somewhere on your hard drive before you make any changes. Do not upload any changes made to your site to your hosting server at this stage, as you will be making further alterations to your homepage in later tasks.
If you do not have a homepage at this stage, construct a basic web page for your product using a HTML editor like Dreamweaver or a basic text editor like Windows Notepad.
If you are using Notepad to construct your page, make sure that you save the document with its default extension (.txt) for now as we will be adding to it in later tasks. In order to view your finished page in as a web page, you will have to change its extension to .htm or .html. To save time, you can cut and paste the following basic template into notepad then save it with the name ‘index’:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
TASK 1A: OPTIMISING TITLE TAGS
Now optimise the page title on your homepage by taking the following steps:
- Make a list of the commonly searched keyphrases for the products or services that your homepage offers.
- Insert your title between the title tags of your HTML page.
- <title>put your page title here</title>
Save your work locally for future editing. Do not upload it to your server.
Congratulations, you have just made your first practical attempt at optimising your website!
10.1.2 Meta Tags - ‘description’
Meta tags offer information that does not actually appear on the web page when viewed in a browser. The prefix ‘Meta’ comes from the Greek for ‘above’ or ‘beyond’, and in this context refers to information that is ‘beyond’ our view and that we do not normally need to see. These tags include the keywords and description tags and even though these tags have been devalued somewhat there is still good reason to use them.
Why include a meta description tag
Although the meta description generally has no direct impact on search engines primary results, you might want your web pages to meet with current accessibility standards, if so, then it should be included. I say generally because sites that are accessible will achieve higher rankings through
Google Accessible Search than those that are not. Accessibility and the way it impacts search results will be discussed in future tutorials.
When you omit a description tag search engines will create one for you. This is done by selecting snippets of text from the page that are relevant to the users search. You have no control over which snippets will be used which can result in descriptions made from multiple snippets that can appear incongruent and confusing.
The meta description appears in the head of your HTML page just after the title tag:
<head>
<title>YOUR TITLE HERE</title>
<meta name="description" content="YOUR PAGE DESCRIPTION HERE">
</head>
Although Meta tags contain information that people don’t normally see, the description Meta tag offers information that is both visible to search engines and visible on some search engine results. Google, for example, displays the actual text that appears in your Meta page description just below the link to your page. Bear this in mind when you write your page description, as search engine users use it to learn to what your web page is about.
With this in mind, the following principles should guide you when optimising the Meta description tag on your web pages:
- the Meta description tag can, but does not need to, incorporate your main keywords however it should reinforce what you have already said in your title.
- whether you use your main keywords or not, the description tag should clearly describe what the page is about.
- the page title and description should work together as a benefit driven call to action designed to engage searchers and entice them to click through to your site.
TASK 2A: OPTIMISING THE DESCRIPTION META TAG
Now optimise the description Meta tag on your homepage. Open the local copy of the homepage you saved after completing Task 1, then take the following steps:
- Write a page description that will describe the page content and compliments the title.
- Insert your description into the correct HTML tag.
Save your work locally for future editing. Do not upload it to your server.
10.1.3 Meta ‘Keywords’
Many crawler based search engines, including Google, now ignore the meta keywords tag completely. But again to meet accessibility standards one should be included.
The reason that many search engines ignore the tag is because too many sites ‘spammed’ the tag in the early days of search engines. These sites attempted to rank for numerous phrases (sometimes phrases that they were not even relevant for) by cramming every keyword they could think of into their Meta tags. Even today, you will still encounter sites that have an incredibly long list of keywords in their Meta keywords tag.
The first rule to remember when optimising your keywords tag, therefore, is don’t ‘spam’ it. Even those few search engines that still index the tag will only read a limited amount of characters. Try and limit the number of characters (not words) to about 70 or 80, or even fewer if possible.
Despite the fact that a search engine giant like Google ignores the keywords tag, it is still a good idea to use the tag in order to improve your chances of being found in those search engines that still read it. In an HTML page, the keywords tag appears in the header section below the title tags as follows:
<head>
<title>YOUR TITLE HERE</title>
<meta name="description" content="YOUR PAGE DESCRIPTION HERE">
<meta name="keywords" content="YOUR KEYWORDS HERE">
</head>
- the keywords tag should employ the main keyphrases for your product or services and should be synchronous with your title tags and page description.
- keywords should be limited to words that appear on the page
- each keyword or keyphrase should be separated with a coma
- you do not have to use capitals in your keywords as search engines don’t treat them as case sensitive
TASK 2B: OPTIMISING THE KEYWORDS META TAG
Now follow the above steps and optimise the keywords Meta tag on your homepage in the local copy of the homepage you saved after completing Task 2A. Don’t forget to save your work
10.1.4 Internal Links
Internal links are, of course, the links on your site that point to other pages on your site. These are the means by which people navigate around your website. We will cover links more fully in the next unit. At this stage, the important thing to remember when optimizing internal links is to use the keyphrases for the page that you link to in the anchor text of the link. In this way, the link passes relevancy on to the page that it links to.
For example, if your homepage sells gift products and includes a link to another page that aims to rank for the term ‘christening gifts’, your anchor text might appear as follows:
<a href=“http://www.giftsforsale.co.uk/christening.html”>Christening Gifts</a>
10.1.5 Headings
In this context, your page headings are the words that appear between HTML heading tags. These tags are usually run in numerical order starting with <h1></h1> and moving up through <h2></h2>, <h3></h3>, and so on up to <h6></h6>.
The heading to pay particular attention to is your first heading. This is one of the first things that both search engines and Internet users see.
Your first page heading should be placed in the body section of your HTML page. Place it between <h1></h1> tags just before your page copy, i.e.:
<head>
<title>PAGE TITLE</title>
<meta name=“description” content=“PAGE DESCRIPTION”>
<meta name=“keywords” content=“PAGE KEYWORDS”>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>YOUR HEADING HERE</h1>
<p>PAGE COPY HERE</p>
</body>
Here are the main points to follow when writing your page heading:
- place your first heading in <h1></h1> tags before your page copy
- make sure that this heading employs the keywords that you want your page to rank for and that it reinforces the keywords in the header section of your HTML page
The same principles can be applied to other page headings of course.
Note: Remember that, unlike the information that appears in your Meta tags, visitors can read your first heading. If you have too many keywords, or if the use of all your keyphrases in this heading makes it appear too long or clumsy, then just write a heading that contains your main keyphrase. You can perhaps put your other keyphrases in later headings.
TASK 3: OPTIMISING HEADINGS
Now open your saved homepage and add a first page heading which follows the principles outlined above. Save your work then move on to optimising the page copy
10.1.6 Page copy
When we refer to copy, we are referring to the actual words and information that appear on screen when a visitor reads your page.
In some respects, writing copy is the most difficult part of optimising your web pages as it involves knowing the principles of marketing, ‘proper’ English, and SEO. We can’t possibly cover the basics of effective web copywriting in this short section, so the next unit will take a more in-depth look at the area. Nevertheless, since page copy is an on-page factor, here are some basic tips to help you write optimised web copy:
- keep it informative.
People use the Internet to gain information as well as to purchase products. Give them what they want. - keep it short and to the point.
People don’t like to read a lot of scrolling text on screen. - make it ‘scanable’.
People tend to ‘scan’ web pages rather than read their entire content. Break your copy into sections and put your most important points in the first sentence of each paragraph. - keep it plain.
Grandiloquence, digression and circumlocution are superfluities that epitomise impenetrable online prose! - call to action.
If you are selling a product or service, remember to include a ‘call to action’ somewhere on your page (e.g. ‘buy now’, ‘call today’, ‘email us for a free consultation’, etc.). - keep it professional.
Always proofread your copy for spelling mistakes and grammatical errors.
One important thing to note, however, is that SEO copywriting differs slightly from normal Internet copywriting. Whereas normal copywriting simply markets, or informs someone about, a product or service, the aim of SEO copywriting is to make your page appear more relevant for your chosen keywords by employing those keywords in your page copy in such a way that it improves the pages relevance and is wholly self descriptive.
As we noted earlier in this course, keyword density is a measurement by percentage of how many times keywords appear on a page in relation to other text. However search engines don’t count keywords in this way. However it is important that you get your keywords into the areas we have already discussed plus featured prominently in the first paragraph, in bold text and in lists.
The key to writing search engine friendly copy is to ensure that you get your keywords into these areas while still writing in plain, easy to understand English. That way, you satisfy both the demands of the search engine and the needs of the individual Internet user. The main purpose of SEO copywriting is to engage the reader from the first headline to the closing call to action. Along the way explain ‘What’s In It For Me’ i.e. clearly explain what benefits potential customers will enjoy by using or switching to your products or services.
Here are the main principles you should follow when writing search engine friendly copy.
- you should have at least some text in your web page, as this will give the search engine something to latch on to when attempting to determine the relevance of your page for particular terms.
- your copy should employ the same keywords used in the page title, Meta information, and page headings.
- although your text should include the keywords you are targeting, write naturally and do not spam keywords by repeating the same phrases over and over again.
- make sure that your copy is still written in plain English and still satisfies the aim of informing the Internet user about your products and services.
Note: placement of text can be important. Aim to make your main page copy one of the first things a search engine sees by placing it just under your first heading. If you have a table or css div to the left of your main page copy, make sure it is not full of text that takes precedence over your main page copy.
Page copy usually appears in paragraph tags <p></p> on your HTML page, as in the following example:
<body>
<h1>YOUR FIRST HEADING</h1>
<p>FIRST PARAGRAPH OF PAGE COPY HERE: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>SECOND PARAGRAPH, and so forth</p>
</body>
TASK 4: SEO COPYWRITING
Your task is to write a short, two-paragraph description of your main products and services (no more than 300 words for the purpose of this task, although your homepage can include a lot more text) for your homepage in such a way that it uses the main keywords for that page. Keep your prose simple and do not ‘spam’. Once you have finished, place it in the relevant section of your HTML page and save your work.
10.1.7 img alt attribute
The contents of an image alt attribute, often mistakenly called an alt tag, are no longer considered when calculating the relevancy of a page by any of the major engines. However, improper use of the alt attribute can adversely affect the rankings in the SERPs. As search engines evolve they continue to catch up with SEO tactics that are intended to improve rankings by gaming their algorithms while damaging the visitor experience.
The purpose of the alt attribute is to provide alternative text descriptions of your images. An example of an alt attribute used for a company logo might look like this:
<img src="images/logo.jpg" width="100" height="78" alt="XYZ SEO Company " />
From an accessibility point of view every <img> tag should have an alt attribute that describes the image, if that provides an opportunity to use keywords appropriate to the page so much the better. Descriptive alt attributes, headings and the text close to the image can improve rankings within image search. If you have a large catalogue of products this can be an important and sizable source of traffic. Rather than use the alt attribute as an excuse for keyword stuffing use them to describe the content of image.
Note. The last thing that visually impaired visitors using screen readers want to listen to a long list of keywords stuffed into every image. Also stuffing every keyword you can think of into 1 pixel by 1 pixel invisible image is, and always has been, spam.
Images that are purely decorative require no alt text but still require an alt attribute. That is to say, the required alt attribute should have a null value: alt="". Don't define alt=" ", the alt attribute should be an empty string, not a space. If your layout uses invisible images to help with positioning, for example:
<img src="spacer.gif" width="1" height="10" />
Change it to:
<img src="spacer.gif" width="1" height="10 " alt="" / >
Images that are purely decorative should be treated the same way. For example:
<img src=" top-right .gif" width="40" height="20" />
Change it to:
<img src=" top-right .gif" width="40" height="20" alt="" / >
These changes might seem a bit pedantic, especially if you don’t show product images. However there are accessibility issues to be concerned about and one should also strive to make HTML code standards compliant. This can cause a lot of work for webmasters trying to rectify things after a site has gone live especially if every page contains multiple html errors. How Accessibility impacts SEO will be discussed in future tutorials, all that needs to be said at this juncture is that accessible sites are generally more search engine friendly and can be viewed on a wider selection of devices and browsers.
Congratulations, you have now carried out a basic optimization of your first web page. Repeat the above steps to optimize your other web pages.
Remember that search engines rank individual pages and not websites as a whole. This means that you should not use exactly the same keywords as your homepage on other web pages. You should use your other pages to target different keywords related to your products or services.
You can now upload your saved page to your hosting server if you like.
SUMMARY:
- on-page factors refer to the content on your individual web pages
- the easiest way to optimise your web page is to employ the keywords and keyphrases you wish the page to rank for in key areas of that page
- your page title, Meta tags, page heading and page copy should all mention your keyphrase without resorting to being overly repetitious.
10.2 Conclusion
Optimizing on-page factors is an essential step in the SEO process and one that you can easily perform on your own web pages. By following the principles outlined in this unit you can now start optimizing every page on your site.
In the next unit, we will look at links and the external factors that influence your search engine ranking.
REFLECT:
What is your understanding off the SEO implications of the following?
- On-page factors
- Title tags
- Meta tags
- SEO copywriting
Course Index
