The tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable and sometimes it’s very important to use meta tag. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.
Easy example like
HTML5 introduced a method to let web designers take control over the viewport (the user’s visible area of a web page), through the tag (See “Setting The Viewport” example below).
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"/>
This viewport setting is to allow device height and width pipe down into the CSS, the minimal-ui is suitable for old iOS devices but it is an old definition that is no longer used in newer devices, so it is placed near the end. If you want to allow the user to scale the page remove user-scalable=no and maximum-scale=1.0.
I think now its very clear how important the meta tag is although is not visible to browser but machines.
Let’s see all possible meta tags and its description and use cases:
robots rule that allows all variation of Google indexing, including Google translate and image archive, including indexing the web-pages in open-directory
<meta name="robots" content="archive,follow,imageindex,index,odp,snippet,translate"/>
http-equiv=”Cache-Control” This is new stuff, allowing the web page and content to be served from the cache even if the case is stale (old) provided that the web page hasn’t changed, it can speed the loading a lot. the rem attribute is a ‘remark’ to help to remember- optional.
<meta http-equiv="Cache-Control" content="public,max-age=1800,max-stale,stale-while-revalidate=86400,stale-if-error=259200" rem="max-age=30minutes"/>
If you want to declare your website is safe for kids then you need to use the following meta tag
<meta name="rating" content="safe for kids"/>
Let’s organise all meta tags by their use case and nature :
Follow the group-wise meta tag as per your requirements
Basic HTML Meta Tags :
<meta name="keywords" content="your, tags"/> <meta name="description" content="150 words"/> <meta name="subject" content="your website's subject"> <meta name="copyright"content="company name"> <meta name="language" content="ES"> <meta name="robots" content="index,follow" /> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /> <meta name="abstract" content=""> <meta name="topic" content=""> <meta name="summary" content=""> <meta name="Classification" content="Business"> <meta name="author" content="name, [email protected]"> <meta name="designer" content=""> <meta name="copyright" content=""> <meta name="reply-to" content="[email protected]"> <meta name="owner" content=""> <meta name="url" content="http://www.websiteaddrress.com"> <meta name="identifier-URL" content="http://www.websiteaddress.com"> <meta name="directory" content="submission"> <meta name="category" content=""> <meta name="coverage" content="Worldwide"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="revisit-after" content="7 days"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">
OpenGraph Meta Tags :
<meta name="og:title" content="The Rock"/> <meta name="og:type" content="movie"/> <meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta name="og:site_name" content="IMDb"/> <meta name="og:description" content="A group of U.S. Marines, under command of..."/> <meta name="fb:page_id" content="43929265776" /> <meta name="og:email" content="[email protected]"/> <meta name="og:phone_number" content="650-123-4567"/> <meta name="og:fax_number" content="+1-415-123-4567"/> <meta name="og:latitude" content="37.416343"/> <meta name="og:longitude" content="-122.153013"/> <meta name="og:street-address" content="1601 S California Ave"/> <meta name="og:locality" content="Palo Alto"/> <meta name="og:region" content="CA"/> <meta name="og:postal-code" content="94304"/> <meta name="og:country-name" content="USA"/> <meta property="og:type" content="game.achievement"/> <meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/> <meta property="og:video" content="http://example.com/awesome.swf" /> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video" content="http://example.com/html5.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.com/fallback.vid" /> <meta property="og:video:type" content="text/html" /> <meta property="og:audio" content="http://example.com/amazing.mp3" /> <meta property="og:audio:title" content="Amazing Song" /> <meta property="og:audio:artist" content="Amazing Band" /> <meta property="og:audio:album" content="Amazing Album" /> <meta property="og:audio:type" content="application/mp3" />
Create Custom Meta Tags :
Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags. Here are some examples:
<meta name="google-analytics" content="1-AHFKALJ"/> <meta name="disqus" content="abcdefg"/> <meta name="uservoice" content="asdfasdf"/> <meta name="mixpanel" content="asdfasdf"/>
Company/Service Meta Tags :
ClaimID
<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />
Apple Meta Tags
<meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">
Internet Explorer Meta Tags
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" /> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" /> <meta name="mssmarttagspreventparsing" content="true"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="red"/> <meta name="application-name" content="Rey Bango Front-end Developer"/> <meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/> <meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" /> <meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" /> <meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" /> <meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" /> <link rel="shortcut icon" href="/images/favicon.ico" />
Blog Catalog Meta Tags
<meta name="blogcatalog" />
HTML Link Tags :
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martini" /> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <link rel="fluid-icon" type="image/png" href="/fluid-icon.png" /> <link rel="me" type="text/html" href="http://google.com/profiles/thenextweb"/> <link rel='shortlink' href='http://blog.unto.net/?p=353' /> <link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/' /> <link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/' /> <link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/' /> <link rel='prev' title='OpenSearch and OpenID? A sure way to get my attention.' href='http://blog.unto.net/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/' /> <link rel='next' title='Not blog' href='http://blog.unto.net/meta/not-blog/' /> <link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos" /> <link rel="self" type="application/atom+xml" href="http://www.syfyportal.com/atomFeed.php?page=3"/> <link rel="first" href="http://www.syfyportal.com/atomFeed.php"/> <link rel="next" href="http://www.syfyportal.com/atomFeed.php?page=4"/> <link rel="previous" href="http://www.syfyportal.com/atomFeed.php?page=2"/> <link rel="last" href="http://www.syfyportal.com/atomFeed.php?page=147"/> <link rel='shortlink' href='http://smallbiztrends.com/?p=43625' /> <link rel="canonical" href="http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://smallbiztrends.com/xmlrpc.php?rsd" /> <link rel="pingback" href="http://smallbiztrends.com/xmlrpc.php" /> <link media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
Wrapping Up
This article will help you to understand the HTML meta tags. We hope this article will help you. You can see our other articles to learn How to Create a Frequently Asked Question Page- FAQ in WordPress
How to enable Inner Blocks in your Gutenberg Block
If you like this article, please like our Facebook Page to stay connected.
