HTML meta tag

<meta> tag in HTML

The <meta> is defined metadata.

The <meta> tag does not show anything on the web page, but it is used to specify details about the website.

Other websites can read this <meta> values, mainly search engine and social media websites to display the result based on some of this meta contents.

The <meta> tag should be written inside the <head> tag.

Example


Important <meta> tag Attribute values

The following are some of the important attributes values of <meta> tag.

  • meta tag charset attribute
  • description value for name attribute
  • keywords
  • author and copyright
  • robots

meta tag charset attribute

It is used to specify that the special characters in web pages are denoted correctly.

  • UTF-8 - Character encoding for Unicode
  • ISO-8859-1 - Character encoding for the Latin alphabet

description value for name attribute in meta tag

The description meta tag is used mainly on SERP (Search Engine Results Pages).

It is used to provide description about the web pages in the search engine results.

keywords value for name attribute in meta tag

keywords value is used to provide keywords of a web page, which is used by the search engines to find the information to be shown in the search results.

In earlier days, it is considered as one of the important SEO meta tags. But it can be controlled, so recent days it has been rarely used.

Each keywords must be separated by commas.

author and copyright value for name attribute in meta tag

author and copyright values are used to provide the information about who created and who owns the web page.

In some Content Management Systems (CMS), these are inserted automatically.

Example

robots value for name attribute in meta tag

robots meta tag is used to specify whether the web crawlers can follow the HTML links, if the web page can be added to the search engine index or not.

By default web crawlers can follow the HTML links and the web page can be added to the search engine index. But we can provide it manually or we can stop it.

The example shows how to set the properties manually, and how to block it.

To allow web page to appear in search engine result.
To block web page to appear in search engine result.
To allow web crawlers to follow the outgoing HTML links.
To block web crawlers to follow the outgoing HTML links.

http equivalents

It contains a value that can alter the work between an user and an server. The value is given inside an content attribute. The possible values that can be present are,

cache-control

Recently viewed web pages are stored in cache memory. If the web page is accessed again the informations in the cache memory will be loaded.

Browsers stores the files in Temporary folders in the system.

cache-control can have following values,

  • Public - stored only in the public shared caches
  • Private - stored only in the private cache
  • no-Cache - before caches send request to origin server for validation
  • no-Store - do not store the informations

Example

expires

Instead of completely removing the storage of the cache memories, we can set the expires value in seconds or date.

If set after the specified time the browser will automatically load the HTML documents.

Example 1 - Expire value using seconds

Example 2 - Expire value using date

refresh

refresh meta tag is used to for redirecting a web page to another. It can also sets the number of seconds the browser should wait before automatically redirecting the user to another page or before reloading.

In the following example web page is redirected to an another google.com, 10 seconds after loading.

Example 1 - To refresh after 10 seconds

Example 2 - To refresh and redirect to www.google.com after 10 seconds


<meta> tag Attributes for Social Media

These tags are used to control and display the web page contents in Social media like Facebook, twitter.

Twitter Card data

Some of the meta tags used for Twitter are,

  • twitter:card - The type of information (summary, photo, or video) to be created.
  • twitter:url - The URL that should be used for the information.
  • twitter:title - The title to be displayed.
  • twitter:description - A summary or description about the page in 200 characters.
  • twitter:image - Image path which has to be displayed.
  • twitter:site - The Twitter username, including the '@' symbol.
  • twitter:creator - The Twitter username of the individual author of the content.

Example

Open Graph data

Some of the meta tags used for Twitter are,

  • og:url - Original page sources url.
  • og:title - The title for the contents.
  • og:description - Description about the content.
  • og:image - The image appearing when shared.
  • og:type - The type of content added.
  • og:video - url of an video to play in news feed.
  • fb:app_id - used to view the traffic from Facebook to the site.
  • og:locale - used to set the default language.

Example