Back

ドキュメントのHeadに実際に何を含めるべきか

OpenReplay Team OpenReplay Team

Dec 17, 2025 · 3 min read

ドキュメントのHeadに実際に何を含めるべきか

<head>要素は、HTMLの中で最も誤解されている部分の一つです。開発者は、これまでに見たことのあるすべてのmetaタグを詰め込むか、ほぼ空のままにするかのどちらかです。どちらのアプローチも、ユーザーやサイトにとって良いものではありません。

この記事では、モダンなHTMLのhead要素について明確なメンタルモデルを提供します—何が必須で、何が状況に応じて必要で、何をおそらくスキップできるかを解説します。

重要なポイント

  • ドキュメントのheadは、ブラウザ、検索エンジン、サービスに対して、可視コンテンツが読み込まれる前にページをどのように解釈するかを伝える調整レイヤーとして機能します。
  • 必須要素には、charset、viewport、title、meta descriptionが含まれます—これらを省略すると実際に問題が発生します。
  • preconnect、dns-prefetch、preloadなどのリソースヒントはパフォーマンスを向上させることができますが、意図的に使用する必要があります。
  • keywordsメタタグのような多くの一般的なhead要素は、現代では何の利点も提供しないため、削除すべきです。

調整レイヤーとしてのHead

ドキュメントのheadを調整レイヤーとして考えてください。これは、可視コンテンツが読み込まれる前に、ブラウザ、検索エンジン、その他のサービスに対して、ページをどのように解釈、レンダリング、優先順位付けするかを伝えます。

headは3つの主要な責任を担っています:

  1. ドキュメントのメタデータ – エンコーディング、タイトル、説明
  2. ブラウザの動作 – viewport、カラースキーム、レンダリングヒント
  3. 早期読み込みの決定 – リソースヒント、重要なアセット、事前接続

headに含めるすべての要素は、これらの目的のいずれかに役立つべきです。そうでない場合は、おそらく他の場所に属するか、どこにも属しません。

必須のHead要素

これらの要素は、事実上すべてのHTMLドキュメントに含めるべきです。これらを省略すると実際に問題が発生します。

文字エンコーディングとViewport

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

これらを最初に配置してください。charset宣言は、ブラウザがコンテンツを正しく解析できるように、ドキュメントの非常に早い段階に記述する必要があります。viewportメタタグは、モバイルデバイスでの適切なレンダリングを保証します。これがないと、ブラウザはデスクトップ幅のレイアウトを想定し、縮小表示します。

ドキュメントタイトル

<title>ページタイトル | サイト名</title>

タイトルは、ブラウザのタブ、ブックマーク、検索結果に表示されます。説明的で60文字以内に保ってください。これは、ユーザビリティとSEOの両方にとって譲れません。

メタディスクリプション

<meta name="description" content="ページコンテンツの簡潔な要約。">

検索エンジンは、これを検索結果に表示することがよくあります。人間向けに書いてください—ページを正確に説明する150〜160文字です。

状況に応じたHeadコンテンツ

これらの要素は、特定のコンテキストで重要です。関連する場合は含め、そうでない場合はスキップしてください。

フロントエンドパフォーマンスのためのリソースヒント

モダンブラウザは、読み込み動作に影響を与えるいくつかのリソースヒントをサポートしています:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preload" href="critical.css" as="style">

Preconnectは、すぐに必要になるオリジンへの早期接続を確立します。フォントプロバイダーやAPIエンドポイントに使用してください。

DNS-prefetchは、ドメイン名を事前に解決します。preconnectより軽量で、サードパーティのリソースに役立ちます。

Preloadは、重要なリソースを即座に取得します。控えめに使用してください—多すぎるpreloadは目的を損ないます。

Canonical URLと言語の代替

<link rel="canonical" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">

Canonical URLは、重複コンテンツの問題を防ぎます。hreflangタグは、検索エンジンが適切な言語バージョンを提供するのに役立ちます。

テーマとカラースキームのメタデータ

<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">

テーマカラーは、モバイルでのブラウザUIに影響します。カラースキームは、CSSが読み込まれる前に、ブラウザが適切なデフォルトスタイルを適用するのに役立ちます。

Open Graphとソーシャルメタデータ

<meta property="og:title" content="ページタイトル">
<meta property="og:image" content="https://example.com/image.jpg">

ページがソーシャルプラットフォームで共有される場合は、これらを含めてください。そうでなければ、利点なしにバイト数を増やすだけです。

よく誤解されている、または過剰に使用されているもの

一部のheadコンテンツは、現代では限定的な有用性にもかかわらず、カーゴカルトコピーによって存続しています。

keywordsメタタグ – 検索エンジンはこれを無視します。削除してください。

過剰な検証タグ – 実際に使用しているものだけを追加してください。放棄されたサービスの古い検証タグは、ドキュメントを乱雑にするだけです。

冗長なviewport値 – user-scalable=noとmaximum-scale=1は、アクセシビリティを損ないます。説得力のある理由がない限り、避けてください。

generatorメタタグ – これらは、CMSやフレームワークのバージョンを公開します。ユーザーに利点を提供せず、セキュリティ上の懸念を生じさせる可能性があります。

順序が重要

ドキュメントのheadメタデータは、論理的な順序に従うべきです:

  1. charsetとviewport(最初に必須)
  2. セキュリティヘッダー(metaで配信される場合のCSP)
  3. titleとdescription
  4. preconnectとリソースヒント
  5. スタイルシート
  6. ソーシャルメタデータ
  7. 構造化データ

この順序により、ブラウザは緊急性の低いメタデータの前に重要な情報を処理できます。

実用的なベースライン

以下は、必須事項をカバーする最小限のモダンなHTMLのheadです:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>説明的なページタイトル</title>
  <meta name="description" content="明確で正確なページの要約。">
  <link rel="canonical" href="https://example.com/page">
  <link rel="stylesheet" href="styles.css">
</head>

ボイラープレートで見たからではなく、実際のニーズに基づいて、このベースラインに追加してください。

まとめ

最良のHTMLのheadプラクティスは、意図性に帰着します。すべての要素は、その場所を獲得する必要があります。headをゴミ捨て場ではなく調整レイヤーとして扱うと、より高速なページ、よりクリーンなマークアップ、そしてより少ない驚きが得られます。

よくある質問

ブラウザは、ドキュメントコンテンツの解析を開始する前に文字エンコーディングを知る必要があります。charset宣言が遅すぎると、ブラウザはすでに文字を誤って解釈している可能性があり、ページを再読み込みせずには修正できないエンコーディングエラーや文字化けが発生します。

ページがソーシャルプラットフォームで共有される可能性が高い場合のみです。Open Graphタグは、Facebook、LinkedIn、および同様のサービスで共有されたときにコンテンツがどのように表示されるかを制御します。内部ページ、管理パネル、または共有される可能性が低いコンテンツの場合、これらのタグは何の利点も提供せずに不要なバイト数を追加します。

Preconnectは、DNSルックアップ、TCPハンドシェイク、TLSネゴシエーションを含む完全な接続セットアップを実行します。DNS-prefetchは、ドメイン名をIPアドレスに解決するだけです。確実に使用する重要なサードパーティのオリジンにはpreconnectを使用してください。必要になる可能性があるが確実性が低いリソースにはdns-prefetchを使用してください。

はい、http-equivをContent-Security-Policyに設定したメタタグを使用できます。ただし、メタベースのCSPには制限があります。frame-ancestorsやreport-uriなどの特定のディレクティブを使用できません。完全なCSP機能を利用するには、代わりにHTTPヘッダーで配信してください。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog