What is Meta Tags?

Website Meta Tag provides metadata, which is basically data(information) on your webpage’s content. Simply we can say, website Meta Tag is a piece of content which summarize webpage’s content. Meta tags are typically used to specify page description, keywords, author of the document, last modified, social graph like facebook, twitter etc. Meta tags included in the webpage’s head section in HTML. It’s not visible on the rendered webpage for the users but it will be machine parsable. Meta tags are only readable by search engine, web crawlers and browsers (to display content or reload page). If you want to view meta tags you have to open a website’s source code. There is different kind of meta tags available. We are going to talk about these steps by steps. Take a look at the following snippet, meta tags looks like this.

meta tag example

Does Meta Tags Useful for SEO?

Yes! You can call them key of your page ranking. Title and meta tag description is summary of your page’s content. So, when SEO bots lands in your website at first they read your webpage title and the meta tags. So, information of your webpage title and description should be meaningful. Because your website / webpage will be categories with your content. If you take a look in Google search, when you search something there, you will see the result like following :

search engine results

A beginner’s guide to writing title & meta tags

There are various types of meta tags. I will try to cover major of them. As you have seen the above screenshot how title and meta description tags are important for search engine. There are few other essential and non-essential tags. We are going to talk them one by one, which meta tags should be useful and which should be non-worthy. There are major 3 types meta tags you should know first.

  • Meta Description Attribute - A summary description of the page. This should be impressive and attractive. Because this is going to be search engine search description for your webpage as I’ve shown in previous screenshot. Make sure description no longer than 155 characters. Take a look at the following example:
<meta name="description" content="your description should goes here">
  • Meta Keywords Attribute - A series of keywords should be relevant to the page.
<meta name="keywords" content="keyword1, keyword2">
  • Meta Robots Attribute - An instruction to search engine crawlers (robots or “bots”) as to what they should do with the page.
<meta name="robot" content="nofollow">

There is some good meta tags you should have on every page of your website.

  • Meta content type – You should define your webpage character set at the beginning of the HTML page. Following tags are used to do that services. Here I’ve mentioned 2 types but there can be lot of other different types of character set.
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML 4.01: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
HTML5: <meta charset="UTF-8">
HTML5: <meta charset="ISO-8859-1">

  • Meta Description - As I’ve described before in meta description attribute, this is very important tag you should have on your every page.

  • Viewport – This is use to define for configuration of different devices viewport. With this tag designer can take control over the viewport of smaller devices. Such as mobile phones. This tag gives the instruction to browser, how to control the page’s dimensions and scaling. If you run your website for speed test in Google PageSpeed Insights you can get more information about it. The standard tag is:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above meta tag has 2 parts in content section.

  1. width=device-width - tells the browser to set the wide of the the website to the screen wide of device.
  2. initial-scale=1.0 - sets the zoom level of website when it loaded first time in browser.
  • Title - Although title doesn’t start with < meta > tag but it’s very important for SEO. Whenever you search anything in search engine, you see a bold title in the each results. That’s that content taken from your website’s title tag. Your title should be maximum length of 60-70 characters.

There 4 tags are most important tags and you should have that on all pages of your website.

Search engine tags or robot tags

There is few rules to write a robot meta tag. We will discuss them one by one. Firstly, a robot meta tag can have multiple content values. You can write them by comma seperated in the content section of your tag’s or can have them in seperated tags. But both will give you same result.

<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">

The above 2 tags are equivalent to the following tag:

<meta name="robots" content="noindex, nofollow">

When you have multiple content values you can have space after comma or not. Search engine will understand it same way. Following both tags are given same result in search engine.

<meta name="robots" content="noindex,nofollow">

<meta name="robots" content="noindex, nofollow">

You should avoid defualt robots tags. Such as, by default search engine will visit your website and index your webpages if you submit your website in webmaster tool. So, shouldn’t write tags with default content.

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

In the content of your robots meta tags, it doesn’t matter if you write it in upper case or lower case letter. Both have same value.

<meta name="ROBOTS" content="NOODP">
<meta name="robots" content="noodp">
<meta name="Robots" content="NoOdp">

Valid meta robots content values

  • NOINDEX - This tag prevents page from being index in search engine. Suppose, you don’t want to index your login page in search engine. you can have a tag with this content in that page.
  • NOFOLLOW - This tags prevents bots to follow any links of a page. Suppose, you put this tag in a page and in that page there are few links from 3rd party website. The bot will not follow that links.
  • NOARCHIVE - when you search in search engine, sometimes you see a screenshot or some content right side(google.com) of the results. These content are cached content. If you want to prevent to being cached your website you can use this tag. This tag is useful if your website has live data or anything which changes frequently.
  • NOSNIPPET - prevents a description from appearing below the page in the search results, as well as prevents caching of the page.
  • NOODP - blocks the Open Directory Project description of the page from being used in the description that appears below the page in the search results.
  • NONE - equivalent to “NOINDEX, NOFOLLOW”.

You can read more from Google Webmaster Blog

Must-Have Social Meta Tags for Twitter, Google, Facebook, & More

As a website owner you must want to get more traffic to your website. So, you want to share you content to social media like, facebook, twitter etc. To easily do that you can have some specific social tags in your website to boost it up. There is lot of social tags but I’ll try to share some necessary tags which is important to shareing in social network.

  • Twitter Cards: Summaries, Images, Galleries, Apps, Video, Audio, and Products
  • Pinterest Rich Pins: Products, Recipes, Movies, and Articles
  • Google+: Articles, Blog, Book, Event, Local Business, Organization, Person, Product, and Reviews
  • Facebook: Articles, Photos, Audio, Video, and more

Social Media Tag Template: Article

We will see all the basic tags to advance tags here step by step. You can add these tags in different way. Such as, you can add minium, standard or full tags. To use full tags you shuld include the itemscope and itemtype attributes in your html tag starting of the HTML page. Let’s take a look at the following social tags templates.

Basic meta tags for website:

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content=" description should no longer than 155 characters." />

Minimum Twitter Card data tags template

<meta name="twitter:card" value="summary">

Standard Twitter Card data tags template

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">

Standard Twitter Summary card images must be at least 120x120px

<meta name="twitter:image" content="https://www.codesolz.net/image.jpg">

Full Twitter Card data tags template

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">

Full Twitter summary card with large image must be at least 280x150px

<meta name="twitter:image:src" content="https://www.codesolz.net//image.jpg">

Minimum Open Graph data tags template

<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.codesolz.net/" />
<meta property="og:image" content="https://www.codesolz.net/image.jpg" />
<meta property="og:description" content="Description Here" />

Standard Open Graph data tags template

<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.codesolz.net/" />
<meta property="og:image" content="http://codesolz.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="CodeSolz" />
<meta property="fb:admins" content="Facebook numeric ID" />

Full Open Graph data tags template

<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.codesolz.net//" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. CodeSolz" />
<meta property="article:published_time" content="2020-01-01T05:59:00+06:00" />
<meta property="article:modified_time" content="2020-02-01T15:08:47+06:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

Schema.org markup for Google+

<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="https://www.codesolz.net//image.jpg">

Social Media Tags Testing and Approval Tools

Conclusion & Best Practice Tips

Finally, lets revel some key points. You should have a great attractive title and meta description tag in your webpage to get good ranking in search results. The above tags are the good for your starting but if you want to learn more about it or want to go further more check the following articles.