Keywords are words that are selected to describe the content on a website or web page. So a chocolate factory might use the following keywords: sweets, caramel, nougat, toffee, snack, confectionery.

These days people in the Indian sub-continent have moved on from customer services and become SEO specialists. For an extortionate fee you can employ their imagination and add 40 keywords to your beloved website, which promises to increase the site traffic because your site is now super SEO friendly, they tell you.

The truth is that it’s a scam. They can no more steer potential business your way than they were able to solve the problems with your cable TV box. As for keywords, the best way to positively affect your SEO rating is to leave them out.

There was a time when it was important to think about the keywords that went into the meta at the head of an HTML page. This was due to the way browsers worked and the criteria for search engine algorithms. Times have moved on, and just as there is an HTML5 standard, browsers and search engines have also evolved.

Keywords were a means of helping the web crawlers to better understand the content of a discovered site. Relevancy was the main point, so a veterinary surgeon’s website may have keywords such as: dog, cat, animal injury, pet welfare, and so on.

However, this subtle tool was ripe for abuse and it was common to find hundreds of keywords attached to the meta data of a website, intended to be included in results whenever a user included those keywords in a search query.

An important parameter is the density of the keywords. Keyword density should be no more than one percent. This means that for every hundred words of text you should use a keyword no more than one time. If you overuse a keyword it can be evaluated as over-optimisation. This means you are not free to write text naturally, for example this paragraph contains the word ‘keyword’ five times within 71 words.

In our vet website example, let’s say you added the word ‘football’ so that when someone searched for football, your webpage would appear in their search results. So keywords are only useful to searches if they are truly relevant, but in a dramatic twist, search engines stopped using keywords almost a decade ago.

If our vet had used a generic keyword such as the word ‘dogs’ then it would not be cool if that keyword didn’t actually appear on a particular page, because it would not be relevant. The Google search engine does use keywords in a negative sense like this, whereas with Yahoo unique meta keywords can be used as a last resort to recall documents when no other ranking signal is present.

When you use keywords they should ideally be page specific but this can be labour intensive. With Content Management System (CMS)s such as WordPress this can be achieved by using a plugin. If keywords are applied globally then no more than three or four should be used that accurately describe the content on the site. Our vet example could simply use the keywords: animal welfare and petcare, that’s it.

The risk of using keywords is that a search engine may check for relevancy and mark your site down. If there are too many keywords the website might be marked as a spam site. So the current thought is that keywords should be left out altogether from meta tags.

Meta tags are a part of a large algorithm used by search engines to decide how to display relevant results. They are optional and not required on a web page by the W3C (World Wide Web Consortium). When they are used they are placed in the <head> section of an HTML page. WordPress uses a generic template for pages so you would place the meta code in the Theme Header (header.php).

Meta is a word from the Greek meaning ‘after’ or ‘beyond’. In a web page it is used as the name of a tag indicating that it contains ‘information about’ something. So keywords are one type of meta. Only meta keywords are ignored by search engines, other meta details are required, for example all sites must validate the character set (charset).

Medusa the Gorgon on the shield of the Goddess Athena.

The meta is often an element with an assigned value with the following syntax:

<meta name=”name of element” content=”assigned index”/>

e.g.

<meta name="description" content="Computer technology">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pause for a moment and collect your thoughts

The meta is not just for search engines but primarily for communicating directly with the browser. Keywords for example are parsed by the browser, you will see the meta in the source code but not on the live website. As we have seen, some meta details are obsolete and others are a requirement.

There are two types of meta tags. Ones that imitate HTTP headers which provide information to a browser that the web server usually sends and ones that have nothing to do with HTTP headers but provide other useful information.

If the font is not already defined in the HTTP header, this information needs to be given in the HTML code as the charset. This is done using the attribute http-equiv in a meta tag which is treated the same as information given in the HTTP header. It’s common practice to include the charset meta, just to be sure.

When placing meta code, HTML requires only a single tag <meta> whereas for an XHTML document the tag should be closed with a slash at the end as XHTML requires that all tags be closed, and HTML5 is the same as for XHTML but without the need for the slash.

To add meta tags to WordPress you would place them in the <head> section of the Theme Header (header.php). Access that file in the WordPress Admin through appearance > Editor.

Use the following:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

… and with XHTML use the following:

<meta charset="UTF-8" />

… and with HTML5 use the following:

<meta charset="UTF-8">

HTTP type meta

So at this stage of the discussion, having touched upon the placing of meta code above we saw the subtle difference between HTML, XHTML and HTML5 with the code examples for charset. In the XHTML example the placement of the slash is termed as a self closing tag.

In this post I have distinguished between the three standards of HTML because I want to touch upon document types which I will do shortly, but within the context of understanding meta tags in the <head> section of web pages, you can regard them all as being one and the same, and I will try to explain why.

HTML is a pretty controlled environment and therefore using that language to design web pages or write CSS to accompany HTML is relatively easy, constrained within this familiar and robust programming framework. When meta directives are permitted to jump outside of the pen, like behaving in equivalent ways to HTTP, then things can get complicated.

Meta tags are contained in the head section of a web page and interact at that initial stage with the server and browser by providing language and document type information. This means that to understand the HTTP meta directives we have to know what’s going on at that level. It does not mean however, that we should get bogged down in it.

It’s the server’s job to send a doctype, for example image/jpeg for JPEG images and text/html for text files like .htm and .php. Every file has a MIME type; HTML carries the MIME type text/html. XHTML carries the MIME type application/xhtml+xml.

If you designed a webpage in HTML then you should declare this at the HTTP level as follows:

<meta http-equiv="Content-Type" content="text/html;>

The difference between designing with HTML or XHTML or XML is just about the specifications. For example with HTML, tags can be written with upper or lower case whereas with XHTML only lower case is permitted. XHTML is a subset of XML, so for a page designed like this we would use:

<meta http-equiv="Content-Type" content="application/xhtml+xml;>

A valid XHTML/XML document served as text/html is seen as plain HTML by the browser. To address this the MIME type is changed to application/xhtml+xml as was just demonstrated. This version is not so widely supported and is superceded by HTML5 anyway which does not require the self closing tags.

What I’m saying is, that whenever you come up against all these version types and different language sets, you begin to realise that keeping it simple is the best policy. In the grand scheme of things the differences between page types as seen in the charset code examples are just not worth worrying about and it doesn’t matter which example is used. In HTML 4.01, charset is not even specified for use in a meta element but a browser will still process it if it is present.

All that’s needed in your meta is the simple HTML declaration accompanied by the standard character set UTF-8, so our complete meta line would be:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

In theory any character encoding can be used, but you want that which most browsers understand. The simplest way is to use: charset="UTF-8 because it is the easiest to type and because ASCII code is a sub-set of UTF-8 and together they are used for more than 80% of web pages.

The !DOCTYPE

The <!DOCTYPE> declaration is not an HTML tag or doctype like text/html it is the initial HTML header that communicates to a browser the version of HTML, known as the Document Type Definition (DTD) and the document type variant, for example XML.

It may seem pointless including it these days but it performs several important tasks. It tells the browser which method to use to render the page which ensures the document is treated the same by all browsers. So we might use: <!DOCTYPE html>.

We have placed emphasis on including the encoding of our document in the form of an HTTP meta tag using the directive http-equiv. Even if you know it appears in the HTTP Header it is best practice to also include it in your HTML, so it is always declared with a charset attribute.

The start of our web page is now structured like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
</html>
Pause for a moment and collect your thoughts

THE DESCRIPTION

An important component of SEO is the description meta tag. Search engines use this for the page description summary on the results list. If it’s not there then search engines will determine the most relevant description. So here you can control the choice of important wording in search results. Don’t use more than 150 characters for the description.

<meta name="The WebPapa Website for Geeks" content="Awesome Articles, Tips and Code">

In WordPress the site title and description are applied in the WordPress Admin, select Settings > General and you can set the title and descriptor there. this is where the famous words ‘Just another WordPress website’ appear.

The page title is not a meta item and has its own tag line. So if you want to include it in your HTML then place it in the <head> before the meta tags. It’s important to give this some thought as it will appear in several places, for example as the default name when creating a bookmark or favourite and as the title in a browser tab. Don’t use more than 50 characters for the title.

ROBOTS

There are some meta items that remain quite useful. The robots tag lets you specify that a particular page should not be indexed by a search engine and cuts your page off completely from the outside world. You might use it when a site is under development.

This setting can be applied site-wide in the WordPress Admin through Settings > Reading, where you will see the check box to turn off search engine discovery.

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

The name ‘robots’ conforms across all search engine crawlers.

It’s a tidy one to know about because you can get deeper with it. Use NOIMAGEINDEX to instruct robots to index text but not images, handy if you should want to keep a tighter grip on the distribution of your private and copyrighted photos. Similarly NOIMAGECLICK states not to link directly to an image, and NOARCHIVE states not to save a copy of the page off site.

If you are really limiting the content of your site you might prevent a copy of it being stored on a proxy server being used as a cache, by using the following meta tag line.

<meta http-equiv="cache-control" content="no-cache"/>

In practice this level of control would only benefit a site that is constantly updated like a news page because it forces the browser to reload from the web server instead of the cache. In most cases it is not needed. But in some cases the expiration time of data on the cache can be set so that the browser looks at the source server on the next page load after that expiry time.

<meta http-equiv="expires" content="Sat, 11 Feb 2017 00:00:00 GMT"/>

Or you can set the expiry time in seconds as shown here (12 hours):

<meta http-equiv="expires" content="43200" />

This is the opposite code to ensure everything is totally discoverable:

<meta name="ROBOTS" content="INDEX, FOLLOW">

Of course there is a neater way to communicate directly with web crawlers if using your own domain. Not all search engines will take too much heed from meta tags but spiders do generally look for a robots.txt file on entering a domain root.

The following text in a robots.txt file placed in the root of the domain would turn away a web crawler that discovered your site:

User-agent: *
Disallow: /

COPYRIGHT

Another way to retain control over the content of your site is by using Author and Copyright meta tags.

<name="author" content="Author name">
<meta name="copyright" content="Copyright owner">

VIEWPORT

Since the Google search engine has placed a higher importance on mobile devices, a website that is not geared first for mobile viewing will be down-ranked by the Google index. Similarly, since HTML5 allows the viewport to be set, the following meta should be used on all sites:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In this respect the viewport value tells the browser about viewing dimensions; device-width instructs the browser to follow the screen-width of the device and the initial-scale sets the initial zoom level on page load. This meta tag alone will do a lot regarding viewing across mobiles and laptops. It’s probably the most important for the web designer.

SUMMARY

At the end of our meta adventure we have a reasonable set of instructions to place in our web page. Any HTTP header directives should be within the first 1024 bytes so place these first because they are more important. Remember they use the http-equiv name.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="43200">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="author" content="John Doe">
<meta name="copyright" content="WebPapa.co.uk">
<meta name="description" content="Computers Design">
<meta name="keywords" content="HTML,CSS,PHP,JavaScript,WordPress">