Meta Tags SEO Example : How to use and why it is important?

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. Si I would like to Share a Tutorial & Tips on SEO Meta Tags with Example

The content of the SEO 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 SEO META Tags are very important?

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 SEO Meta Tags are available. Here I’m going to explain you which to use in your web pages.

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

How to use META Tag 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>

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 Tag 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 to use META Tag 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 META 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'/>

How to use Meta Tag 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 Tag 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:

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

Download Your Free SEO Guide PDF

This 350 page PDF contains all the topics from SEO inlcuding META tags.