Meta Tags

README.md

#Meta snippets #####List of snippets:

• the usual ones (charset/keywords/...)
• Open Graph
• Twitter Card
• Favicons, icons and webapp
• Google Result Card
• iOS specifics
• Android specifics
• Windows 8+ specifics

android_meta.html

<!-- ============ -->
<!-- Android meta -->
<!-- ============ -->
 
<!-- Style the browser's header [iOS uses the body color automaticaly] -->
<meta name="theme-color" content="#3F51B5">
<!-- Android App Icons -->
<link rel="manifest" href="manifest.json">
<!-- The icons are described in the manifest.json file -->

browserconfig.xml

<!-- browserconfig.xml example -->
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig> 

google_result_card.html

<script type="application/ld+json">
{
    "@context" : "http://schema.org",
    "@type" : "Organization",
    "name" : "{COMPANY_NAME}",
    "url" : "{COMPANY_WEBSITE_URL}",
    "logo": "{COMPANY_LOGO_URL}",
    "sameAs" : [ "{COMPANY_FACEBOOK_URL}",
                     "{COMPANY_TWITTER_URL}",
                     "{COMPANY_LINKEDIN_URL}",
                     "{COMPANY_GOOGLEPLUS_URL}"]
}
</script>

icons_and_favicons.html

<!-- ================ -->
<!-- Icons and Webapp -->
<!-- ================ -->
<!-- Usefull Tip => use http://realfavicongenerator.net/ -->
 
<!-- icon (oldschool) -->
<link rel="shortcut icon" href="/path/to/some.ico" />
<!-- .png (newschool) -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

ios_meta.html

<!-- ============== -->
<!-- iOS Style meta -->
<!-- ============== -->
<!-- meta web-app-compatible -->
<meta name="mobile-web-app-capable" content="yes"/>
<!-- Hide the status bas on startup, it replaces the window.scrollTo hack which doesn't work anymore -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- Set status bar transparency -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- iOS Startup image -->
<link rel="apple-touch-startup-image" href="/path/to/some.png" />
<!-- iOS App Icons -->
<link rel="apple-touch-icon" href="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"/>

manifest.json

<!-- manifest.json example -->
{
    "name": "Web Application Manifest Sample",
    "icons": [
        {
            "src": "launcher-icon-0-75x.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "launcher-icon-1x.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "launcher-icon-1-5x.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "launcher-icon-2x.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "launcher-icon-3x.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "launcher-icon-4x.png",
            "sizes": "192x192",
            "type": "image/png",
            "density": "4.0"
        }
        ],
    "start_url": "index.html",
    "display": "standalone",
    "orientation": "landscape"
}

open_graph.html

<!-- =============== -->
<!-- Open Graph meta -->
<!-- =============== -->
 
<!-- Mandatory Properties -->
<meta property="og:title"   content="" />
<meta property="og:type"    content="" />
<meta property="og:image"   content="" />
<meta property="og:url"     content="" />
 
    <!-- Optionnal properties -->
    <!-- Images -->
    <meta property="og:image:secure_url"    content="" />
    <meta property="og:image:type"          content="image/jpeg" />
    <meta property="og:image:width"         content="" />
    <meta property="og:image:height"        content="" />
    <!-- Videos -->
    <meta property="og:video"               content="" />
    <meta property="og:video:secure_url"    content="" />
    <meta property="og:video:type"          content="video/html5" />
    <meta property="og:video:width"         content="400" />
    <meta property="og:video:height"        content="300" />
    <!-- Audio -->
    <meta property="og:audio"               content="" />
    <meta property="og:audio:secure_url"    content="" />
    <meta property="og:audio:type"          content="audio/mpeg" />
    <!-- Others -->
    <meta property="og:site_name"           content="" />
    <meta property="og:description"         content="" />
    <meta property="og:determiner"          content="" />
    <meta property="og:locale"              content="en_GB" />
    <meta property="og:locale:alternate"    content="fr_FR" />
 
 

the_usual_ones.html

<!-- Charset -->
<meta charset="UTF-8"/>
 
<!-- Usual -->
<meta name="description"    content="Yay metas"/>
<meta name="keywords"       content="HTML,CSS,XML,JavaScript"/>
<meta name="author"         content="Me"/>
    
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

twitter_card.html

<!-- ============ -->
<!-- Twitter meta -->
<!-- ============ -->
 
<meta name="twitter:card"           content=""/>
<meta name="twitter:site"           content=""/>
<meta name="twitter:title"          content=""/>
<meta name="twitter:description"    content=""/>
<meta name="twitter:creator"        content=""/>
<meta name="twitter:image:src"      content=""/>

windows8 _meta.html

<!-- ==================== -->
<!-- Windows 8 Tiles meta -->
<!-- ==================== -->
<meta name="msapplication-TileColor" content="#da532c"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<!-- See browserconfig.xml -->