色々あるHTMLのmetaタグなど一覧

metaタグなど`head`に入れるようなものを見直そうと調べていたら、見たことが無いものが結構あったのでまとめてみました。
順番はぐちゃぐちゃで見づらくてスイマセン。
XML形式で記載する際は`/>`で閉じてください。

# 私の雛形（面倒を惜しまないとき用）

```html
<!doctype html>
<html lang="ja" dir="ltr">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="/css/style.css">
<!-- safari -->
<link rel="mask-icon" color="{{ カラーコード }}" href="/mask-icon.svg">
<!-- 一般的なタグ -->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="{{ 説明文 }}">
<meta name="keywords" content="{{ キーワード,キーワード }}">
<!-- 設定 -->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!-- SNS向け -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ タイトル }}">
<meta property="og:description" content="{{ 説明文 }}">
<meta property="og:url" content="{{ ページURL }}">
<meta property="og:image" content="{{ 絶対パス }}/img/ogp.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ twitter id }}">
<meta name="twitter:creator" content="@{{ twitter id }}">
<!-- アイコン関係 -->
<link rel="icon" type="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="{size}" href="/img/common/apple-touch-icon.png">
<!-- Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Android -->
<meta name="theme-color" content="{{ color }}">
<link rel="canonical" href="{{ url }}">
</head>
<body>

なくても動くけどFacebookでfb:app_idが無いと怒られるよ。
必要なら発行して追記しましょう。

<script src="js/app.js"></script>
</body>
</html>
```



#### 言語の指定
```html
<html lang="{lang}">
<meta http-equiv="Content-Language" content="{lang}">
```
```html:sample
<html lang="ja">
<meta http-equiv="content-language" content="ja">
```


#### OGP使用の宣言
```html
<html prefix="{val}">
<head prefix="{val}">
```
```html:sample
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
</head>
```
OGPを利用する際に宣言として記述が必要です。


#### 文字コードの指定
```html
<meta charset="{code}">
<meta http-equiv="Content-Type" content="{code}">
```
```html:sample
<meta charset="utf-8">
```
ファイルが何の文字コードで書かれているか指定します。


#### 互換モードの指定
```html
<meta http-equiv="X-UA-Compatible" content="{val}">
```
```html:sample
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
互換モードが利用できる場合適用されます。


#### リダイレクト
```html
<meta http-equiv=”refresh” content=”{time};URL='{url}'”>
```
```html:sample
<meta http-equiv=”refresh” content=”0;URL='http://redirect.example'”>
```
リダイレクトまでの時間、リダイレクト先を指定できます。
（普通はクライアントサイドではなく、サーバー側で行うので使いません。）


#### ページタイトル
```html
<title>{val}</title>
```
```html:sample
<title>metaタグについて</title>
```


#### ページのキーワードを指定
```html
<meta name="keywords" content="{val}">
```
```html:sample
<meta name="keywords" content="HTML,meta,Web,tag,サイト,">
```
主に検索ロボット向けにキーワード提示します。


#### ページの説明を指定
```html
<meta name="description" content="{val}">
```
```html:sample
<meta name="description" content="htmlのheadタグ内に記述されているものをまとめています。">
```
主に検索エンジンの表示結果に利用されます。


#### 著作権者を記述
```html
<meta name="author" content="{val}">
<meta name="copyright" content="{val}">
```
```html:sample
<meta name="author" content="© 2018 Rino Tsuka">
```


#### 連絡先を記述
```html
<meta name="reply-to" content="{email}">
```
```html:sample
<meta name="reply-to" content="email@example.com">
```
スパムに利用されるので記述しないこと！


#### 作成・更新日時の指定
```html
<meta name="date" content="{date}">
```
```html:sample
<meta name="date" content="2018-04-27T02:34:56+09:00">
```
作成日・更新日を記載できるが、メリットはない。


#### 作成日時の指定
```html
<meta name="creation_date" content="{date}">
```
```html:sample
<meta name="creation_date" content="2018-04-26T01:23:45+09:00">
```


#### URLの正規化
```html
<link rel="canonical" href="{url}">
```
```html:sample
<link rel="canonical" href="http://example.com/test">
```
PCとスマホでレイアウトを分けている場合にオリジナルのURLを記載したり、ソースコード丸パクのサイト対策など用途は色々。
忘れがちだが記載したほうが良い。


#### 代替えURLの指定
```html
<link rel="alternate" href="{url}">
```
```html:sample
<link rel="alternate" hreflang="en" href="http://en.example.com/test">
<link rel="alternate" media="only screen and (max-width: 543px)" href="http://sp.example.com/test">
```
「英語サイト、スマホ用のページはこっちだよ」と指定できる。


#### OGPの指定
```html
<meta property="og:{attr}" content="{val}">
```
```html:sample
<meta property="og:title" content="metaタグについて">
```
大体SNSでシェアされたとき用に記述する。


#### Facebook用OGPの指定
```html
<meta property="fb:{attr}" content="{val}">
```
```html:sample
<meta property="fb:app_id" content="0123456789">
```


#### Twitter用OGPの指定
```html
<meta name="twitter:{atter}" content="{val}">
```
```html:sample
<meta name="twitter:card" content="summary_large_image">
```


#### タッチアイコンの指定
```html
<link rel="apple-touch-icon" sizes="{size}" href="{url}">
```
```html:sample
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
```
スマホでホーム画面にショートカットを作成されたときのアイコン。
サイトルートに`apple-touch-icon.png`を置くとmetaタグがなくても自動で適用してくれる（端末がある）。


#### ファビコンの指定
```html
<link rel="icon" type="{type}" sizes="{size}" href="{url}">
<link rel="shortcut icon" href="{url}">
```
```html:sample
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="shortcut icon" href="/favicon.ico">
```
ブックマークなどに追加された際に表示されるちっこいアイコン。
サイトルートに`favicon.ico`を置くとmetaタグがなくても自動で適用してくれる。


#### Windowsピン留め画像の情報ファイル
```html
<meta name="msapplication-config" content="{url}">
```
```html:sample
<meta name="msapplication-config" content="none">
<meta name="msapplication-config" content="/browserconfig.xml">
```
Windows8,10のスタートにピン留めされたときのアイコンをまとめて指定できる。
参考：[「browserconfig.xml」とは何ぞや？｜マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～](http://piyopiyocs.blog115.fc2.com/blog-entry-822.html)


#### Windowsピン留め画像
```html
<meta name="msapplication-TileImage" content="{url}">
```
```html:sample
<meta name="msapplication-TileImage" content="/img/pin-144x144.png"/>
```
参考：[Windows 8 のピン留めサイトの高画質なビジュアル](https://blogs.msdn.microsoft.com/ie_ja/2012/06/13/windows-8/)


#### Windowsピン留め画像の背景色
```html
<meta name="msapplication-TileColor" content="{val}">
```
```html:sample
<meta name="msapplication-TileColor" content="#ee82ee">
```


#### ウェブアプリマニュフェストの指定
```html
<link rel="manifest" href="{url}">
```
```html:sample
<link rel="manifest" href="/manifest.json">
```
PWA（プログレッシブウェブアプリ）には必須。
参考：[ウェブアプリ マニフェスト](https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja)


#### ウェブアプリケーションとしての名前
```html
<meta name="application-name" content="{val}">
```
```html:sample
<meta name="application-name" content="meta一覧アプリ">
```


#### マスクアイコンの指定
```html
<link rel="mask-icon" color="{color}" href="{url}">
```
```html:sample
<link rel="mask-icon" color="#ee82ee" href="/mask-icon.svg">
```
safariでページがピンされたときに表示されるアイコン。
画像ファイルはSVGのみ。
参考：[新しいブックマークのカタチ？Safariのページピンアイコンの実装方法。](https://wayohoo.com/mac/beginners/how-to-set-icons-for-pinned-tabs-for-safari.html)


#### Chrome for Androidのタブの色指定
```html
<meta name="theme-color" content="{color}">
```
```html:sample
<meta name="theme-color" content="#ee82ee">
```
参考：[theme-color を使って Chrome for Android や Google アプリで独自の色を設定する](https://blog.ymyzk.com/2015/01/meta-theme-color/)


#### Google Bot用の指定
```html
<meta name="googlebot" content="{val}">
<meta name="google" content="{val}">
```
```html:sample
<meta name="googlebot" content="noindex">
<meta name="google" content="nositelinkssearchbox">
```
参考：[Google がサポートしているメタタグ](https://support.google.com/webmasters/answer/79812?hl=ja)


#### Search Consoleの所有者確認用コード
```html
<meta name="google-site-verification" content="{val}">
```


#### Baiduウェブマスターツールの確認コード
```html
<meta name="baidu-site-verification" content="{val}">
```
中国のサイトらしい。調べてたら見つけたので一応。


#### 検索ロボットへのインデックスの指定
```html
<meta name="robots" content="{val}">
```
```html:sample
<meta name="robots" content="nofollow">
```


#### CSSの指定
```html
<link rel="stylesheet" href="{val}">
```
```html:sample
<link rel="stylesheet" href="css/style.css">
```


#### ビューポートの指定
```html
<meta name="viewport" content="{val}">
```
```html:sample
<meta name="viewport" content="width=device-width,initial-scale=1">
```
[もう逃げない。HTMLのviewportをちゃんと理解する](https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607)


#### 電話番号などの自動リンク機能の制御
```html
<meta name="format-detection" content="{val}">
```
```html:sample
<meta name="format-detection" content="telephone=no,email=no,address=no">
```
スマホで電話番号、住所、メールアドレスが自動でリンクに変換するか否かを指定できる。


#### CSRF対策用トークン
```html
<meta name="csrf-param" content="{val}">
<meta name="csrf-token" content="{val}">
```