Providing Solutions For Web Development Languages and Platforms

Meta Tags in HTML Provides Metadata For The Document

Meta Tags

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.

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.

Browser Support


Element Chrome Edge Firefox Safari
<!DOCTYPE>

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 name="keywords" content="HTML, CSS, JavaScript, jQuery, PHP">

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://www.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.

<meta charset="UTF-8">

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


Attributes Possible Values Description
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
http-equiv content-type
default-style
refresh
Defines an HTTP header for the value set in content attribute.
Must need content attribute with it
name application-name
author
description
generator
keywords
viewport
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. –

Leave a Reply

%d bloggers like this: