When building a website, you will soon learn the importance of meta tags. Meta tags in HTML are basically how your website communicates with search engines and web servers. Located within the head codes (between <head> and </head> in your website source codes), meta tags can include anything from page description and keywords to author name and copyright information.
There are numerous meta tags that can be added to your head codes, but for the sake of time and space, we’ll stick with just a few of the more common and basic tags.
Description and Keywords
Of the many meta tags that can be included, writing a description of your web page and adding good keywords are probably the most well known of all. These are designed specifically to tell search engines what the page is about, where it should be indexed, and what types of searches should look for your website.
To add a description, simply type the following in your website head codes, within opening and closing HTML brackets:
<meta name="description" content="Type your description here, such as: Article about how to write meta tags.">
To add keywords, do the same as above, but change "description" to "keywords," like this:
<meta name="keywords" content="article,meta tags,html,web design">
Notice that your keywords in the meta tags should be separated with a comma.
Author and Copyright
If you’d like others to know who designed the website, as well as who owns the copyright, a great way to do this is through meta tags. In addition to adding the information in the footer area of the website itself, you can also place it within your head codes.
<meta name="author" content="Your Name">
<meta name="copyright" content="Copyright © YEAR Your Name">
Refresh Page and Don’t Cache
The codes so far in this article have only been to talk with search engines, but there are times when you’ll want to direct the hypertext markup language (HTML) to the web server or proxy. For instance, if you want to have the page to automatically refresh, you can put this code in your header:
<meta http-equiv="Refresh" content="0;URL=http://www.your-new-website.com/">
Adding "http-equiv" is the call to your web server or proxy. Refresh tells the server to refresh the page, and the information within content tells it when (0 stands for zero seconds; change to your preference) and where to go next. This code is particularly useful for those times when you move a page. Rather than leaving a link behind or using the preferred 301 redirect, you can simply use this code to automatically send them to your new page.
Another server code is directed to browsers. Whether you want a browser to cache your page or not, it’s up to you with this code:
<meta http-equiv="pragma" content="nocache">
A warning about using the nocache code: Caching helps your website to load faster, so use this code with caution. It can slow things down for your visitors when it is disabled, and if it’s too slow, they might not want to come back.
Indexing and Following
Whether you are aware of it or not, search engines send "bots" to your page for indexing. You can tell the robots what to do and how to index your website by using your choice of the below codes. Follow and nofollow simply means that you either want the bots to also index the links found on the page or not. Index means you want the search engines to index your page; noindex means you don’t.
<meta name="robots" content="all">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="none">
These are only a few basic meta tags that can be used in HTML. As mentioned, there are many more out there, but these are certain to get you started in the right direction.
See all of the above meta tags together: