On-page optimisation 101

Sep 16th, 2016

By ‘on-page’, for the purposes of discussing technical optimisation, it is not the brand’s consumer viewable content, but the so-called ‘back-end’ content – that which is written with search crawlers in mind


Important html elements for optimising your pages

Meta title tag

Though it is ultimately limited by pixel length, your meta title tag should be as accurate, concise and precise a description of your content as is possible in 56 characters. It is one of the most important sources of information for Google’s algorithm when it comes to deciding relevance (and therefore affects SERPs position) as well as aiding in the ease of browsing for the consumer – it should always contain key terms relating to the page.

Meta description

The best explanation of the ‘meta description’ tag is as a short summary of the page – a clear and concise 155 character description of the on page content (with a minimum of 90 characters recommended). However, as this is the text visible in SERPs, it should also serve to draw consumers to the page – featuring, wherever possible, some form of enticement or call to action. A good ‘meta description’ can drastically improve your click through rate.


meta-description-code


Though a brand may publish a novelty blog titled ’10 uses for unwanted Christmas knitwear’, in order to ensure the bounce rate is kept low and your potential readership is given a full and attractive account of on-page copy (deterring the searchers that may be looking for recycling or upcycling advice), you may wish to describe it as: “A Humorous List Of Unexpected Uses For An Unpopular Christmas Gift”.

Header tags

Headers summarise the pages you create for both consumers and search engines – and should be easily read by both. They are also important stylistically.

H1

Though wit and humour are desirable for a page title, it is more important in the digital age for it to convey the information you wish to rank for. While ‘Book lack in Ongar’ is a great headline, Google’s search algorithm is looking for ‘Funding cuts for Essex libraries result in severe book shortages’ for search queries regarding library funding. Though there is no definitive limit, best practice dictates that you should attempt to keep your titles unique, between 60 and 80 characters, and featuring keywords near the beginning.

H2

This is a more appropriate place to flex your creative muscle and generally serves as a sub-title. The h2 tags are also good for use as stand-alone subheadings when seeking to break up content for ease and speed of understanding. Again, it is still recommended that keywords feature somewhere in the subheading – as each header is important to framing the relevance of page to search queries.

H3

This is a tertiary emphasis tag – or your ‘sub-sub heading’, formatting of which should adhere to its role as a paragraph leader, or stand-out line. As above, ensure this header is relevant to the text it precedes or is linked to – using keywords from the text to add relevance to the passage to promote ease of reader and search engine understanding.

Image source tag

Your ‘image source tag’ is responsible for providing the source for any inserted image, ensuring that all consumers see the same image.


image-link-code


Alt attribute

The alt attribute is vital when placing images anywhere on your site. Not only is it the text which will be voiced by screen readers, it is also how Google attributes subject relevance to any image. It is best to approach it with the screen reader in mind, however, as this will ensure the best result for both purposes – as Wikipedia states:


 

Keep in mind the purpose and context of an image and what would be useful to someone who cannot see it.


Text link


text-link-code

 


The above is the format in which a text link is placed (hypertext). The anchor text (the word or phrase to which a link is attached or ‘anchored’) and the text around it should provide easily read signals as to the content of the destination page.

If, therefore, someone wanted to place a link to their blog, the code and result would look something like this:

Code:


text-link-code-example


Result:


text-link-result-example


Image link


image-link-code


The above is the necessary format if, for any reason, you would like to use an image rather than a phrase to serve as the portal for an external link. While the picture serves as the clickable link, it is still vital to remember that relevance is still determined by the alt attribute.

A clickable picture link would look something like the following (where the ‘br /’ is code for a line break):

Code:


picture-link-code-example


Result:


picture-link-result-example


Image link (with nofollow)

The addition of ‘rel=”nofollow’ to links is the format for a link which would be ‘nofollow’ed – a type of link which is predominately used when linking to sites which you may not completely trust or have control over – such as fora, comments sections etcetera. For example, the following is a ‘nofollow’ picture link:

Code:


picture-link-code-example-nofollow


Result:


icture-link-result-example-nofollow


As you can see, there is no visible difference (unless you have a browser plug-in to highlight the nofollow aspect); the ‘nofollow’ is strictly a back-end addition to a link, used by search engines to determine whether to pass page authority from the linking page to the destination page.


For some takeaway technical tactics, download our handy on-page optimisation guide…


technical on-page optimisation cheat sheet


Facebook Twitter Instagram Linkedin Youtube