メタタグ（meta tag）とは、主にサイトの情報や設定、ウェブブラウザ・検索エンジンへ伝えるために記述するもので、<head>タグ内に書いていきます。
適切な設定を行うことで、クローラーに対してどんなウェブサイトもしくはページなのかを明確に伝えることができるので、SEO（Search Engine Optimization）を考える上でも非常に重要です。
メタタグテンプレート
必須、もしくはあると良い
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="説明">
<meta name=viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article OR website" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="画像URL" />
<meta property="og:description" content="説明" />
<meta name="twitter:card" content="説明">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@author_handle">場合によっては必要
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">以下で細かい解説をしていきます。
ページの情報
[必須] 文字コード（meta charset）
<meta charset="UTF-8">character set（文字コードの指定）のために使用します。なるべく上の方に書いておいた方が無難です。
[必須] タイトル（meta title）
<title>サイトのタイトル</title>その名の通りページのタイトルを表すため、ページを表すキーワードを入れましょう。検索結果やブラウザのタブに表示されます。
👍 ベストプラクティス
- ページごとに固有である
- 文字数は全角30 文字（半角60文字）以下（それより長いと検索結果などでは省略されてしまう）
👎 避けるべきこと
- 他のページとタイトルタグが重複している
- タイトルタグを設定していない
- 文字数が短すぎる、もしくは長すぎる
[必須] ディスクリプション（meta description）
<meta name="description" content="ここに説明を書く">content属性にページの説明を記述します。検索結果にも表示されます。
👍 ベストプラクティス
- ページごとに固有のディスクリプションをつける
- 文字数が120 文字以下
👎 避けるべきこと
- 他のページとディスクリプションの content の内容が重複している
- ページにディスクリプ ションが存在しない
- 文字数が短すぎる、もしくは長すぎる
[必須] ビューポート（viewport）
<meta name=viewport" content="ビューポートの設定">ブラウザのサイズによって、どのようにページを表示するかを設定できます。ビューポートの設定について詳しく知りたい場合は、下記の記事の一読をおすすめします。
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
- width …
device-widthでデバイスの横幅の解像度に自動設定してくれる - initial-scale …
width=device-widthと同じ意味。しかし、こちらを認識しないブラウザもある。
👍 ベストプラクティス
width=device-width, initial-scale=1を設定する。もはや定型文ですが。
<meta name=viewport" content="width=device-width, initial-scale=1">[任意] クローラー設定（meta robots）
<meta name="robots" content="クロール設定">robots は、検索エンジンのクローラー に対してページをどうクロールしてほしいかを伝えるために設定します。contentは、カンマ区切りで複数設定することもできます。
- noindex … 検索結果で表示しない
- nofollow … ページ内のリンク（
aタグのhrefなど）を辿らない - none …
noindex,nofollowと同じ意味
インデックスさせる場合（ページ内リンクも含む）
特に何も書かなくてもクロールされるのでタグは不要です。
インデックスさせたくない場合（ページ内リンクも含む）
<meta name="robots" content="none">詳しい設定は Google のリファレンスに書いてあります。
https://developers.google.com/search/reference/robots_meta_tag#directives
👍 ベストプラクティス
- インデックスさせたいページは robots タグを設置しない（余計なコードを減らすという観点から）
👎 避けるべきこと
- インデックスさせたいページに
noindexやnoneを設定する
⚠ 注意点
robots.txtでクロールを禁止にしたページは、このタグでクロール設定を上書きすることはできません
SNS（twitter, facebook） カード
設定しておくと SNS 等でウェブサイトを共有したときにリッチに表示することが出来ます。SNS が発展した現代では共有時に見栄えをよくするために必須なタグです。
Open Graph
ウェブサイトのページをSNSやブログなどで共有したときに表示するテキストや画像の設定。
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article もしくは website" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="画像URL" />
<meta property="og:description" content="説明" />- og:title … タイトル
- og:type … トップページなら website、それ以外のページは article
- og:url … ページURL
- og:image … ページのサムネイル画像
- og:description … ページの説明
twitter card
twitter で共有した時に表示されるカードに必要な情報
<meta name="twitter:card" content="説明">
<meta name="twitter:site" content="@サイトの管理者">
<meta name="twitter:creator" content="@記事を書いた人">- twitter:card … 説明
- twitter:site … サイトの twitter アカウント名
- twitter:creator … 記事を書いた人の twitter アカウント名
その他のタグ
[任意] 自動フォーマット（format-detection）
<meta name="format-detection" content="telephone=no">スマートフォン（iOS, Android）ではコンテンツ内の文字列を認識し、特定のフォーマットのものに対してリンクを付与する機能が備わっています。それらを無効かするときに設定します。
- telephone=no … 電話番号を電話番号リンクに変換しない
- date=no … 日付をリンクに変換しない
- email=no … メールアドレスをリンクに変換しない
- address=no … 住所をリンクに変換しない
👍 ベストプラクティス
<meta name="format-detection" content="telephone=no">基本的に電話番号だけ切っておけばよいと思います。リンクが必要な箇所は自分で設定するのが良いでしょう。
- 電話番号 …
<a href="tel:電話番号（ハイフンなし）">...</a> - メールアドレス …
<a href="mailto:メールアドレス">...</a>
[不要] IE互換モード（X-UA-Compatible）
<meta http-equiv="X-UA-Compatible" content="IE=edge">Internet Explorer（IE）でのみ使用されるタグです。指定した IE のバージョンでページを表示することが出来ます。特定のバージョンの IE でしか動かないページなどでは設定します。
- IE=edge … 最新バージョン（IE11）で表示。Microsoft のブラウザ「Edge」の事ではありません
- IE=10 … IE 10 で表示
- IE=9 … IE 9 で表示
ですが、そもそも IE を対応範囲に含めていなければ不要ですし、今後は減っていくことと思うので記述する必要はありません。早く IE がこの世からいなくなることを願いましょう…。
使われていないタグ / 古いタグ
[不要] キーワード（meta keywords）
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,...">ターゲットとなるキーワードをカンマ区切りで複数設定できます。しかし、現在 Google はこの keywords をページのランク付けに使用していないため、設定する必要はありません。
