Top ten on-page search optimisation tips
Do you want your pages to work harder in search engine results?
Here is a quick list of ten things you could do to your pages that will guarantee that they rank higher in pretty much every search engine. There are many more parts to successful search engine optimisation than the brief topics outlined here (such as link building and content creation/optimisation) - but get these 10 simple steps right and the rest will follow. This article assumes that you already have some knowledge of html and web development in general. If you don’t there are many good tutorials on html, css and other web development skills available on the web.
- Have meaningful, keyphrase rich file names
- Make use of the
<title>tag - Use
<h1>-<h6>tags to structure your content - Make liberal use of html lists
- Highlight relevant keywords and phrases with
<em>and<strong>tags - Link out to relevant web pages whenever you can
- Use descriptive text within hyperlinks
- Keep any javascript and css in external files
- Use descriptive text in image
altattributes - Validate your pages
-
Have meaningful, keyphrase rich file names
File names matter. The name of your html files (asp, aspx, php, jsp etc. included) should be relevant to the content of the page and include your main keywords (for which you want to rank). Don’t abbreviate words or use acronyms, use the full words separated with hyphens (spaces in URLs are not good). If your site uses dynamic pages that are generated out of a database and have filenames like /productdetails?productId=1234, you should consider using URL re-writing to get unique keywords into your filepath. If you use Microsoft IIS rather than Apache as your web server, you can still do rewriting with a 3rd party isapi module or with .NET
-
Make use of the
<title>tagThe
<title>tag is often neglected. Particularly amongst developers who rely on WYSIWYG editors such as Macromedia Dreamweaver and Microsoft Frontpage. So many html documents get published to the web with “untitled document” in the<title>tag, or almost as bad, just have the same boilerplate text for every<title>throughout the site.The
<title>tag sits within the<head>and</head>tags at the top of your html document. The text that you place in between this tag appears in the browser window (as part of your Operating System rather than part of the web page).The text that you choose to put in the
<title>tag should be indicative of what can be found on that particular page. Keywords you are trying to target should be in there somewhere too. -
Use
<h1>-<h6>tags to structure your contentThe heading tags
<h1>-<h6>are probably the most under utilised tags within html. Web designers have historically avoided these tags because of their cumbersome appearance when no styling is applied to them (If you’re not happy with the way browsers render the h tags by default, they take seconds to re-style using css).Heading tags are important to standards compliant development, useability, accessibility and seo because they give a html document structure. A html page without heading tags is analogous to a book without chapters or a table of contents.
Your page should contain one
<h1>tag and one or more of the other numbered heading tags. You should nest the heading tags numerically, don’t use a<h2>tag in between<h3>and<h4>tags. They are supposed to represent a hierarchy within your document. -
Make liberal use of html lists
The
<ul>and<ol>tags are used to markup lists in html.<ul>produces unordered lists and<ol>produces ordered lists, the main difference being that ordered lists are indexed with an incrementing value (such as a number or roman numeral) and unordered lists are indexed with identical markers (such as bullet points or hyphens).Lists appear naturally many times within web pages in things like navigation menu’s, sitemaps and footer links. Lists don’t necessarily need to be rendered vertically, one item after the next, its reasonably easy to change the way that lists flow using css.
Search engines will give more importance to text that is rendered in a list when ranking your page than if it was rendered inside a tag such as
<p>. -
Highlight relevant keywords and phrases with
<em>and<strong>tagsThe
<em>and<strong>tags render their contents as italic and bold respectively when viewed in a regular web browser. The tags should be used in favor of the deprecated<i>and<b>tags to highlight important words within your web page. Text that is marked up using the<em>and<strong>tags is given a higher priority by search engines when ranking your page than normal text, you should therefore markup any instances of keyphrase’s you want to perform well for using either of these 2 tags. If you do not want the the default rendering behavior of italic or bold, they can easily be removed using css. -
Link out to relevant web pages whenever you can
The World Wide Web is a collection of inter-connected pages and not a collection of disparate web sites as is the common misconception. As such, you should take any opportunity that you can to link out to other web pages from within your content. If there is a relevant, well written page on another domain that relates to your chosen subject, you should link to it.
There are two reasons for this:- The people who use your page will benefit from and appreciate the information you are linking to.
- Search engines reward pages that link out to other relevant content and use this information to establish your position in the market that you operate.
The second point is an important one. Outbound links wherever possible should be relevant to the originating content and ideally be related to the subject area of your website. Search engines will use the links you provide to gauge which type of content your site offers. If the links are off topic and seemingly random, you may not be doing yourself any favors.
-
Use descriptive text within hyperlinks
Whenever you link to another web page, whether that be an internal link to one of your own pages (even an internal link to another location on the same page) or linking out to someone else’s site, you should use descriptive text between the
<a>and</a>tags. Search engines will use this text to evaluate what it is you are linking to. For example a page about “SEO tips and tricks” will benefit greatly if hyperlinks that point to it have “SEO tips and tricks” as the text rather than “click here”, “follow me” or some other non-descriptive term. For the same reasons you should avoid using images exclusively within hyperlinks, if you must use images as links make sure the image has a descriptivealtattribute. -
Keep any javascript and css in external files
All cascading style sheet definitions and any javascript that you use on your pages should be stored in separate files and linked from the html page. The SEO reason for doing this is that your pages will be more easily crawlable by search engine bots, but there are other benefits to doing this including reduced (single point of) maintenance, consistency and quicker page loads.
To link to an external css document you would put something similar to this in the
<head>section of your page:
<link rel="stylesheet" href="yourstylesheet.css" type="text/css" media="screen" />
…and to include external javascript you should use something like:
<script type="text/javascript" src="yourjavascript.js" />
Its worth pointing out that in the stylesheet example, themediaattribute which I have set as “screen” means that the css information will only be applied when rendering your html to a web browser screen. Printing from the page would result in unformatted html. To encompass all types of rendering including print change the value of this attribute to “all”. The W3C have a good page showing all the possible values you could use in themediaattribute. You can also add more than one value (separated by commas) to have a css document apply to screen and print for example. -
Use descriptive text in image
altattributesWhen including images in your html using the
<img>tag, you should always add analtattribute as follows:
<img src="flowers.jpg" alt="Some red flowers in a yellow vase" />
The purpose of thealtattribute is to give some indication of what the image contains for viewers that cannot “see” the image. A search engine robot is one such viewer and this is one of the best ways of passing information about your images to a viewer that would otherwise not “know” about the contents of the image. -
Validate your pages
html comes in quite a few different varieties including html 4.01 strict and transitional, and xhtml 1.0 strict and transitional. The chances are, if you have not specified otherwise, your page will be treated as html 4.01 transitional. The way to specify that a page adheres to a certain type of html is to use a DTD (Document Type Definition) and it needs to be the first line in your html file. Some examples of DTD’s and how to use them can be found on the W3C website.
When you specify a DTD as the first line of your html document, you are essentially entering into a contract to produce html in a specific way. Online services such as the W3C markup validation service will check your html to make sure it conforms to the DTD specified at the top of the page, giving you useful guidance on how to fix any errors it encounters.
Google claim not to discriminate against badly formed (or invalid) html, claiming that pages will be ranked equally whether they adhere to a specific DTD or not - so why bother going to all the effort of producing and maintaining valid html for SEO purposes? Essentially, valid html is generally speaking lightweight, streamlined and error free which means that the very first part of the search engine process, the indexing (or crawling as it is sometimes known) can take place quickly and easily. It also means that the search engine bot will not stumble or choke over some bad syntax and will generally ensure that you get over the first hurdle in SEO - your pages will at least appear in a search engines index.
Syndication
