HTML - headタグ

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

headタグは、HTMLドキュメントのメタデータを含む重要なセクションである。
このタグはbodyタグとは異なり、ページ上には直接表示されない情報を格納する。

headタグの主な役割を以下に示す。

  • 文書のタイトル定義
    Webブラウザのタブやブックマークに表示される文字列を指定する。
  • 文字エンコーディング指定
    これにより文字化けを防いで、正しい文字表示を実現する。
  • 外部リソースの読み込み
    スタイルシートやJavaScriptファイルなどの外部リソースを読み込むための記述を行う。
  • 検索エンジン向けの情報提供
  • ビューポート設定
    特に、モバイル端末での表示を制御するための重要な設定である。


重要な点としては、headタグ内の記述順序にも一定の推奨がある。
通常、文字エンコーディング指定を最初に行い、次に、タイトル、メタ情報、スタイルシート、スクリプトの順で記述することが一般的である。

ただし、パフォーマンスの観点から、JavaScriptの読み込みは特別な理由がない限り、body終了タグの直前に配置することが推奨されている。
これにより、ページの読み込み速度を向上させることができる。

これらの要素を適切に組み合わせることにより、Webページの基本的な設定や挙動を制御することが可能である。


ブラウザのタブに表示されるタイトル (必須要素)

SEOとユーザビリティの観点から必須である。

 <title>ページタイトル</title>



相対URLのベースURLを指定

 <base href="https://example.com/">



linkタグ

他にも、<link>タグの属性には以下に示すものがある。

  • media
    メディアクエリの指定
  • crossorigin
    クロスオリジンリソースの制御
  • integrity
    サブリソース完全性チェック


スタイルシートの読み込みと定義

CSSの読み込みに必要である。

 <!-- 外部CSSの読み込み -->
 <link rel="stylesheet" href="styles.css">



 <!-- 直接CSSを記述 -->
 <style>
  body { margin: 0; }
 </style>


リソースのリンク

  • ファビコンの指定
 <link rel="icon" href="favicon.ico">


  • iOS用アイコン
 <link rel="apple-touch-icon" href="icon.png">


  • PWAマニフェスト
 <link rel="manifest" href="manifest.json">


  • 正規URL
 <link rel="canonical" href="https://example.com/page">


  • RSSフィード
 <link rel="alternate" href="rss.xml" type="application/rss+xml">


  • 事前接続
 <link rel="preconnect" href="https://example.com">


  • リソースの事前読み込み
 <link rel="preload" href="font.woff2" as="font">


  • DNS事前解決
 <link rel="dns-prefetch" href="https://example.com">



script

JavaScriptの読み込みと実行に必要である。

他にも、<script>タグに指定できる属性を以下に示す。

  • defer
    HTML解析後に実行
  • async
    非同期読み込み
  • type="module"
    ESモジュールとして扱う。


 <!-- 外部JavaScriptの読み込み -->
 <script src="script.js"></script>



 <!-- 直接JavaScriptを記述 -->
 <script>
  console.log('Hello');
 </script>



noscript

 <noscript>
    <!-- JavaScriptが無効な場合に表示される内容 -->
    このサイトはJavaScriptを有効にする必要があります。
 </noscript>



metaタグ

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対策、ソーシャルメディアでの表示制御、ブラウザの動作制御等、様々な目的を達成することができる。

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

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

※注意
新しい予約語は随時追加される可能性がある。
特に、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に関連する設定の予約語を、以下に示す。

これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。
Twitter Cardは、OGPの値もフォールバックとして使用する。

設定後は、Twitter Card Validatorでプレビューを確認することができる。

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="@YourSite">


twitter:creator

記事の著者のTwitterアカウントを指定する。
アカウント名には、必ず@を付ける必要がある。

 <meta name="twitter:creator" content="@Author">


twitter:title

シェアされる時のタイトルを指定する。
40文字以内が推奨される。

 <meta name="twitter:title" content="タイトル">


twitter:description

シェアされる記事の説明を指定する。

 <meta name="twitter:description" content="ページの説明">


twitter:image

Twitterページの画像を指定する。

 <meta name="twitter:image" content="https://example.com/image.jpg">


カスタムメタ情報

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

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



「http://mochiuwiki.e2.valueserver.jp/index.php?title=HTML_-_headタグ&oldid=11968」から取得