HTML - headタグ

metaタグ

name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。
これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。

※注意
新しい予約語は随時追加される可能性がある。
特に、SNSやモバイル関連の機能で新しい予約語が登場することがある。

また、属性の値において、大文字・小文字は区別されない。
以下に示す記述は、全て同じように機能する。

• name="viewport"
• name="Viewport"
• name="VIEWPORT"

表示設定

metaタグのname属性で使用される表示設定の予約語を、以下に示す。

viewport

モバイルデバイスにおいて、Webページの表示方法を制御する重要な設定を行う。
これは、モバイルブラウザが特別に認識する値の1つである。

viewportという値は、W3CやWHATWGによって標準化された値である。

このタグが重要な理由を以下に示す。

• レスポンシブデザインの基礎となる設定である。
• モバイルでの表示が適切になり、ユーザビリティが向上する。
• Googleのモバイルフレンドリーの評価基準の1つとなっている。

 <meta name="viewport" content="...">

 <!-- 使用例 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width=device-width

  デバイスの画面幅に合わせてページの幅を設定する。

  例: iPhoneで見る場合は画面幅の390px、iPadで見る場合は768pxに自動調整される。

  この設定が無い場合、モバイルデバイスでPCサイト用の幅 (例: 1920px等) で表示されるため、小さく表示されてしまう。

  
  

• initial-scale=1.0

  ページの初期表示時の拡大率を設定する

  1.0は等倍 (100%) を意味する。

  例: 0.5にすると50%で表示 (縮小)、2.0にすると200%で表示 (拡大) される。

  
  

• maximum-scale=1.0

  最大拡大率を設定する。

  user-scalable=no

  ユーザによるピンチイン・アウトを無効化する。

ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。
これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。

format-detection

電話番号・メールなどの自動リンク設定を指定する。

 <meta name="format-detection" content="...">

handheldfriendly

古い携帯端末向け設定を指定する。

 <meta name="handheldfriendly" content="...">

mobileoptimized

Windows Phone向け設定を指定する。

 <meta name="mobileoptimized" content="...">

基本情報

metaタグのname属性で使用される基本情報の予約語を、以下に示す。

description

サイトの説明を指定する。

 <meta name="description" content="...">

keywords

キーワードを指定する。
ただし、検索エンジンでの重要性は低下している。

 <meta name="keywords" content="...">

author

作成者を指定する。

 <meta name="author" content="...">

copyright

著作権情報を指定する。

 <meta name="copyright" content="...">

application-name

Webアプリケーション名を指定する。

 <meta name="application-name" content="...">

generator

作成に使用したツールを指定する。

 <meta name="generator" content="...">

theme-color

テーマカラーを指定する。

 <meta name="theme-color" content="#4285f4">

検索エンジン向け設定

metaタグのname属性で使用される検索エンジン向け設定の予約語を、以下に示す。

robots

全ての検索エンジンへの指示を指定する。
robotsが取れる値は、index、follow、noindex、nofollow等である。

 <meta name="robots" content="...">

msnbot

Bing専用の指示を指定する。

 <meta name="msnbot" content="...">

google

Google向けの追加設定を指定する。

 <meta name="google" content="...">

googlebot

Google専用の指示を指定する。

 <meta name="googlebot" content="...">

google-site-verification

Googleの所有者確認を指定する。

 <meta name="google-site-verification" content="...">

slurp

Yahoo!専用の指示を指定する。

 <meta name="slurp" content="...">

セキュリティ関連

metaタグのname属性で使用されるセキュリティ関連の予約語を、以下に示す。

referrer

リファラポリシーの設定を指定する。

referrerの主な設定値を以下に示す。

• no-referrer

  リファラ情報を一切送信しない。

• origin

  オリジン (ドメイン) のみを送信する。

• same-origin

  同一オリジンの場合のみリファラを送信する。

• strict-origin

  HTTPSからHTTPSへの遷移時のみオリジンを送信する。

 <meta name="referrer" content="...">

csrf-token / csrf-param

CSRFトークンおよびCSRFパラメータを指定する。

これは、フォーム送信時にこれらの値を含めることにより、CSRF攻撃を防ぐ。
多くのWebフレームワーク (Rails、Laravel等) で自動的に設定される。

• csrf-token

  サーバが生成した一意のトークン値

• csrf-param

  トークンのパラメータ名

 <meta name="csrf-token" content="...">
 <meta name="csrf-param" content="...">

※CSRF (Cross-Site Request Forgery) 攻撃とは
CSRF攻撃とは、ログイン済みのユーザに悪意のあるリクエストを強制的に実行させる攻撃手法である。

例:
1. ユーザが正規のサイトAにログイン済み
2. 攻撃者の罠サイトBにアクセス
3. サイトBが自動的にサイトAへ不正なリクエストを送信
4. ユーザの認証情報を使用して、意図しない処理 (送金、投稿等) が実行される

SNS最適化 (OGP) 設定

metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。

Twitter Cardを指定する。

 <meta name="twitter:card" content="...">

twitter:site

Twitterアカウントを指定する。

 <meta name="twitter:site" content="...">

twitter:creator

作成者のTwitterを指定する。

 <meta name="twitter:creator" content="...">

カスタムメタ情報

カスタムメタ情報を設定する場合は、以下に示すような形式を使用する。

 <!-- カスタムメタデータの例 -->
 <meta name="my-custom-info" content="...">