<meta> tag in HTML
The <meta> is defined as 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
Example
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.
Example
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.
Example
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 value is used to specify whether the web crawlers can follow the HTML links, or 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.
Example - To allow web page to appear in search engine result.
Example - To block web page to appear in search engine result.
Example - To allow web crawlers to follow the outgoing HTML links.
Example - 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 it is 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 set 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.