Getting the basics of on-page SEO right is the foundation of a successful SEO campaign. In this section we will discuss the core elements that make up a web page and explain how you can optimise them for your website.

Title Tags

What is a Title Tag?

When we’re talking about title tags in this section, we’re referring to the HTML title element which defines the title of the page.

Here’s what a page title looks like in the source code of a web page:

<title>Example Domain</title>

Here’s what a page title looks like in a web browser’s tab:

Here’s how a page title appears in Google’s search results:

Why are Page Titles Important for SEO?

Make a Good First Impression: the title tag is usually the first thing a potential visitor will look at when performing a search query. This is your chance to make a great first impression and entice the visitor to click through to your website by making it descriptive as well as informative.
Brand Authority: including your brand name at the end of your title tag creates the sense of a strong brand identity, and further increases your chances of a visitor clicking through to your page.
Search Intent and CTR: when it comes to ranking on the first page, CTR (click through rate) comes into play. If your CTR is lower than Google’s expected rate for a certain position in the search results, your rankings will likely drop. Likewise, a page title that gets more people to click through, but is lower down the SERPs, tells Google that this page title better addresses the user’s search intent, and as a result, is likely to rank higher.

Writing the Perfect Title Tag: A Checklist

Is it optimised for your core keyword? – Whilst page titles should always be written with humans in mind instead of robots, it’s important to ensure that they are optimised for the core keyword that you want to rank for, and perhaps one or two long-tail keywords… if you can squeeze them in!
Is it a good length? – Each search engine has its own measure of page title length, for instance Google has a maximum width of 600 pixels (i.e. the letter “i” takes up less space than the letter “w”) whereas Bing and Baidu limit the number of characters you can use before truncating the page title as below. Google says to “avoid unnecessarily long or verbose titles”.

Use these handy pixel width checking tools to test the length of your page titles:

1. Free Pixel Width Checker Tool — by Search Wilderness
2. Portents SERP preview tool
3. SERPSim

Is it descriptive and concise? – According to Google, the page title should give a “quick insight into the content of a result and why it’s relevant to their query”.
Is it unique? – Google emphasises the importance of having “distinct, descriptive titles for each page on your site”.
Does it hook the reader? – the page title should grab the user’s attention, so include language that entices them to click through to your web page. However, avoid page titles with ALL CAPS (they take up too much space), or over-optimised keywords (they spoil the user experience and could get you punished – remember, search engines are smart!).
Have you front-loaded your keyword? – users are likely to scan only the first few words of a page title, so wherever possible, try to include the core keyword that you want to target at the beginning of the page title.

Meta Descriptions

What is a Meta Description?

The meta description summarises the contents on a page in one or two sentences.

The meta description goes in the <head> section of your HTML page.

<meta name="description" content="Meta description text goes here.">

Search engines often display the meta description in the search results.

It’s worth noting that Google may not always display the meta description that you set, and instead may opt to show another snippet.

Are Meta Descriptions Important to SEO?

Although Google has confirmed that meta descriptions are not a direct ranking factor, they still hold some importance.

According to Google, each page should have a single meta description that should “generally inform and interest users with a short, relevant summary of what a particular page is about. They are like a pitch that convinces the user that the page is exactly what they’re looking for.”

In other words, a well written and engaging meta description can impact a page’s CTR on Google, which as we’ve seen with page titles, can influence a page’s ability to rank.

For that reason, it’s definitely worth putting some thought and effort when writing your meta descriptions.

Writing the Perfect Meta Description: A Checklist

Is the meta description unique? – Google says that “Identical or similar descriptions on every page of a site aren’t helpful when individual pages appear in the web results” and as a result, are “less likely to display” such descriptions.
Does it accurately summarise the content on the page? – Google says to “create descriptions that accurately describe the specific page”.
Does it include the core keyword(s) that you want to rank for? – keywords and search phrases from your search query are highlighted in bold by Google, this draws the user’s attention and is more likely to increase CTR.

Does it engage with the user without coming across as clickbait? – Writing “high-quality descriptions can be displayed in Google’s search results, and can go a long way to improving the quality and quantity of your search traffic”.
Is the description too long or short? – although there’s no limit to how long a meta description can be, Google will truncate descriptions that are too long to fit the width of the device being used.

Headings

What Are Headings?

Headings (or header tags) are HTML elements that allow search engines to understand the hierarchy and structure of a web page, as well as making it easier for readers to navigate a piece of content.

There are six types of heading levels: H1 (largest) to H6 (smallest).

Why Are Headings Important to SEO?

Headings may not be the most important ranking factor, but they do still affect a site’s ability to rank.

Improve Structure

Heading tags typically enlarge the text contained in them (compared to normal text on a page), so they offer context and serve as visual cues as to the level of importance of the text.

Using multiple heading sizes in a logical manner helps create a hierarchical structure to a web page, which makes it easier for users to navigate through the content and find what they’re looking for.

Here’s an example of the correct usage of header tags:

<h1>Easy Chocolate Cake Recipe</h1> - this is the main heading
    <h2>Ingredients</h2> - this is the first section
        <h3>For the Cake</h3> - this is a sub-section
        <h3>For the Frosting</h3> - this is another sub-section
    <h2>Method</h2> - this is the second section
        <h3>For the Cake</h3> - this is a sub-section
        <h3>For the Frosting</h3> - this is another sub-section

And here’s how it would look on your web browser:

Improve Accessibility

Apart from creating a logical structure, using headings correctly makes it much easier to scan the page and quickly find what they’re looking for.

This is even more useful for visually impaired users who may struggle to read the contents on the page. Therefore, by using header tags, a screen reader is able to understand the structure of your article and read them out. This allows the user to decide whether or not they want to view the page, or skip ahead to another section on the page.

Improving your site’s accessibility is only going to improve the user’s experience and in turn, will likely improve your chances of ranking.

Appear in Featured Snippets

An area where your headings are likely going to have a positive impact on your SEO, is with featured snippets!

For example, with voice search becoming increasingly popular, users are looking for quick answers to their search queries.

So, including long tail voice search keywords within your header tags and answering those queries immediately within <p> paragraph tags is likely going to increase your chances of ranking as a featured snippet.

Let’s take a look at an example for the keyword “where does honey come from?”

Now, let’s see where Google pulled the text from.

Writing the Perfect H1 Header Tag: A Checklist

Does it describe the main topic of your page? – does the header summarise the topic that is covered on the web page
Is it too short or long? – the length of an H1 isn’t as important for SEO, as it is for user experience. Headings that are too long are difficult to read which impacts their experience of your web page. Very short H1 headings also will impact user experience as they will not provide enough information about what the user can expect from the page.
Does it grab the user’s attention? – The h1 tag is likely going to be the first element that a user sees on your page, so it needs to be noticable, but also compelling to the reader.
Does it include the core keyword that you want to target for that particular page? – Without overdoing it, including the core keyword(s) that you want to rank for is recommended as Google still uses H1 tags to understand the page’s topical relevance.
Does it address the user’s search intent? – H1s communicate a sentiment, so it’s important to make sure that they align with what the user is expecting to find from their search query.

Writing the Perfect H2-H6 Header Tag: A Checklist

Does it make sense to use this header? – Google says that headers should be used sparingly as “too many heading tags on a page can make it hard for users to scan the content”. Using H2 tags is recommended, and using H3-H6 tags is optional.
Does it include any long term keywords? – Whilst not all headings have to target a keyword, it is good practice to include some long tail keywords within your headings to further provide context to Google.

Keyword Density

Keyword density looks at how frequently a keyword occurs within the content of a web page.

The formula for this would be:

So, if your page has 1000 words and 50 of these are your core keyword, the keyword density is 5%

A little heads up though, this section is going to be pretty short.

Because this is no longer as relevant as it once was.

A (Short) History Lesson

Back in the day, SEOs would try to beat the system through keyword stuffing because they thought “the more times I include the keyword on the page, the higher I’ll rank”. Unfortunately, this is not the case.

There was also lots of chatter in the SEO community about what constitutes the perfect keyword density – but again, there isn’t one.

We’ve seen how Google algorithms like Hummingbird and RankBrain have become much smarter and more efficient at understanding content – so it comes as no surprise, that this strategy no longer works.

Moreover, Google’s Webmaster Guidelines state “Keyword Stuffing…. results in a negative user experience, and can harm your site’s ranking.”

The Bottom Line

Ultimately, including your keywords within the content is still important in telling Google what your page is about. But, it’s all about finding the right balance by creating “useful, information-rich content that uses keywords appropriately and in context”.

In other words, write your content naturally, and the keywords will magically find their way in there!

Alt Text

What is Alt Text?

Alt text (also known as “alt attributes” or “alt descriptions”) are HTML elements that allow you to specify alternative text for an image on a web page.

Below is an example of an alt text.

<img src="image.jpg" alt="This is an image.">

Why is Alt Text Important?

Accessibility

By providing a descriptive alt text for every image, users that view your website using assistive technologies such as screen readers will be able to understand the contents of your page better. This is because the screen reader will read out the information about the picture.

Better User Experience

In the case that the browser is unable to load the image on the web page, the alt text will be displayed to the user.

Image SEO

Google uses the alt text attribute in conjunction with computer vision algorithms to better understand the contents of an image. This is because computers aren’t quite able to “see” the actual image.

Let’s take a look at this image.

Google may be able to decipher that it’s some sort of food by identifying the plate and perhaps even the fork.

But if we want to rank for the keyword “chocolate cake” for example, we need to give it a little hand.

<img src="chooclate-cake.jpg" alt="Delicious chocolate cake">

Note that the filename should also be descriptive.

So, the alt attribute provides another opportunity to include keywords that you want to rank for.

On top of this, alt text attributes make it easier for image search projects like Google Image Search to better understand the images – opening a whole new world of potential traffic!

Images as Links

If you’re using an image as a link, Google treats the alt text similarly to the anchor text of a textual hyperlink. However, this should be used sparingly in your site’s navigation as over-optimisation could lead to algorithmic or even manual penalties.

Writing the Perfect Alt Text: A Checklist

Is it descriptive and provides good context? – when choosing your alt text, ensure that the text is useful and adds value to the user’s experience of your website.
Does it include the keyword that you want to target? – ensure that your alt texts target keywords where appropriate, but avoid keyword stuffing as it results in a poor user experience and may cause Google to see your website as spam.
Is it too long? – there is no limit as to how long an alt text should be, but it’s worth noting that the main screen readers cut off around the 125 character point.

Alt Text Examples

Bad (missing alt text):

<img src="chocolate-cake.jpg"/>

Bad (keyword stuffing):

<img src="chocolate-cake.jpg" alt="cake chocolate cake chocolate chip cake delicious chocolate cake easy chocolate cake recipe chocolate cake recipe"/>

Better:

<img src="chocolate-cake.jpg" alt="cake"/>

Best:

<img src="chocolate-cake.jpg" alt="Delicious slice of chocolate cake"/>