November 13, 2014


The Different Faces of META Tags

We all know that Meta tags are important tags that let your website get listed in the search results of search engines like Google, Yahoo and Bing. We can say that Meta tags are nothing but tags that fall under the head tag of your HTML page which contains information about the website. It is after reading these tags that the browser or search engine gets to know about the website. Search engines use the keywords given in the Meta tags to select the Website and display it in their results.

This is not the only thing the Meta tag is meant for. In this article, I have shared some other aspects of Meta tags.

First, let’s have a look at some basic Meta tags:

<meta name="keywords" content="your, tags, text/HTML; charset=UTF-8” http-equiv=“content-type”/>

Meta tags contain four different attributes:

  1. Name attribute: Explains what the META tag is meant for. META tag behavior depends only upon the value of the name attribute. For example: if its value is keywords, then that META tag contains the keywords for the website or the page.
  2. Content attribute: Contains values such as keywords, description and text/HTML. It depends on the value of the name attribute.
  3. Http-equiv attribute: Provides the HTTP header for the value/ information in the content attribute. The values of this attribute are: content-type, default-style, and refresh.
  4. Charset attribute: Explains the character encoding of the HTML document.

Power of META tags:

More commonly, a Meta tag is used for the description and keywords of the webpage. Now let’s see other scenarios where the Meta tag is used:

  1. Refresh META tag: <meta http-equiv="refresh" content="30; URL=">

Refresh Meta tag is used to refresh the page periodically within the given seconds in the content attribute. It is useful when we want to refresh the page periodically to show the latest updates in a website.

The above mentioned tag is used to redirect the webpage to another URL in 30 seconds.

  1. No Cache META tag: <meta http-equiv=”Pragma" content="no-cache">

Pragma tag is useful for preventing website cache. This tag has some inconsistency with browsers, such as Netscape and IE. To overcome this issue, you can use the below tag:

<meta http-equiv="Expires" content="-1">

This sets an immediate expiration of the cache, which kills the cache from the moment it gets created. Including both the Meta tags in the head tag gives a better result.

  1. IE compatibility META tag: <meta http-equiv="X-UA-Compatible" content="IE=edge">

In the IE browser, some intranet websites load in the quirks mode. Due to this, the website will not render as expected. To overcome this, we can include the above Meta tag. Once this is loaded, it changes the IE browser’s document mode to the available higher version in the user machine. If the user is using IE 9, then it sets the document mode to IE 9 standards. We can mention the version of IE directly in the Meta tag itself.

<meta http-equiv="X-UA-Compatible" content="IE=9">

We can mention the versions as follows:

IE=8, IE=7 & Chrome 1

  1. Mobile META tags: Apple has some of its own META tags for mobile

<meta name="apple-mobile-web-app-capable" content="yes" />

The above Meta tag displays the website in full screen mode by hiding the default Apple toolbars, address bars, and menu bars. This will provide more view space in the mobile.

<meta name = "viewport" content = "width = 320, initial-scale = 1, user-scalable = no">

This is a very important tag targeted for mobiles, to view websites in full width in iOS Safari. Attributes in the viewport Meta tag is given below:

  • Width – This attribute specifies the width of the website in the user device. As the name portrays, it mentions the width of the device in pixels. 320 is the minimum width when a device is viewed in the portrait view. We can set a value called “width = device-width". The website will fit perfectly with the user device in any width more than 320.
  • Initial scale – This is the value of the zoom level when a website is loaded in iOS Safari. If we set values like 1.5 or 2.5, then the website will be zoomed accordingly.
  • User scalable – This attribute is to prevent the user from zooming in or scaling the website. Once its value is given as “no”, then the user cannot zoom or scale the website further.

<meta name="format-detection" content="telephone=no">

On iPhone, all series or sequence of numbers are shown as links. This feature in iPhone allows the user to make calls to those numbers by clicking on it. This feature also displays the sequence of numbers which are not exact mobile numbers, as links. By adding the above Meta tag, all the improper mobile number links are removed.

  1. Expires META tag: <meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT">

Expires Meta tag is to mention the expiry date of the page or document after which the document is expired. Web robots will delete the expired documents from the search engine or schedule a revisit to those web pages.

  1. Revisit META Tag: <meta name="revisit-after" content="7 days">  

Allowing too much of crawling from a spider is not good for a website. To control the frequency of crawling, we can use this Meta tag. We can mention the period when we would update the page or website. So, this Meta tag tells the spider when to revisit that page and do the indexing.

Final thoughts

Using quite a number of specific Meta tags, one can obtain a better result in SEO optimization. Lots of Meta tags are available with lots of usages. Choosing the right ones and including them in the website is very significant in getting your website listed at the top of search engine results.