Meta Tags in HTML and XHTML plays a crucial role as these describes structured metadata i.e. Data (Information) about Data. Meta tags HTML provides metadata about the document. Meta tags will never be displayed on the browser. It doesn’t affects the presentational view. They are just parsable to machines.
Web Designers can control the viewport (visible part of the page at once) by using Meta Viewport.
Syntax to use meta tag in HTML
<meta attribute(1)="..." attribute(2)="..." ... attribute(n)="">
Use of Meta Tag in HTML :
- To compete with the use of an HTTP Response Header Field.
- To provide metadata to machines about the web page.
The metadata in html can be described using Meta Tags which then can be used by Browsers, Search Engines or any other Web Services.
<meta>) tags are placed in the Head (
<head>) section of the HTML document only.
Meta tags are empty elements as these need not be closed but includes information using various attributes.
Multiple Meta Tags can be included in a single HTML document using different attributes.
This is useful but not a necessary part of the document as it does not affects the appearance of page.
XHTML needs Meta tag (
<meta>) to be closed properly as –
</meta>. But HTML does not need so.
Metadata in HTML is very important to provide data about data.
Various Meta Tags with Examples
All the meta tags including deprecated ones are here detailed with examples. This Meta tags list can make you understand meta tags meaning and the use of meta tag in html. Have a read.
Meta Viewport – Setting The Viewport
Meta tag viewport makes the website responsive and to look good on all devices. We can also say it as meta tag for responsive web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta Keywords – Defining Keywords
Meta tag keywords helps to define keywords usable for Search Engines like Google, Yahoo etc.. It maintained its popularity from 1995 since September 2009, when Matt Cutts announced that they were no longer taking into account defining keywords. Before that it is known to be as meta tag for google.
Meta Description – Defining Description of your page
Meta tag description allows you to describe your content in short. This description is useful for Search Engines to understand What your document is about. You can find this in SERP (Search Engine Result Page) underneath link showing your web page. If you forgot to give a description of your content, No need to worry, Intelligent Search Engines like Google, Yahoo etc. itself can get it from your content. If you say Meta tag description as Meta tag for SEO, You are absolutely right.
<meta name="description" content="Providing Solutions for Web Development">
Meta Author – Defining Author of the page
You can easily set the author of the page by using Meta Tag Author.
<meta name="author" content="John Doe">
Meta Refresh – Defining Refresh Time
If you are a frequent updater on your website/blog, You can set the refresh interval by Meta tag refresh after which your page will get refreshed automatically. You can set interval to meta refresh HTML.Interval will be in seconds.
<meta http-equiv="refresh" content="30">
Meta Redirect – Defining Redirection
You can redirect your web page to any other page by defining url in Meta Refresh that makes it a meta tag redirect.
<meta http-equiv="refresh" content="30;url=https://developerspost.com/">
Meta Robots – Defining Some Restrictions for Search Engines
Using Meta tag Robots, you can set whether to index your web page or not. It can also let you set whether to follow links on your page or not. These are known to be as Meta tags for Search Engines as they feeds Search Engine Bots. There are four variants, you can use any one depending upon your needs.
<meta name="robots" content="NOINDEX, NOFOLLOW">
Restrict Search Engines from both Indexing your web page and Following links from your web page.
<meta name="robots" content="INDEX, NOFOLLOW">
Restrict Search Engines from only Following links from your web page. Allows to index.
<meta name="robots" content="NOINDEX, FOLLOW">
Restrict Search Engines from only Indexing your web page. Allows to follow links.
<meta name="robots" content="INDEX, FOLLOW">
Allows both indexing and following.
Meta Charset – Defining Charset
Meta Charset utf-8 allows you to set character encoding by simply using charset attribute. charset attribute is newly added in HTML5.
In HTML 4.01, charset is defined by the attribute http-equiv.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Attributes for Meta Tags
|charset||character_set||sets character encoding for the document (New in Meta Tags HTML)|
|content||text||sets value for the property defined in name/http-equiv attribute|
|Defines an HTTP header for the value set in content attribute.
Must need content attribute with it
|sets name for the property describing metadata|
There are a lot of Meta Tags Generator over the internet which comes in handy. Here are the tools –
Already generated Meta Tags, You can check their Perfection by Meta tags checker. There are a lot of Meta Tags Checker over the internet. Here are a few. –