18 types of html meta tags in seo

A live website is a result of HTML and a CSS combination. HTML is a Hypertext Markup Language, that helps in coding the basic structure of whole website, whereas CSS is Cascading Style Sheet. CSS gives a styling to HTML codes. For styling of website layout we need to use CSS.

For example:



Hello Word



These HTML cosdes will result in showing “Hello World” on your Website, without quotes. Now we will add inline CSS(CSS within HTML) to Hello Word to make it of red color.

Hello Word

Hope you got an idea of HTML and CSS in website development.
Why I am talking of all these in context of SEO, that is Search Engine Optimization. SEO has major 4 verticals:
On-Page optimization Off-Page Optimization Technical SEO User Intent – UX/UI
On-Page is very important to be optimized, as it related your website directly to search engines. Major On-Page factors include:
META Tags Content Optimization URL Structure Optimization
For a complete guide on On-Page Optimization I have written a separate blog post on - SEO On Page Otptimization - Best Practices and Techniques
In this blog post we are going to learn some basic concepts of META tags used in SEO for better search engine optimization.

What are META Tags?

META tags are HTML (attributes) tags that set some values in form of content to the websites’ pages. These META tags used in websites actually inform search engine about the websites’ characteristics and values.

Must-Use META Tags:

These are the Meta tags in SEO that should be on every page, no matter what. Notice that this is a small list; these are the only ones that are required, so if you can work with just these, please do.

Meta Content Type

This meta tag in SEO is necessary to declare your character set for the page and should be present on every page. Leaving this out could impact how your page renders in the browser. A few options are listed below, but your web designer should know what's best for your site.


UTF-8 (U from Universal Character Set + Transformation Format—8-bit) is a character encoding capable of encoding all possible characters (called code points) in Unicode. The encoding is variable-length and uses 8-bit code units.

Title

A title Meta tag in SEO is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result, and are important for usability, SEO, and social sharing. The title tag of a web page is meant to be an accurate and concise description of a page's content. While the title tag doesn’t start with "meta," it is in the header and contains information that's very important to SEO. You should always have a unique title tag on every page that describes the page.
Code sample

Meta Description

The infamous Meta description tag is used for one major purpose: to describe the page to searchers as they read through the SERPs. This tag doesn't influence ranking, but it's very important regardless. It's the ad copy that will determine if users click on your result. Keep it within 160 characters, and write it to catch the user's attention.
Code sample- Meta name description

Viewport

A viewport is the window in which a webpage is seen. Configuring the viewport means declaring how big that window should be. A viewport is configured by adding or editing the viewport Meta tag. Viewports help users see web content properly on different sized screens such as mobile devices
In this mobile world, you should be specifying the viewport. If you don’t, you run the risk of having a poor mobile experience — the Google PageSpeed Insights Tool will tell you more about it. The standard tag is:
Code sample- Meta name viewport

In more human terms these say..
Width: Make the width of the page the same width as whatever screen it is being shown on.
Initial scale: If the page is shown in landscape (a phone turned sideways) make the page as wide as it can be within that screen.
May-Be Used META Tags:

Social Meta Tags

Social Media Tags are useful for the websites whose content is shared a lot on Social Media Platforms. In simple manner these are tags that can allow you to set different attributes of blog post or page for different social media platforms. Attributes here are Title, Description, Feature image, etc.
For example if I want one of my post titled as - Introduction to Black Hat SEO Techniques, to be published or share don Facebook titled as Black Hat SEO Techniques – Introduction, every time a user share it on Facebook, or simply copies the post link to share it on Facebook.
We can also change the feature image to be fetched at the time of sharing. Like wise we can implement it for twitter and other social media platforms too.
These titles set for social media platforms using social Meta Tags are also called og tites.
Code Sample- Social Media Tags
Below mentioned code sample consists of 4 types of social attributers that can be used:
The basic Twitter Summary card Twitter thumbnail image Facebook Page Insights









<-- Twitter Summary card images must be at least 120x120px -->

Robots

Robots.txt is a text file webmasters create to instruct web robots (typically search engine robots) how to crawl pages on their website. The robots.txt file is part of the the robots exclusion protocol (REP), a group of web standards that regulate how robots crawl the web, access and index content, and serve that content up to users. The REP also includes directives like meta robots, as well as page-, subdirectory-, or site-wide instructions for how search engines should treat links (such as “follow” or “nofollow”).
Code Sample- Robots.txt
Blocking all web crawlers from all content
User-agent: * Disallow: /
One huge misconception is that you have to have a robots Meta tag. Let's make this clear: In terms of indexing and link following, if you don't specify a meta robots tag, they read that as index,follow. It's only if you want to change one of those two commands that you need to add meta robots. Therefore, if you want to noindex but follow the links on the page, you would add the following tag with only the noindex, as the follow is implied. Only change what you want to be different from the norm.
Code Sample- Meta name robots

Specific Bots (Googlebot)

These tags are used to give a specific bot instructions like noodp and noydir.
Noodp- No Open Directory states crawler not to crawl the websites stored in DMoz directory(closed now). Google search engine used to fetch the data from Dmoz directory to display in SERP. Using noodp we can restrict google to fetch the data from Dmoz.
Noydir- No Yahoo Directory, is same as noodp, it is for Yahoo search engine
? Code sample- noodp/noydir

Language

The hreflang attribute (also referred to as rel="alternate" hreflang="x") tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language.
The only reason to use this tag is if you're moving internationally and need to declare the main language used on the page.
Certain search engines, such as Bing, do not support the rel="alternate" hreflang="x" annotations. There are three methods that can be used to help these search engines determine which language is being targeted.
Code Sample 1 – Meta Language
HTML Meta element
In the section of the page, add a element with the http-equiv="content-language" attribute that specifies the language of the page.



Note that this meta tag is reported as deprecated but Bing still looks at this signal to understand the language and the targeted audience of a web page. Therefore it is still a good idea to implement it in the section of each page on the site with the appropriate language-locale code.
Code Sample 2 – Meta Language
HTTP response header
An HTTP header can be used to indicate the language of a page for host-wide location tagging or non-HTML document such as PDFs.
HTTP/1.1 200 OK
Content-Language: en-us
Code Sample 3 – Meta Language
tag language attribute
A language attribute on the tag (lang and/or xml:lang) should be used to declare the default language of the actual text in the page, as such:

...

Geo

Geo tags are generally used if your website/business is location specific. Placed on each page of the website, these let the search engines know where you’re based and could help improve your search engine rankings for local related search terms.
These meta tags are supported by Bing but not Google . There are three kinds: placename, position (latitude and longitude), and region.

Keywords

Yes, I put this on the "may-be used" list. While no good SEO is going to recommend spending any time on this tag, there's some very small possibility it could help you somewhere. Please leave it out if you're building a site, but if it's automated, there's no reason to remove it. They can be beneficial to relater your website or can say categories your website type to search engines.
Code Sample – Meta Keywords

Refresh

The refresh meta tag can be used to reload the page after a specified time. This is the poor man's redirect and should not be used, if at all possible. You should always use a server-side 301 redirect. I know that sometimes things need to happen now, but Google is NOT a fan.
Used in the of an HTML document, the following syntax will reload the page after 10 minutes
Code Sample- Document Refresh Meta Tag

But the same meta tag can be used very effectively to direct a user to a new web address.
By adding a semicolon and web address to the content field, we are now refreshing the current document with an entirely new one at the given address, thereby redirecting them to a new page.

Site Verification

Your site is verified with Google and Bing, right? Who has the verification meta tags on their homepage? These are sometimes necessary because you can't get the other forms of site verification loaded, but if at all possible try to verify another way. Google allows you to verify by DNS, external file, or by linking your Google Analytics account. Bing still only allows by XML file or meta tag, so go with the file if you can.
The Bad Meta Tags
These Tags are such type that are not being so well these days by website as they don’t benefit. Using these tags won’t harm your website, but what is the use of filling the head section. Let’s leave it clean. By the time you should know about them. If you feel like helpful , can use in your website

Author/web author

This tag is used to name the author of the page.
Code Sample- Author Meta Tag
Author Name

Copyright

This tag is used to state copyright of your website. Look at the footer of your site. I would guess it says "Copyright 20xx" in some form. Why say it twice?
Code Sample- Copyright Meta Tag

Abstract

This tag is sometimes used to place an abstract of the content and used mainly by educational pursuits. This meta tag appears to be equal to the description meta tag but they are different. The description meta tag is used by many search engines as a small text under the click-able title. The abstract-tag is hardly used by anybody.
But there are several search engines that use this tag to archive your page. And this increases your change that your website will be better archived, including a link to your website. But we don't suggest that you edit all your web-pages to add this abstract-tag.
Sample Code- Abstract Meta Tag

Distribution

The meta tag distribution defines the level or degree of distribution of your web-page and how it should be classified in relation to methods of distribution on the world wide web. There are currently only three forms of distribution supported by the distribution tag:
Global - indicates that your web-page is intended for everyone, Local - intended for local distribution of your document, IU - Internal Use, not intended for public distribution.
Sample Code- Distribution Meta Tag

Cache Control

The Meta cache control tag allows Web publishers to define how pages should be handled by caches. They include directives to declare what should be cacheable, what may be stored by caches, modifications of the expiration mechanism, and re-validation and reload controls.
Cache memory is extremely fast memory that is built into a computer’s central processing unit which allows programs to operate more quickly and efficiently.
Most browsers store pages that have been accessed frequently in their cache-memory, so whenever you access the pages again, the information and pictures don't have to be downloaded again. Internet Explorer stores web-pages and webfiles in the file Temporary Internet Files on your computer. This tag is set in hopes of controlling when and how often a page is cached in the browser. It's best to do this in the HTTP header.
The allowed values are:
Public - may be cached in public shared caches Private - may only be cached in private cache no-Cache - may not be cached no-Store - may be cached but not archived
Sample Code- Cache Control Meta Tag

Resource Type

The Meta resource-type tag defines the type of webpage. This helps search engines and indexes to categorize your website. Used to name the type of resource the page is, like "document." Save yourself time, as the DTD declaration does it for you.
Sample Code- Resource Type Meta Tag

There are so many meta tags out there, I’d love to hear about any you think need to be added or even removed! Shout out in the comments with suggestions or questions.