Get a SEO Quote
How to SEO in2016
  • On page optimization
  • + User behaviour optimization
  • = Top search engine rankings

Tags and meta tags in SEO

How to define the DOCTYPE for a website

Declaring technically what the page is via the DOCTYPE helps the search engines know how to handle and process it for indexing. Note some spiders that crawl the net aren't clever enough to work out your doctype from the code so they may ignore or incorrectly index your website causing your search engine rankings to suffer.

It should also be reviewed every time you redo your SEO because your code may have been updated or changed but the doctype declaration was overlooked.

Which one is right for your website depends on your code but a full list of available doctypes can be found on http://www.w3.org/QA/2002/04/valid-dtd-list.html

Note the wrong doctype declaration is just as bad as, or worse than, none at all. If you are unsure which one is right for your pages then contact the person who made your website.

How to get your Title tags right

The title tag comes just under your DOCTYPE declaration and after your <head> tag. Is it important? Oh Yes!

  • Your title tags should be different for every page of your website
  • The title tags should contain at least one, potentially two of the keywords that appear on the page (on the page, not in the keyword tag that we'll cover below.
  • If your title tags contain your keyword(s) and these keywords appear in the URL, in the heading tags and in the context of the page's content then the search engines are going to place great importance on them
  • Your title tags are often (but not always) displayed in the search results so they should be attractive to users and encourage them to click through to your website

Getting your title tags too clean for search engines but wrong for humans will affect your Click Through Rate (CTR) from search results - how often people click to visit your website compared to how often it appears in the search engine results - which means your rankings are going to suffer.

Lets take an example of a flower shop based in Happy Town. They have a website but didn't bother to sort out their title tags. It wasn't important because they were number one in the search for "Flowers Happy Town" simply because no one else had a website. When someone carried out their search this is what they saw.

Home Page
Flowers for all occassions

Now there were several other flower shops and two more got a website so then search results looked like this

Home Page
Flowers for all occassions

Fresh Flowers for all of Happy Town, daily deliveries
Live in Happy Town and need fresh flowers? Call us or visit out shop to see our great selection of daily deliveries.

Happy Town Flowers - flowers delivered to your door 7 days
Buy flowers online and get them delivered to any address in Happy Town 7 days a week. Widest selection of flowers on the market

Well it's pretty clear where people are going to click, and which website they are going to ignore, even though our original page is still number one. Search engines are going to pick up on that, and the website that was at number one will be moved down the rankings.

And once again remember, to help search engines understand the structure of your site:

Every page on your website should have a unique title

Search engines sometimes rewrite title tags

Google does this all the time if it feels your title tag does not relate correctly to the content of your page or to the search that a user has just carried out. If you see the blue text in the search results does not match your title tag don't start grumbling at Google, start thinking how you could improve your title tag so it is more relevant.

Now the blue underlined texts in the search result examples above are usually what appears in the <title> tags of a page. The black text is sometimes from the description meta tags and that is where we'll go next.

Why you shoudl use description meta tags

As crucial as title tags are description meta tags. You might have heard different but I'll explain all as we go!

There should be a different one for each page. They are invisible to visitors but can be found in the code looking like this:

<meta name="description" content="[your description]" />

Note whether your meta tags end " />" or ">" will depend on your doctype so be careful and use the correct ending.

Most search engines ignore the description meta tag's content in SEO terms as it has been abused by spammers since the internet was born! However it is often shown in the search results below the blue text and it can make the difference on whether a visitor clicks through to you ... or not.

Your description meta tags should include the keywords or keyword phrases for the page where they are located within attractive text. A description stuffed full of keywords and difficult to read is not going to attract visitors so look to strike a balance.

Once again many search engines will not always show your meta description in the search results just as they ignore the title tag. They do this if they feel the description is not relevant to the page or to the search query being carried out by the user. If this is happening to you consider how to make your meta description more relevant to the page.

As a fall back simply use the first 180 characters of the page's content (not including titles) which is logical if you think about it because:

  • Search engines are more likely to show the text if you are showing it to users as well (while they don't like the idea that you are showing search engines one piece of content and users another.
  • Your opening sentence should be attractive and encourage users to stay on the page and read/watch more.

Every page on your website should have a unique meta description

Adding the date to your description meta tags

Since your description will be seen in the search engine results and be a key factor in persuading a user to visit your website then adding the date to the these meta tags is a positive move. The internet is starting to get quite old and users don't want to spend time on an outdated website, so when they see a recent date while searching they are more likely to click through.

It's best to add the date via code (e.g. using php or asp) so that it automatically updates every time a search engine robot crawls your website. Here's an example:

Fresh Flowers for all of Happy Town, daily deliveries
- Live in Happy Town and need fresh flowers?
Call us or visit our shop to see our great selection of daily deliveries.

The date shown above is added using the php code: <?php echo date('jS M Y'); ?> which will always be today (or today wherever the website hosting server is, in this case the United Kingdom).

You can go further and add the time as well but this is only really wise if your pages are crawled by the search engine robots more than once a day. Some are such as bbc.co.uk because of the constantly updated news. If yours isn't avoid it.

Putting the Title tag, Meta Description tag and h1 tag together

As said above both of these tags should be relevant to the page and the best way to do this in most cases is as follows.

  • Your <title> tag should be the same as the content within your <h1> tags.
  • Your <title> tag and content within your <h1> tags should also match your URL with dead words (like and, or, etc.) stripped.
  • Your meta description should be the first 180 characters (rounded to whole words) of the page content after your <h1> tags.

So let's say our Happy Town Flower's company is aiming to rank for keywords such as 'Happy Town Flowers', 'daily deliveries' and 'fresh flowers' their URL and tags might go something like this:

  • url: http://domainname.com/fresh-flowers-happy-town-daily-deliveries.html
  • Title tag:Fresh Flowers for all of Happy Town, daily deliveries
  • h1 tag: <h1>Fresh Flowers for all of Happy Town, daily deliveries</h1>
  • h1 tag: <meta name="description" content=" - Live in Happy Town and need fresh flowers? Call us or visit our shop to see our great selection of daily deliveries" />

About the Keywords meta tags

The keywords meta tag is never seen by users in the search results. In the HTML code of a web page looks like this:

<meta name="keywords" content="keyword one, keyword two, keyword three" />

It is now universally ignored by the major search engines and serves no other purpose than to alert your competitors as to which keywords you would like to rank for. As such do not use it. If it exists on your website at the moment remove it.

When to use the Language meta tags

Straightforward to do but easy to get wrong or forgotten. Most search engines can work out what the language is but just in case ...

<meta name="language" content="English" />
<meta http-equiv="content-language" content="en" />

These tags are extremely important on pages with two or more languages so you should declare all the languages in order of importance like this:

<meta http-equiv="Content-Language" content="en,fr,es" />

In other words English is the most important, then French and then Spanish.

Each time you use a language in the text that is not the most important (in this case not English) you should declare it like this:

To say hello in French use <span lang="fr">Bonjour</span> and in Spanish it is <span lang="es">Hola</span>

How to Character set meta tags

To make sure a spider, that is crawling your page for a search engine, can understand and read the text on your page it is vital to tell it the character set you are using. This is especially true of a website which may contain foreign letters. An example would be:

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

utf-8 is one of the most common character sets but not necessarily the right one for your page. If in doubt get your page tested first to determine the right character set.

Not essential but always useful and some search engines give a positive tick for including it because it makes for a well coded website where there is a track back to the author.

<meta name="copyright" content="[YOUR NAME OR COMPANY NAME] - [CURRENT YEAR]" />

But make sure the copyright meta tag doesn't turn into a curse. If the search engines see an out of date year they could start assuming your content is out of date. To avoid this use code to update the year. In php this would be:

<?php echo date("Y"); ?> which displays: - in other words the date where ever the server is that the website is hosted - in this case GMT (United Kingdom).

About other non meta tags

There are other tags useful to a website, not meta tags, which are ignored by the spiders in terms of determining your content but are actually important to your search engine rankings.

The Favicon

A favicon is the little graphic which shows next to the url in the browser when your website is open. In the case of this page the favicon is:

favicon for howtoseo.link2light.com

Why is it important? Well it is be stored and displayed in the favourites or bookmarks of the user and is a powerful reminder of your website. When users look through their favourites or bookmarks they are more tempted to revisit your website.

And? Well users that revisit are "loyal" and the more they do it, the better the search engines will regard your website.

To add one to your website you need a favicon.ico graphic file because all browsers understand this type of file format. The safest place to put it is in your root directory of your website. In other words the location would be at http://www.mysite.com/favicon.ico. Then place the following tag in the same place as your meta tags:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/ico" href="favicon.ico" />

Note the two types to make sure all browsers understand what you are on about!

Your favicon graphic must be 16x16 pixels in size to be accepted, the browser won't resize it for you.

But many browsers also support gif files which allows you to animate your favicon. So it is wise to also include this option with a gif file in your root directory (i.e. www.mysite.com/favicon.gif) and then add this tag:

<link rel="icon" href="favicon.gif" type="image/gif" />

Why the root directory of the website? Well not all browsers understand that it could be somewhere else, even if you tell them, and they won't find it so the safest bet is the root directory.

The Apple Icon

With so many people now using iphones to surf the internet an Apple Icon is also a good idea for exactly the same reason as a favicon. It's more user friendly and a more user friendly website gets visited more often.

This time you need to create an image 57x57 pixels in size and save it as a png. Again, put it in the root directory and then point it out with the following tag:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Throughout this text we have used the ending " />" as the way to end the tag but this may not be correct for your website. How the tags end depends on your DOCTYPE (see the top of this page).

I'm Tim Hill, a Search Engine Optimisation and Online Marketing specialist. I created this site to help others understand that SEO is not a mysterious black art!.

If your a newbie try the Getting Started in SEO page, otherwise feel free to dig around and learn more.

Find me on Google+ or get a quote if you need help.

Need Help? Seo Assistance
this man can affect your rankings