html-meta.md

   1 ---
   2 title: HTML meta tags
   3 category: HTML
   4 layout: 2017/sheet
   5 updated: 2020-03-20
   6 weight: -3
   7 ---
   8
   9 ### Meta tags
  10
  11 ```html
  12 <meta charset='utf-8'>
  13 ```
  14
  15 ```html
  16 <!-- title -->
  17 <title>···</title>
  18 <meta property='og:title'  content='···'>
  19 <meta name='twitter:title' content='···'>
  20 ```
  21 {: data-line="2"}
  22
  23 ```html
  24 <!-- url -->
  25 <link rel='canonical'       href='http://···'>
  26 <meta property='og:url'  content='http://···'>
  27 <meta name='twitter:url' content='http://···'>
  28 ```
  29 {: data-line="2"}
  30
  31 ```html
  32 <!-- description -->
  33 <meta name='description'         content='···'>
  34 <meta property='og:description'  content='···'>
  35 <meta name='twitter:description' content='···'>
  36 ```
  37 {: data-line="2"}
  38
  39 ```html
  40 <!-- image -->
  41 <meta property="og:image"  content="http://···">
  42 <meta name="twitter:image" content="http://···">
  43 ```
  44
  45 ```html
  46 <!-- ua -->
  47 <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  48 ```
  49
  50 ```html
  51 <!-- viewport -->
  52 <meta name='viewport' content='width=device-width'>
  53 <meta name='viewport' content='width=1024'>
  54 ```
  55
  56 ### More opengraph
  57
  58 ```html
  59 <meta property='og:site_name' content='···'>
  60 <meta property='og:type' content='website'>
  61 ```
  62
  63 ```html
  64 <meta property='fb:app_id' content='···'>
  65 <meta property='fb:admins' content='UID1,UID2'>
  66 <!-- ···unless there's app_id -->
  67 ```
  68
  69 ```html
  70 <meta property='og:audio' content='http://···/theme.mp3'>
  71 <meta property='og:video' content='http://···/trailer.swf'>
  72 ```
  73
  74 See: [OpenGraph protocol](https://developers.facebook.com/docs/opengraphprotocol/) _(developers.facebook.com)_
  75
  76 ### Opengraph for articles
  77
  78 - `article:published_time`
  79 - `article:modified_time`
  80 - `article:expiration_time`
  81 - `article:author`
  82 - `article:section`
  83 - `article:tag`
  84
  85 ### Apple-only
  86
  87 ```html
  88 <meta name='format-detection' content='telephone=no'>
  89 ```
  90
  91 ## Progressive web apps
  92
  93 ### Add to homescreen
  94
  95 ```html
  96 <meta name='mobile-web-app-capable' content='yes'>
  97 <meta name='apple-mobile-web-app-capable' content='yes'>
  98 ```
  99
 100 ```html
 101 <meta name='apple-mobile-web-app-status-bar-style' content='black'>
 102 <!-- black | black-translucent | default -->
 103 ```
 104
 105 ### Theme color
 106
 107 ```html
 108 <meta name='theme-color' content='#ff00ff'>
 109 ```
 110
 111 Android-only.
 112 See: [Theme color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
 113
 114 ### Manifest
 115
 116 ```html
 117 <link rel='manifest' href='/manifest.json'>
 118 ```
 119
 120 Android-only.
 121 See: [Manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
 122
 123 ### Icons
 124
 125 ```html
 126 <!-- Minimal -->
 127 <link rel='icon' type='image/png' href='favicon@32.png'>
 128 <link rel='icon' sizes='192x192' href='icon@192.png'>
 129 <link rel='apple-touch-icon' href='icon@152.png'>
 130 <meta name='msapplication-square310x310logo' content='icon@310.png'>
 131 ```
 132
 133 ```html
 134 <!-- Apple -->
 135 <link rel='apple-touch-icon' href='touch-icon-iphone.png'>
 136 <link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
 137 <link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
 138 <link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
 139 ```
 140
 141 ```html
 142 <!-- Microsoft -->
 143 <meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
 144 <meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
 145 <meta name='msapplication-wide310x150logo' content='icon_widetile.png'>
 146 ```
 147
 148 Chrome on Android recommends [192x192](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
 149 See: [Icons](https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/)
 150
 151 ## Reference
 152 {: .-one-column}
 153
 154  * <https://dev.twitter.com/cards>
 155  * <https://developers.facebook.com/docs/opengraphprotocol/#types>
 156 {: .-also-see}