5 Things You Can Do With HTML Meta Tag
Meta Tag is used to store a piece of information on a web page. Essentially, it is information about data. Its purpose is for browsers and search engines to understand and know the page better.
As web developers, we’re used to setting the page description, author, or keyword via meta tag. However, there are a number of meta tag capabilities that most of us probably aren’t aware of. Here I’ve put together 5 meta tag features that you may have not heard of before.
Recommended Reading: Promote Your iOS App With iTunes App Meta Tag
1. Controlling Browser Cache
When you visit a web page, it stores the web page in cache to make it load faster in subsequent visits. You may have come across an instance where your page is not updated with the changes that you’ve made. This is because the browser shows you the cached page. To prevents this, you can disable browser cache by using meta tag. To disable browser cache, you can use:
<meta http-equiv="Cache-Control" content="no-store" />
This meta tag is recognized in Firefox, Chrome, and Internet Explorer. Even more so in IE, where you can use more values and specifications to disable caching, as follows.
<meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
You can also set an expiration date to ensure that the browser will show the file that’s fresh from the server, rather than from the cache.
<meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" />
The meta data above means that document is considered expired after the specified date and time. If you set it to “0“, the browser will check for a fresh new document on each visit.
2. Setting Cookies
Similar to cache, cookies is a small piece of data that is stored in the browser by the websites you’ve visited. Websites may reuse the cookies to tailor some website functionalities. A real everyday example is when you shop in an online store. If you’ve added a few items to the basket, as long as you have not yet checked out, the items will remain in the basket even though you have left the browser for several days.
To set cookies on meta-tag you can use:
<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE">
name=data is the name of the cookies which determines the values set in it. path is the path of document. Whereas, the value of expired indicates the time and date when cookies are deleted from your computer. If you leave the expired date empty, the cookies will be deleted once you quit the browser.
As an example, if we want the cookies to expire on 31 January, 2015 we can set:
<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2015 00:00:00 GMT">
3. Refreshing Web Pages
You can set a page to refresh after a certain period. meta http-equiv="refresh" specifies a delay in seconds for the browser to refresh the page automatically. This meta-tag specification below will make the browser reload the page every 5 seconds.
<meta http-equiv="refresh" content="5">
Below, you can see that the page is automatically refreshed by the browser.
4. Redirecting
We can also use the refresh meta tag to redirect a page to a specific destination. This following example will lead us to example.com after we view the page for 5 seconds.
<meta http-equiv="refresh" content="5; url=http://example.com/">
You can see it live below.
To redirect the page immediately, set it to 0, as follows:
<meta http-equiv="refresh" content="0; url=http://example.com/">
5. Page Transition
You can also apply transitions to your web pages with meta-tag in a way that is similar to PowerPoint. The syntax of page transition with meta tag looks like below:
<meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-enter" content="blendTrans(duration=sec)" />
Note that this only works on ancient Internet Explorer since page-enter and page-exit are Microsoft’s proprietary meta tag specifications. You can specify how long the transition will run for using duration. The Transition should be filled by a number/integer between 0 – 23 that refers to the transition type provided by Microsoft. Whereas, <meta http-equiv="page-enter" content="blendTrans(duration=sec)" /> is another value that comes without a transition type.