Everyone wanted their websites to be listed in the top 10 results in the google search. We know that its not an easy job and it will not come overnight. We should optimize our page META Tags to get Google to rank and index our pages faster. SEO (Search Engine Optimization) plays a major role in the internet industry.

The content of the META tags provides the short information about the HTML page rendered in the browser. No other html tags can able to explain the metadata.

Why META Tags are very important in SEO?

Meta Tags were taken by search engines to index our web pages based on the title, description and keywords we provided in the html document.

There are so many Meta Tags are available. Here I’m going to explain you which to use in your web pages.

  • META Title
  • META Description
  • META Keywords
  • META Author
  • META Robots
  • META Charset
  • META Viewport

I have given my review on SEO tools – Best SEO tools I cant live without

How to use META Title?

<title> – Used the define the Page Title. It should not more than 65 characters including space.

Google will try to ignore the characters written after 65 chars in the title tag. So make sure to keep the page title as short and relevant in order to boost the traffic from search engines.

Writing good articles and keeping irrelevant titles will not listed in top 10 search results in google. So please keep some good title for your contents.

<title>How to Write Test Cases for Login Form</title>
Title appears in Google Search Results

Title appears in Google Search Results

Please check this post on how to write best title for your article – SEO Friendly Titles: 10 Tips to Make Better SEO Friendly Title Tags

How to use META Description?

Google will not consider your Meta Description for your search engine ranking, But Google will display your description in their search results below title. So there is a high chance that visitors will see your content and come to your site from search engines.

<meta name="description" itemprop="description" content="w3lessons.info is a programming blog maintained by Karthikeyan K. Tutorials focused on Programming, Jquery, Ajax, PHP,HTML5, CSS3, Web Design  and MySQL" />

In the above code, itemprop=”description” is the description of the rich snippet and should be limited to 185 characters and its for Google+

In order to get more clicks to your websites, you should write a fantastic meta description.

Most search engines use a maximum of 160 characters for the meta description.

If meta description is empty then search engines will take the description from the content of the page.

How our meta description  appears in google

How our meta description appears in google

How to use META Keywords?

Google does not use the keywords meta tag in web ranking

Meta Keywords plays a very small role in SEO but its very important when it comes to Search Engine Marketing.

A comma separated list of your most important keywords for the content that will be written as META keywords.

Use popular SEO plugins like WordPress SEO by Yoast to check your keyword density.

<meta name="keywords" itemprop="keywords" content="Facebook Scripts, Jquery Plugins, Pricing Tables, Alert Boxes, Html design, Codeigniter Tips, facebook wall scripts, w3lessons, PHP Scripts" />

How to use Author Tag?

Google, Yahoo!, or Bing do not index the Meta Author tag, so it will not help you in search engine ranking.

But Facebook shows the information in the shared data.

<meta content='Karthikeyan K' name='author'/>
Meta Author Data used by Facebook

Meta Author Data used by Facebook

How to use Meta Robots

This Meta tag is used to tell robots not to index the content of a page, and/or not scan it for links to follow.

<meta name="robots" content="index, follow" />

Above meta tag tells Google to index the page and follow any links on the page.

You can use “INDEX”, “NOINDEX”, “FOLLOW”, “NOFOLLOW” values in the content attribute.

Meta Charset

The charset attribute specifies the character encoding for the HTML document.

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

How to use META viewport

The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page to the width of the device. When the meta viewport element is absent, mobile browsers default to rendering the page at a desktop screen width (usually about 980px, though this varies across devices). Mobile browsers then try to make the content look better by increasing font sizes and either scaling the content to fit the screen or showing only the part of the content that fits within the screen.

  • Use meta viewport tag to control the width and scaling of the browsers viewport.
  • Include width=device-width to match the screen’s width in device independent pixels.
  • Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels.
  • Ensure your page is accessible by not disabling user scaling.
<meta name="viewport" content="width=device-width, initial-scale=1">

There are more attributes this tag supports:

Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

Please check the complete article on Mobile SEO – Google’s Mobile SEO Guide

viewport

20,000+ SUBSCRIBERS CAN’T GO WRONG !!!
Subscribe and get access to 200+ Demo scripts for FREE!


Source: W3Lessons