metaタグなどheadに入れるようなものを見直そうと調べていたら、見たことが無いものが結構あったのでまとめてみました。
順番はぐちゃぐちゃで見づらくてスイマセン。
XML形式で記載する際は/>で閉じてください。
私の雛形（面倒を惜しまないとき用）
<!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 lang="{lang}">
<meta http-equiv="Content-Language" content="{lang}">
sample
<html lang="ja">
<meta http-equiv="content-language" content="ja">
OGP使用の宣言
<html prefix="{val}">
<head prefix="{val}">
sample
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
</head>
OGPを利用する際に宣言として記述が必要です。
文字コードの指定
<meta charset="{code}">
<meta http-equiv="Content-Type" content="{code}">
sample
<meta charset="utf-8">
ファイルが何の文字コードで書かれているか指定します。
互換モードの指定
<meta http-equiv="X-UA-Compatible" content="{val}">
sample
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
互換モードが利用できる場合適用されます。
リダイレクト
<meta http-equiv=”refresh” content=”{time};URL='{url}'”>
sample
<meta http-equiv=”refresh” content=”0;URL='http://redirect.example'”>
リダイレクトまでの時間、リダイレクト先を指定できます。
（普通はクライアントサイドではなく、サーバー側で行うので使いません。）
ページタイトル
<title>{val}</title>
sample
<title>metaタグについて</title>
ページのキーワードを指定
<meta name="keywords" content="{val}">
sample
<meta name="keywords" content="HTML,meta,Web,tag,サイト,">
主に検索ロボット向けにキーワード提示します。
ページの説明を指定
<meta name="description" content="{val}">
sample
<meta name="description" content="htmlのheadタグ内に記述されているものをまとめています。">
主に検索エンジンの表示結果に利用されます。
著作権者を記述
<meta name="author" content="{val}">
<meta name="copyright" content="{val}">
sample
<meta name="author" content="© 2018 Rino Tsuka">
連絡先を記述
<meta name="reply-to" content="{email}">
sample
<meta name="reply-to" content="email@example.com">
スパムに利用されるので記述しないこと！
作成・更新日時の指定
<meta name="date" content="{date}">
sample
<meta name="date" content="2018-04-27T02:34:56+09:00">
作成日・更新日を記載できるが、メリットはない。
作成日時の指定
<meta name="creation_date" content="{date}">
sample
<meta name="creation_date" content="2018-04-26T01:23:45+09:00">
URLの正規化
<link rel="canonical" href="{url}">
sample
<link rel="canonical" href="http://example.com/test">
PCとスマホでレイアウトを分けている場合にオリジナルのURLを記載したり、ソースコード丸パクのサイト対策など用途は色々。
忘れがちだが記載したほうが良い。
代替えURLの指定
<link rel="alternate" href="{url}">
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の指定
<meta property="og:{attr}" content="{val}">
sample
<meta property="og:title" content="metaタグについて">
大体SNSでシェアされたとき用に記述する。
Facebook用OGPの指定
<meta property="fb:{attr}" content="{val}">
sample
<meta property="fb:app_id" content="0123456789">
Twitter用OGPの指定
<meta name="twitter:{atter}" content="{val}">
sample
<meta name="twitter:card" content="summary_large_image">
タッチアイコンの指定
<link rel="apple-touch-icon" sizes="{size}" href="{url}">
sample
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
スマホでホーム画面にショートカットを作成されたときのアイコン。
サイトルートにapple-touch-icon.pngを置くとmetaタグがなくても自動で適用してくれる（端末がある）。
ファビコンの指定
<link rel="icon" type="{type}" sizes="{size}" href="{url}">
<link rel="shortcut icon" href="{url}">
sample
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="shortcut icon" href="/favicon.ico">
ブックマークなどに追加された際に表示されるちっこいアイコン。
サイトルートにfavicon.icoを置くとmetaタグがなくても自動で適用してくれる。
Windowsピン留め画像の情報ファイル
<meta name="msapplication-config" content="{url}">
sample
<meta name="msapplication-config" content="none">
<meta name="msapplication-config" content="/browserconfig.xml">
Windows8,10のスタートにピン留めされたときのアイコンをまとめて指定できる。
参考：「browserconfig.xml」とは何ぞや？｜マコトのおもちゃ箱 ～ぼへぼへ自営業者の技術メモ～
Windowsピン留め画像
<meta name="msapplication-TileImage" content="{url}">
sample
<meta name="msapplication-TileImage" content="/img/pin-144x144.png"/>
参考：Windows 8 のピン留めサイトの高画質なビジュアル
Windowsピン留め画像の背景色
<meta name="msapplication-TileColor" content="{val}">
sample
<meta name="msapplication-TileColor" content="#ee82ee">
ウェブアプリマニュフェストの指定
<link rel="manifest" href="{url}">
sample
<link rel="manifest" href="/manifest.json">
PWA（プログレッシブウェブアプリ）には必須。
参考：ウェブアプリ マニフェスト
ウェブアプリケーションとしての名前
<meta name="application-name" content="{val}">
sample
<meta name="application-name" content="meta一覧アプリ">
マスクアイコンの指定
<link rel="mask-icon" color="{color}" href="{url}">
sample
<link rel="mask-icon" color="#ee82ee" href="/mask-icon.svg">
safariでページがピンされたときに表示されるアイコン。
画像ファイルはSVGのみ。
参考：新しいブックマークのカタチ？Safariのページピンアイコンの実装方法。
Chrome for Androidのタブの色指定
<meta name="theme-color" content="{color}">
sample
<meta name="theme-color" content="#ee82ee">
参考：theme-color を使って Chrome for Android や Google アプリで独自の色を設定する
Google Bot用の指定
<meta name="googlebot" content="{val}">
<meta name="google" content="{val}">
sample
<meta name="googlebot" content="noindex">
<meta name="google" content="nositelinkssearchbox">
Search Consoleの所有者確認用コード
<meta name="google-site-verification" content="{val}">
Baiduウェブマスターツールの確認コード
<meta name="baidu-site-verification" content="{val}">
中国のサイトらしい。調べてたら見つけたので一応。
検索ロボットへのインデックスの指定
<meta name="robots" content="{val}">
sample
<meta name="robots" content="nofollow">
CSSの指定
<link rel="stylesheet" href="{val}">
sample
<link rel="stylesheet" href="css/style.css">
ビューポートの指定
<meta name="viewport" content="{val}">
sample
<meta name="viewport" content="width=device-width,initial-scale=1">
電話番号などの自動リンク機能の制御
<meta name="format-detection" content="{val}">
sample
<meta name="format-detection" content="telephone=no,email=no,address=no">
スマホで電話番号、住所、メールアドレスが自動でリンクに変換するか否かを指定できる。
CSRF対策用トークン
<meta name="csrf-param" content="{val}">
<meta name="csrf-token" content="{val}">