Press enter to skip the top menu

Building Web Pages

Meta Tags

Introduction

Meta tags don't appear on a web page and, except for one example, don't influence the layout or content of the page. They are always contained within the head block.

The name meta comes from the word "metadata" which means data about data. Some of this data is aimed at search engines where it gives them a very short summary of what the page contains. Other tags are aimed at browsers, where they inform them of the character type used for the text.

go to top

Sample Code

Listing 1
                        <!DOCTYPE html>
                        <html lang="en">
                            <head>
                                <title>Web Accessibility | Vision</title>
                                <meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
                                <meta name="description" content="This page discusses the WCAG's regulations regarding computer accessibility for the blind, deaf and blind those with other cognitive or physical impairments.">
                                <meta name="robots" content="index,follow" />
                                <meta name = "keywords" content = "Blindness, low level vision, colour blindness, dyslexia" />
                            </head>
                        </html>
                    

In Listing 1 above we have an example of the typical contents of the head tag.

The title tag

At line 4 we have the title tag. For search engines this is an important tag because it gives a description of the purpose of both the entire web site and of the current page.

Strictly speaking this tag is not a meta tag, but is often referred to as such. This is because the data it contains is meta data that the search engines can use to rank the page.

The contents of this tag is the only item from the head block that appears on the web page.

Fig 1: the contents of the title tag appears appears on the top of the web page

There are no strict rules regarding what exactly to put here, but a common convention is to divide the text into two parts: one that describes the site to which the page belongs and another to describe the current page. With this information we can deduce that the entire website relates to coding web pages while the second part tells us that the current page is about meta tags.

It is a good idea to use the first part of the title as the level 1 heading of your page and the second as the level 2 heading.


The meta http-equiv attribute.

This is shown in line 5 of Listing 1.

The value Content-Type informs the browser that the contents of the page is HTML text. The value of the charset property informs the browser that the character encoding is UTF-8. This is important as it enables the browser to properly render non-ASCII characters.


The Meta Description attribute

This is shown in line 6 of Listing 1. It informs both the search engines and the searcher what the topic of a page is. Below we show an example of how this occurs.

Fig 2: the result of a Google search on 'canterbury university'

The screenshot above is the result of entering 'canterbury university' into the Google search box. Here the user is provided with four pieces of information:

Here we shall focus on the last item, i.e. the description. The origin of this piece of text lies in the page's head block. To verify this we shall follow the hyperlink to the university's web site. Once there we right click on any part of the page and from the pop-up menu click on inspect. This splits the screen into two halves: the first half is the web page itself and the second half is the HTML code of the same page.

Fig 3: the meta description tag on the university's website

We scroll to the top of the top of the page and expand the head block if necessary. A portion of what we can see is shown above in Fig 3. Here the content of the meta description tag is the same as the extra piece of text shown in Fig 2.


The meta robots attribute

Here the word 'robots' has nothing to do with either science fiction or the descipline of robotics. Instead the word refers to the web crawlers that browse the web for the purpose of indexing the web pages.

In line 7 of Listing 1 the content of the robots attribute is "index, follow". This means index the page and follow it's links.

Both "index" and "follow" are the default values for the content of the robots attribute. For this reason it is not necessary to specify the robots attribute if you wish to index your pages and follow the links.

Other optional values include "noindex" and "nofollow". Their names are descriptive enough for you to work out what their functions are.


The meta keywords attribute

An example of how this attribute works is shown in line 8 of Listing 1. Here words or phrases that relate to both 'Web Accessibility' and 'Vision' are added to the content.

If a searcher's query contained one or more of those keywords, then the web page containing them would be added to the results of the search query.

problem was that web page builder began to misuse this by adding irrevelant keywords to their own site in order to attract users away from other sites and towards their own. This became known as "keyword stuffing". The ultimate result of this keyword stuffing was that Google excluded keywords from their search engines.

Go to top