HTML - headタグ

概要

metaタグは、HTMLドキュメントに関するメタデータ (データについてのデータ) を定義するための要素である。
通常、head要素内に配置されて、ページの内容そのものは表示されないが、Webブラウザや検索エンジンに重要な情報を提供する。

基本的な書式を以下に示す。

 <meta name="キー名" content="値">
 <meta http-equiv="キー名" content="値">
 <meta property="キー名" content="値">

主な用途として、文字エンコーディングの指定がある。

 <meta charset="UTF-8">

また、ページの自動リフレッシュやリダイレクトにも使用できる。

 <meta http-equiv="refresh" content="5;url=https://example.com">

これらのmetaタグを適切に設定することにより、WebサイトのSEO対策、ソーシャルメディアでの表示制御、ブラウザの動作制御等、様々な目的を達成することができる。

特にSEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。

metaタグ

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

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

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

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

文字エンコーディングの指定

文字エンコーディングを指定する設定である。
UTF-8は、世界中のほぼ全ての文字 (日本語、英語、絵文字等) を扱えるUnicodeの実装方式である。

この設定が無い場合、日本語等が文字化けする可能性があるため、head要素の最初に記述することが推奨されている。

 <meta charset="UTF-8">

Open Graph Protocol

Open Graph Protocol (OGP) の設定を指定する。
FacebookやTwitter等のSNSでページがシェアされた時に、どのように表示されるかを制御する。

• og:title

  シェア時に表示される見出し

• og:description

  シェア時に表示される説明文

• og:image

  シェア時に表示されるサムネイル画像

 <meta property="og:title" content="ページのタイトル">
 <meta property="og:description" content="ページの説明">
 <meta property="og:image" content="シェア時の画像URL">

ページの自動リフレッシュやリダイレクト

自動的なページリダイレクトを設定する。

以下の例では、5秒後にhttps://example.comへ自動的にリダイレクト (移動) する。
数字の部分を変更することにより、リダイレクトまでの待機時間を調整できる。

 <meta http-equiv="refresh" content="5;url=https://example.com">

キャッシュの制御

Webブラウザのキャッシュ動作を制御する設定である。

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

• no-cache

  キャッシュを使用前に必ずサーバに確認

• no-store

  キャッシュを一切保存しない。

• must-revalidate

  キャッシュ使用時に必ずサーバで検証する。

特に、セキュリティが重要なページや頻繁に更新される動的なコンテンツを扱うページでは、適切なキャッシュ制御が重要になる。

以下の例では、no-cacheを指定しており、ページを常に最新の状態で表示するよう指示している。

 <meta http-equiv="cache-control" content="no-cache">

表示設定

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

Twitter Cardを指定する。

twitter:cardの主な設定値を以下に示す。

• summary

  通常のサマリーカード

• summary_large_image

  大きい画像付きサマリー

• app

  アプリのカード

• player

  動画 / 音声プレーヤーのカード

 <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="...">