On-Page SEO – Anatomy of a high ranking web page

On Page SEO Infographic

Title Tag

The title tag is displayed in the top bar of the web browser,  as the heading and link in search engine results pages (SERPs) and as the default title for social sharing.

The title element of a web page should be an accurate, concise description of the page content.

Titles should be between 50 and 60 characters long (keeping them under 55 characters means they will display properly 95% of the time). This is down to the restriction on displayed title length being a pixel restriction rather than character restriction.

You can see how your title will look using the Moz Title Emulator Tool.

An ideal page title will include the keyword first followed by a separator (usually a | or -) and then your brand or site name. The title should be compelling and promote your brand positively – you want it to draw visitors to your site.

The title tag should be added to your page “head” as shown below.


<head>

<title>Keyword and Page Summary | Brand</title>

</head>

If you are building your site on WordPress we recommend using the Yoast SEO plugin which allows you to edit your title and see what your title will look like on a page-by-page basis:

SEO Optimise Title Tag in Yoast

Optimise your URL

Your URL is an important part of your on-page SEO. It helps search engines and users to understand the context of your page.

URLs should:

  • Never be longer than 2048 characters because otherwise older versions of Internet Explorer will be unable to load the page
  • Avoid the use of parameters (e.g. /product/?id=5789). If parameters must be used then they should be configured in Google Search Console and certainly no more than 2 parameters should be used.
  • Make sense on their own. Assume somebody is going to copy the link and not give it any context. Would it still make sense on its own?

A good example of a URL is this one that appears for a search of “eBay apple mac”. It’s clear from the URL structure that if you click on the search result you will be taken to a page about Laptops & Netbooks.

SEO Optimised URL

Page Headings

You main page heading should be enclosed in <h1> tags as shown below. In HTML 4 you should only use one <h1> tag per page but with HTML5 you should use one <h1> tag per <article>.

The content of your <h1> tag is one of the most important things that a search engine looks at to understand what your page is all about. It should be included near the top of the page and it should start with your main keyword.

<h2> tags should be used for sub headings. Ideally <h2> tags you will use your main keyword and variations of your main keyword throughout the page. <h2> tags should only follow <h1> tags. <h3> tags should only follow <h2> tags.

Don’t use headings for styling. That’s what CSS is for. By all means style your headings but don’t put your phone number in <h1> tags just because you want it to be the biggest thing on the page.

Use of Heading Tags in HTML4


<body>
     <h1>Main Keyword Page Heading</h1>
     Some content.
     <h2>Sub Heading</h2>
     Some more content.
     <h2>Sub Heading 2</h2>
     Even more content.
</body>

Use of Heading Tags in HTML 5


<body>
     <main>
     <article>
          <h1>Main Keyword Section Heading</h1>
          Article content.
     </article>

     <article>
     <h1>Main Keyword Page Heading</h1>
     Some content.
     <h2>Sub Heading</h2>
     Some more content.
     <h2>Sub Heading 2</h2>
     Even more content.
     </article>
     </main>
</body>

Use Your Keywords

Don’t keyword stuff. The days of writing about “SEO Company is an SEO company that helps companies SEO the website for their Company and make sure their SEO is correct” are gone. The search engine algorithms are clever enough to pick up on this type of keyword-stuffed nonsense text. However, do try to include your main keyword in the first 100 words on your page. Focus on making the content useful to your readers but it’s a good idea to use your main keyword (and variations of it) throughout the page content in a non-spammy way.  By the way, don’t use meta keywords. They have no SEO benefit, could be considered SPAM and your competitors can easily see what keywords you’re optimising for.

Break Up Text

Adding white space to your page design is a really easy way to improve your user experience (and therefore reduce your bounce rate).

White space is the empty space between paragraphs, images, buttons and other elements on your web page.

See how easy this section is to read compared to the longer paragraphs describing how to “use your keywords” above?

Using bullet points, wider line spacing and restricting the width of lines on the page all help to make text more readable.

And, of course, don’t forget to choose an easy-to-read sans serif font.

Use Image Alt Tags

When you include images on your site you should always use the “alt attribute” (commonly but incorrectly referred to as an Alt Tag) on every img tag.

The alt tag should accurately describe what’s in the image and, ideally, incorporate your main keyword or a variation of it.

When search engines crawl your site, they will use the content of the alt tag to understand what your image is about. This same text is also read out in screen readers of the blind and visually impaired.

This video from Matt Cutts  describes the alt attribute in a little more detail.

Here is the correct use of an alt attribute within an img tag:


<img src="image.jpg" alt=“clear description of the image goes here”  title=“tooltip goes here”/>

If you’re using WordPress it’s much easier – just make sure you fill in the fields for your images before you add them to your page:

SEO Optimised Image in WordPress

Use Images & Video

The use of images and videos on your site (especially videos “above the fold”) are a great way to keep visitors on your site for longer. The result? Reduced bounce rate and the chance of a  better position in the SERPs.

And it goes without saying that keeping visitors on your site to hear a video testimonial or explainer is a great way to get your message across and improve your conversion rate.

One more thing on images, don’t embed important text in images because not all users can access them and search engines don’t read them.

Internal Links

Links to other content on your own site help to keep users on your site and help search engines to crawl your site. A safe approach is to incorporate 2 to 3 links to other internal pages within your main content.

External Links

Outbound links from your page  to good quality, relevant sites help Google to understand what your page is about. Pages with outbound links have been shown to rank higher than those without.

Calls to Action

Each page should have one or more “Calls to Actions”  (CTAs) relevant to the page content and the problem that the user is trying to solve. If you don’t have prominently displayed, relevant CTAs you will find it hard to
keep visitors on your site resulting in a higher bounce rate and a lower conversion rate.

Your call to action can be in the form of a button, banner, or even a link within the main body of content on your page.

The most important question to ask when deciding on a call to action is whether it will solve your visitor’s problem. If your CTA solves the visitor’s problem, it’s much more likely to make the user stick around
on the site and convert into a new lead.

Social Proof

Research from Stanford University identified the importance of “making it easy to verify the accuracy of information on your site”.

Whether you’re selling a service or a product you can build credibility through third party support. This might include social media shares / likes, product ratings or client testimonials.

It’s important to show your potential customers that other people like them have used your service and enjoyed it. This article about the launch of Highscore.money demonstrates the importance of social proof for any website.

Text Length

You should be aiming for a minimum of 300 words of text on your page but research and testing has demonstrated that longer content generally results in better placement in the SERPs.

However, your content should be easy to consume quickly and not full of waffle. Users have increasingly shortened attention spans. Your page should satisfy the query quickly and then expand on it in a way that is easy to read and understand.

Meta Description

Like your page title, your meta description is the first impression that potential site visitors have when they see a link to your site in the SERPs. The meta description should describe how your page solves the searcher’s problem. The meta description should include your keyword or phrase and, ideally, a variation on it.

It’s best practice to keep meta descriptions around 320 characters in length whilst ensuring that they make sense in their first 160 characters as this is the point at which they are usually truncated on mobile.

Schema Markup

Schema markup tells search engines what your content means, not just what is says. Schema.org  was created collaboratively between Google, Bing and Yahoo so you can see how important it is to get this right.

Markup is available for:

  • Local businesses
  • Restaurants
  • Events
  • TV episodes
  • TV ratings
  • Movies
  • Book Reviews
  • Articles
  • Products
  • Software

Google’s structured data markup helper  is a great way to get started with schema markup.

Make it Quick

Page speed is easily confused with site speed. Site speed is the page speed for a sample of page views on the site. There are two definitions of page speed:

Page Load Time – The time it takes to display all of the content on a particular page

Time to First Byte – The time it takes for the browser to receive the first byte of information from the server.

Site speed (and, therefore, page speed) is one of the signals that Google uses in its ranking algorithms. Some research has suggested that Google may be measuring time to first byte and using that as a factor in its ranking algorithm.

Here are some of the things that you can do to improve your page speed:

  • Use compression to reduce the size of your CSS, Javascript and HTML files.
  • Reduce the number of redirects that you use. A redirect should point directly at the final destination – not another page that has a redirect too.
  • Spend on your hosting. A better web host or more expensive package can easily pay for itself from an increase in visitor conversions.
  • Ensure that your images aren’t any larger than they need to be and that they are suitably compressed.

No page on your site should take longer than 4 seconds to load.

There are some great, easy to use plugins available for WordPress sites including W3 Total Cache that improve the speed and user experience by adding browser, page, object and database caching as well as minify and content delivery network to your WordPress site.

Make it Responsive

In 2016 there’s no excuse for your website not providing a great mobile user experience. Google recommends responsive sites to mobile users in the SERPs and ranks them higher in the SERPs when presenting results on mobile devices.

There’s no need to have a totally separate mobile site. All web developers should be considering responsive design in every project. This means that you can have all of your links pointed at one domain (rather than one mobile and one desktop site).

Responsive sites also help to reduce bounce rate because the experience of mobile users is significantly improved.

Get in Touch

How did you get on with making these changes to your site? If you need some help just let me know – find me on twitter @petervanneste or leave a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *