# Meta Tags and SEO

This post is part of a series called Strange and Unusual HTML.
How to Create Your Own HTML Elements With Web Components
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
This post is part of a series called SEO Fundamentals for Web Designers.
How to Create an SEO-Friendly URL Structure
The Problem of Duplicate Content and How to Solve it

Much is misunderstood when it comes to the effect meta tags have on search engine rankings. Some tags were frequently used in the past, but have since lost their power. So which tags are still useful for SEO and which aren’t?

## What are Meta Tags?

Meta tags give search engines more information about a web page. This is implicit information, meaning that it’s not visible to visitors of the web page itself.

Meta tags can be found in the <head> element of a web page. I've been asked in the past if meta tags can be placed within the <body> of a page, but it’s best not to do this. By putting meta tags in the body, some browsers may not recognize them and you’re essentially creating invalid markup.

Often, meta tags will contain a name attribute, which sets a type of metadata. The value of this metadata is expressed through a content attribute. There are all kinds of valid name-value pairs you can use within meta tags, so let's take a look at some of them.

## Meta Tags You'll Come Across

Let's quickly run down a few different meta tags which can be found within a web page.

### Meta Description

The meta description tag is probably one of the most useful meta tags. As the name suggests, it gives search engines a short description about the page. It looks like this:

This tag used to have a lot more ranking power, but algorithm updates have diminished its effect. It won’t improve your ranking, however, the meta description tag can still be useful because it is used on search engine result pages.

This means that it can still improve the click-through rate of your pages. After all, words that match the user’s search query are highlighted in bold. That’s why a good page description (which leverages keywords) can appear more relevant to the user, improving the chance of him/her clicking on it. The recommended length of a description is 160 characters.

But what happens if you have an empty description or if you haven’t used the meta description tag? Search engines will still display a short text in the SERPs, but they create one themselves. Most of these aren’t as good as they should be, meaning that you’re missing out on an opportunity to convince the user to click on the page.

### Meta Robots

We've already talked about the meta robots tag in an earlier tutorial. For those of you who didn’t have the chance to read it yet, here’s a short explanation:

The meta robots tag is used to manage the accessibility of a single web page for search engines. You can allow or disallow search engines to index the page, follow its links or archive it. For example:

This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.

Why is this tag useful for SEO? First of all it’s a simple way to prevent the indexation of duplicate content, for example the print version of a page. It might also be useful for incomplete pages or pages with confidential information.

### Title

Technically, the title tag isn’t a meta tag but it’s often put into the same basket. I’ve included it in this list because it’s very important for search engine optimization.

The title tag is required in all HTML documents and it defines the title of the document. The markup looks like this:

Very simple and very powerful. The title shows up in two different places; in the top of a web browser and in the search engine result pages. This means that the title tag has a heavy influence on the CTR and your ranking.

A good title should include keywords and it’s best to use these keywords in the beginning of the title. Remember that if these keywords match a user’s search query, they will be displayed in bold.

Another thing that you should keep in mind is the length. Google will limit titles to 70 characters, so occasionally you may have to rewrite a title to make it fit.

Dan Shure wrote an amazing article about titles, called are your titles irresistibly click worthy and viral? Really interesting stuff with a lot of tips.

## Other Meta Tags

Having covered some of the common meta tags, let's take a look at some less obvious candidates.

### Meta Content Type (charset)

The meta content type tag is used to declare the character encoding of a website. It’s best to add this piece of information to prevent browsers from guessing the character encoding which can lead to display problems, but it doesn't influence rankings or CTR.

You may be familiar with the longer Content-Type form:

Though these days it's perfectly acceptable to use the shorter, backwards compatible charset version.

This tag should be placed before any element containing text, including the title tag which we've spoken about.

### Meta Keywords

This tag used to be useful, but it has no value anymore. No major search engine uses meta keywords to judge the content of a page nowadays.

In the meta keywords tag you can store a couple of keywords about the content of the page. However, it won’t improve your ranking. If you want to implement it (though I can’t imagine why you would), use the following format:

### Meta Language

This tag was formerly used to declare the language of a web page. Informing screen readers and other text processors what language they're dealing with makes web content more accessible. This is how the meta language tag would declare content being delivered in French.

However it is seen these days as redundant. Instead, the World Wide Web Consortium recommend you determine the language of your content within an attribute, rather than a meta tag:

We contend that if you are only going to do one thing you should declare language for text-processing purposes, and that attributes should be used for that, not the other methods. - W3C

This can also apply to other elements, if the language of the contained content happens to differ from the default you've just set in the <html> element:

### Notranslate

Sometimes, Google will provide a link to a translation in the SERPs. But there may be situations where you don’t want this to happen. If you don’t want Google to translate the page, add this meta tag:

### Refresh

With this tag you can instruct the browser to automatically refresh the page after a certain amount of time. The code below, for example, refreshes the page after 30 seconds:

It’s also possible to redirect the user to a different page after this refresh. Take a look at the following example:

The use of this tag is discouraged by the W3C because it can disorient users. Furthermore it doesn’t have any effect at all on search engine rankings.

## Conclusion

In simple terms, there are three meta tags you should concern yourself with: the meta description tag, the meta robots tag and the title (once again, technically not a meta tag but often considered to be one).

The description tag is used to show more information about the content of the web page. Search engines use it in their SERPs. The robots tag can be used to prevent duplicate content, confidential pages or unfinished parts of your website from being indexed. Finally, one of the most important parts is the title tag. Keep it under 70 characters and leverage keywords within it.

In the past, the keywords meta tag was very powerful but those days are gone. It’s best to leave it alone. Other less important meta tags (when it comes to SEO) are the language tag, content tag, refresh tag and nontranslate tag.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.