Technical on-page SEO is the process through which a web developer ensures a site’s performance is maximized for reading by search engines (and, by extension, a brand’s consumers).
The benefits of good technical on-page optimization are numerous but, boiled down, they equate to improved search rankings and a better user experience.
The following information will give some of the most fundamental code snippets and explanations regarding their use, as well as some tips regarding other optimization areas which are vital to the correct set-up of your site.
HTML Elements for SEO
Meta Title Tag
Your meta title tag should be accurate, concise and descriptive as it is predominately responsible for value in attribution of relevancy (and therefore search engine results page ranking) as well as aiding ease of browsing.
The text should, in general, be no longer than 56 characters long (though this is finally determined by pixel length) and should contain key terms related to the page
The text between your title tags is often displayed on search engine results pages (SERPs). These tags are therefore useful in both SEO and for social sharing.
Meta Description Tag
Your meta description tag is a unique, clear and concise description of what is featured on the page.
It is most often the description that appears below a page link on SERPs and a good meta description can increase your click-through rate.
Search engines recommend these are restricted to 155 characters, but should be a minimum of 90 to make them useful. Wherever possible, try to include a call to action as this can help your click-through rate.
Though your article title may be ’10 uses for unwanted Christmas jumpers’, to avoid irritating people who are looking for constructive advice on recycling repulsive knitwear (and adversely affecting your bounce rate), you may wish to describe it as: A humorous list of unexpected uses for an unpopular Christmas gift.
It also offers consumers a glimpse into your shop window, something shiny to draw them inside.
Headers are the things which summarize the pages you create for consumers and search engines, as well as being important stylistically.
This tag is your main page heading – it’s from this that Google will take its first impression of your page’s relevance to a search query. While you may be (as we often are) tempted to attempt wit or humor in your page title, it is important for page relevance that this contain the information you wish to rank for.
While ‘Book lack in Ongar’ is one of my favorite headlines, the search engine is looking for the more prosaic ‘Funding cuts for Essex libraries result in severe book shortages.’
Though there is no definitive limit, best practice dictates that you should attempt to keep your titles unique, between 60 and 80 characters, and with keywords near the beginning.
This is where you get to flex your creative muscle, and with a formatting reshuffle can appear to visitors as either a title or sub-title. They are also good for use as stand-alone subheadings for breaking up content for ease and speed of understanding.
This is your sub-sub and its formatting should denote its place as a paragraph leader, or stand-out line.
Your image tag, perhaps unsurprisingly, is responsible for providing images, which can be used in conjunction with various modifiers to position it according to your needs.
Don’t forget your alt attribute! Remember your alt attribute is not only the text which reports to screen reading software, but also how Google determines the image’s relevancy to the page’s content.
The introduction of ‘super’ or ‘mega-menus’ (which can legitimately contain up to 300 links) clouds the issue of links a little, however we would recommend applying common sense when considering your text to content ration while bearing in mind that too many links can dilute a page’s authority.
Your Anchor Text Used for your on page links (your hypertext underlines), the anchor text should give easily inferred signals about what awaits them on the destination page.
If you’d prefer an alluring image, rather than a word, serve as your link focus then this is the code for you.
Essentially it does the same as a text link… only with an image. With image links, the important thing to remember is that the alt attribute serves as the anchor text.
Predominately used when linking to content which is not entirely relevant to your site – indicating that you do not want value passed away from the site by this link.
It is also used when linking to sites which you may not trust or have control over – such as fora, comments sections etc.