I am a C++ developer who recently started using HTML5 in my mobile apps, I don't have too much knowledge in the world of web programming and I would very much like some advice in order to fine tune my meta tags.
I need the perfect meta tags that would suit a mobile application for ios/android/windows phone/blackberry etc.
The problem is I am not sure what exactly I need and what I don't need, this is the list I have so far:
html, body
{
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-overflow-scrolling: none;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0,0,0);
transition: translate3d(0,0,0);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-text-stroke: 1px
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
margin: 0;
padding: 0;
border: 0;
background-color:#202020;
}
* {margin:0; padding:0; border:0;}
<!DOCTYPE html>
<html>
<head>
<title>$Title</title>
<meta charset="UTF-8">
<meta name="keywords" content="Test">
<meta name="description" content="Test">
<meta name="subject" content="Test">
<meta name="copyright" content="Test">
<meta name="url" content="http://www.test.com">
<meta name="language" content="en-GB">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta name="pagename" content="$Title">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="target" content="all">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="640">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-title" content="$Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="ResourceLoaderDynamicStyles" content="">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
<script>
document.ontouchmove = function(e)
{
e.preventDefault();
}
</script>
Any advice?
You need:
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- user-scalable=no" this will block zooming in your app and I would suggest to not use (bad UX)
<meta name="apple-mobile-web-app-title" content="$Title">
- Launcher Title if you dont want to use title tag for this.
<meta name="apple-mobile-web-app-capable" content="yes">
- this will hide browser interface
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- and this will change color of status bar in ios
You should add:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
-iOs launcher icons
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#222222">
- Windows icons
<link rel="apple-touch-startup-image" href="/startup-image.png">
-iOs startup-image
<meta name="mobile-web-app-capable" content="yes">
- Android/Chrome homescreen
You dont need:
<meta name="keywords" content="Test">
- no need for this, google and other search engines does not use keywords meta
<meta name="subject" content="Test">
- the subject of page. Not recommended
<meta name="copyright" content="Test">
- more for you then for anybody else
<meta name="url" content="http://www.test.com">
-this is your full domain name or web address. for SEO
<meta name="language" content="en-GB">
- W3C is recommending to use <html lang="en"> not the meta tag
<meta name="pagename" content="$Title">
- It is additional page title. No such tag in html5 spec?
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
-defines the level or degree of distribution for crawlers but there are not recognized metadata then you shouldn't use them. invalid for HTML5
<meta name="target" content="all">
- ??? not sure what it is:P some crazy windows thing old old one? No such tag in html5 spec?
<meta name="HandheldFriendly" content="True">
- future for old windows phones to say that page is viewable on small screen
<meta name="MobileOptimized" content="640">
- statement on what size of screen page was optimized for Windows but it is for old phone and it not really working. I would suggest use media queries for that.
<meta name="format-detection" content="telephone=no">
- phone number detection for Safari on iOS (bad Ux if you disable this)
<meta http-equiv="cleartype" content="on">
- Mobile IE smoothing fonts feature but this is not standard W3C tag. I would suggest do font smoothing in CSS.
<meta name="apple-touch-fullscreen" content="yes">
- this was used in early demos. you need only <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="ResourceLoaderDynamicStyles" content="">
- this should make browser to mark DOM before CSS is added. I dont think you should do that.
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- cache things. Now days that kind of stuff is done server side.
<meta http-equiv="imagetoolbar" content="no">
- IE6 feature. Obviously no need
<meta http-equiv="x-dns-prefetch-control" content="off">
- DNS prefetching.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- IE8/9 Compatible mode.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- duplicated entry <meta charset="UTF-8">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
- duplicated entries