Webサイトの制作や運営を始めたばかりのあなたが、「HTMLファイルの中にある<head>タグって何だろう？」「何か色々書いてあるけど、これって重要なの？」と疑問に思ったことはありませんか？
<head>タグは、Webサイトの「裏側」で非常に重要な役割を担う部分です。例えるなら、お店の「基本情報」や「看板の設定」のようなもの。お客様（ブラウザや検索エンジン）に対して、「このお店（Webサイト）はこういう内容です」と正しく伝えるための情報を記述します。
この記事では、<head>タグの基本的な役割から、SEO（検索エンジン最適化）やSNSでのシェア（OGP）のために設定しておくべき重要なタグまで、初心者にも分かりやすく解説します。
目次
- <head>タグとは？ その役割と記述場所
- これだけは必須！<head>に書く最小構成タグ
- SEOとUX（ユーザー体験）向上で設定すべきタグ
- SNSシェア対策で設定すべきタグ（OGP）
- Googleがサポートするその他の主要タグ
- まとめ：headタグ設定のテンプレート
<head>タグとは？ その役割と記述場所
「<head>タグ」とは、そのHTML文書の「ヘッダ情報（基本情報）」を指定するためのタグです。<head>タグで囲まれた内容は、検索エンジンやブラウザに対して「このファイルはどんな情報を持っているか」を提供します。
記述する場所は、<html>タグの直後、<body>タグ（実際にブラウザに表示される内容を書く部分）の前に書くのがルールです。
<head>タグの中に書かれた内容は、<title>タグ（ブラウザのタブに表示されるタイトル）を除き、基本的にWebサイトの画面上には表示されません。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ここに様々な情報を記述します -->
</head>
<body>
<!-- ここはブラウザに表示される内容 -->
</body>
</html>
これだけは必須！<head>に書く最小構成タグ
Webサイトとして機能させるために、最低限設定しておきたい必須のタグを紹介します。
1. 文字エンコード (charset)
<meta charset="UTF-8" >
これは「このHTMLファイルはUTF-8という文字コードで書かれています」と宣言するタグです。これを指定しないと、ブラウザが文字コードを誤って解釈し、文字化けが発生する原因になります。日本語を扱うWebサイトでは必須の設定です。
2. タイトル (title)
<title>ページタイトル｜インターライフメディア ブログ</title>
そのページの「タイトル」を設定します。ここに設定したテキストは、検索結果の一覧や、ブラウザのタブに表示されます。ユーザーが何のページか一目で分かるように、具体的で分かりやすいタイトルをつけましょう。
3. ビューポート (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1">
これは、スマートフォンやタブレットでWebサイトを表示する際に非常に重要な設定です。PC向けの表示をそのままスマホで縮小表示するのではなく、端末の画面幅（device-width）に合わせて表示を最適化する（レスポンシブデザイン）ために指定します。
「initial-scale=1」は、最初の表示倍率を1倍にするという意味です。レスポンシブWebサイトを作るなら、この記述は必須と覚えておきましょう。
- width=device-width：表示幅を端末の幅に合わせる
- initial-scale：初期の表示倍率
- minimum-scale：最小の縮小倍率
- maximum-scale：最大の拡大倍率
- user-scalable：ユーザーによる拡大・縮小を許可するか (noにするとアクセシビリティが低下するため非推奨)
4. IE互換モード設定 (x-ua-compatible)
<meta http-equiv="x-ua-compatible" content="ie=edge">
古いInternet Explorer（IE）には、過去のバージョンで表示を再現しようとする「互換モード」という機能がありました。これによりレイアウトが崩れることがあるため、このタグで「常に最新の標準モードで表示してください」とIEに指示します。現在ではIEのサポートが終了していますが、互換性のために記述しておくのが一般的です。
SEOとUX（ユーザー体験）向上で設定すべきタグ
必須ではありませんが、検索エンジン対策（SEO）やユーザーの使いやすさ（UX）を向上させるために、ぜひ設定しておきたいタグです。
1. ディスクリプション (description)
<meta name="description" content="このページの内容を要約した説明文を記述します。">
そのページがどんな内容なのかを要約した説明文を記述します。設定しなくても検索エンジンが本文から自動で抽出してくれますが、狙ったキーワードを含めつつ、ユーザーが「読みたい！」と思うような魅力的な説明文を設定することで、検索結果からのクリック率向上が期待できます。
文字数に厳密な制限はありませんが、検索結果に表示されるのはPCで約120文字、スマートフォンで約70〜80文字程度です。重要なキーワードは前半の70文字以内に含めると、ユーザーの目にも留まりやすくなります。
※検索結果に表示されるこの説明文領域を「スニペット」と呼ぶこともあります。
2. クロール制御 (robots)
検索エンジンの「クローラー」（Webサイトを巡回するロボット）に対して、ページの扱い方を指示するタグです。
<meta name="robots" content="noindex,nofollow" />
例えば、まだ制作途中のページや、検索結果に出したくないページ（会員専用ページなど）に「noindex（インデックスしないでください）」と設定します。通常は設定不要ですが、意図的に検索結果から除外したい場合に使います。カンマ区切りで複数指定も可能です。
- all：制限なし（デフォルト）
- noindex：このページを検索結果に表示しない
- nofollow：このページのリンクをたどらない
- none：noindex, nofollow と同じ意味
- noarchive：検索結果に [キャッシュ] リンクを表示しない
- nosnippet：検索結果にスニペット（説明文）を表示しない
※name="googlebot"と指定すると、Googleのクローラーだけに指示を出すこともできます。
3. ファビコン (favicon)
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
ファビコンは、ブラウザのタブやブックマーク、スマートフォンのホーム画面にショートカットを登録した際に表示されるアイコン画像のことです。Webサイトの「顔」とも言える部分ですね。
「favicon.ico」は伝統的な形式で、「apple-touch-icon」は主にApple製品（iPhoneなど）で使われますが、AndroidのChromeでも認識されるため、両方設定しておくのが確実です。180pxサイズを1つ設定しておけば、多くのApple製品をカバーできます。
※Windowsのタイル用アイコンを設定する場合は、Microsoftが提供しているツールなどで生成できます。
SNSシェア対策で設定すべきタグ（OGP）
FacebookやTwitter（現X）などでWebサイトのURLがシェアされた際に、意図したタイトル、説明文、画像を表示させるための設定が「OGP (Open Graph Protocol)」です。
これを設定していないと、SNS側が自動で不適切な画像や説明文を抽出してしまうことがあります。シェアされた時の見栄えを良くし、クリック率を上げるためにも設定しておきましょう。
基本のOGP設定
<meta property="og:url" content="https://example.com/page-url" />
<meta property="og:title" content="ページの正確なタイトル" />
<meta property="og:type" content="website" />
<meta property="og:description" content="SNSシェア用の魅力的な説明文" />
<meta property="og:image" content="https://example.com/images/og-image.png" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
- og:url: ページの正規URL
- og:title: ページのタイトル（`title`タグと違っても良い）
- og:type: ページのタイプ（トップページなら `website`, 記事ページなら `article` など）
- og:description: ページの説明文
- og:image: シェア時に表示させたい画像のURL
- og:site_name: Webサイト全体の名前
- og:locale: 言語（日本語なら `ja_JP`）
Twitterカード設定
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Twitterユーザー名" />
Twitter（X）は独自の「Twitterカード」設定も持っています。`twitter:card` でカードの種類（大きな画像付き `summary_large_image` が一般的）を指定し、`twitter:site` でサイトの公式アカウントを指定できます。基本的なOGP設定があれば、Twitter側もそれを読み取ってくれますが、より細かく制御したい場合に設定します。
Facebook設定
<meta property="fb:app_id" content="FacebookアプリID">
Facebookインサイト（分析機能）などを利用する場合は、発行したアプリIDを設定します。
（参考）
Facebook OGP：https://developers.facebook.com/docs/sharing/webmasters
Twitter OGP： https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup
Googleがサポートするその他の主要タグ
これまで紹介したタグの多くはGoogleもサポートしていますが、それ以外にもGoogleが認識する特殊なタグがいくつかあります。
なお、Googleはhead内のmetaタグの大文字・小文字を区別しませんが、一般的に小文字で記述されます。
サイト専用検索ボックスの無効化
<meta name="google" content="nositelinkssearchbox" />
検索結果でサイト名の下に表示されることがある「サイト内検索ボックス」を非表示にしたい場合に指定します。
翻訳の無効化
<meta name="google" content="notranslate" />
Google検索結果で「このページを翻訳」というリンクを表示させたくない場合に指定します。
Search Console で所有権を確認
<meta name="google-site-verification" content="（ここに固有の文字列が入ります）" />
Google Search ConsoleというWebサイト分析ツールを利用する際、あなたが本当にそのサイトの所有者であることを証明するために使うタグです。
リダイレクト（非推奨）
<meta http-equiv="refresh" content="5;url=https://example.com/new-page" />
「5秒後に指定したURLに転送（リダイレクト）する」という設定です。Googleはこのタグをサポートしていますが、ユーザーを混乱させる可能性があるため、使用は推奨されていません。
ページの移転などを行う場合は、metaタグではなく、サーバー側で「301リダイレクト」という正式な方法を使うのがベストです。
まとめ：headタグ設定のテンプレート
今回は、HTMLの<head>タグの役割と、設定すべき主要なタグを解説しました。<head>はブラウザに直接表示されないため軽視されがちですが、検索エンジンやSNS、ブラウザに対してWebサイトの情報を正しく伝える、非常に重要な「裏方」です。
最後に、ここまでの内容をまとめた一般的な<head>タグの記述例（テンプレート）を紹介します。これをベースに、あなたのWebサイトに合わせてカスタマイズしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 必須の基本設定 -->
<meta charset="UTF-8" >
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO・UX関連 -->
<title>ページのタイトル｜サイト名</title>
<meta name="description" content="このページの説明文（70〜120文字程度）">
<meta name="robots" content="index,follow" /> <!-- 通常はこれでOK -->
<!-- ファビコン -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<!-- OGP（SNSシェア）関連 -->
<meta property="og:url" content="ページの正規URL" />
<meta property="og:type" content="article" /> <!-- 記事ページの場合 -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="SNSでシェアさせたい説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="シェア時に表示する画像のURL" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body>
<!-- ページの中身 -->
</body>
</html>
なお、検索エンジンやSNSの仕様は日々更新されます。<head>タグの書き方も、常に最新の情報をチェックする習慣をつけると良いでしょう。
よくある質問（FAQ）
Q1. <head>タグの中に書くタグの順番は重要ですか？
A1. 厳密なルールの多くはありませんが、推奨される順番があります。まず、<meta charset=”UTF-8″> は、ブラウザが文字コードをいち早く解釈できるよう、<head>タグの直後（できるだけ早い段階）に書くことが強く推奨されます。それ以外のタグ（title, description, OGP, linkなど）は、グループごとにまとめて書くと管理しやすくなります。
Q2. <title>タグと<h1>タグは、どう違うのですか？ 同じ内容でも良いですか？
A2. どちらも「タイトル」ですが、役割が異なります。<title>タグは<head>内に書き、主に「ブラウザのタブ」や「検索結果」に表示される、そのページ全体のタイトルです。一方、<h1>タグは<body>内に書き、Webサイトのページ上に「大見出し」として表示されるタイトルです。両者は同じ内容でも問題ありませんが、<title>にはサイト名を含め、<h1>は記事の見出しだけにするなど、表示場所に合わせて最適化するのが一般的です。
Q3. OGPタグはたくさんありますが、すべて設定しないとダメですか？
A3. すべてが必須ではありませんが、主要なタグは設定した方が望ましいです。特に重要なのは、「og:title（タイトル）」「og:type（タイプ）」「og:image（画像）」「og:url（URL）」の4つです。これらがないと、SNSでシェアされた際に見栄えが崩れたり、意図しない情報が表示されたりする可能性があります。余裕があれば「og:description」や「og:site_name」も設定すると、より親切です。