2026年4月16日
HTML head タグとは？
HTMLの <head> タグは、ページの「設定情報」を書く場所です。ブラウザの画面には表示されませんが、SEO・スマホ対応・スタイルの読み込みなど、ページの動作に重要な役割を持ちます。
この記事では、<head> に書くべき内容を一通りまとめて解説します。
💡 まだHTMLを書いたことがない人は、まず「HTMLで初めてのWebページを作る方法」から始めてみましょう。
必須の設定
<head>
<!-- 文字コード（必須） -->
<meta charset="UTF-8">
<!-- スマホ対応（必須） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル（必須） -->
<title>ページタイトル | サイト名</title>
<!-- 検索結果の説明文 -->
<meta name="description" content="ページの説明文（120字以内）">
</head>それぞれの設定がなぜ必要なのか、もう少し詳しく見てみましょう。
charset="UTF-8" — 文字化け防止
charsetを書かないと、ブラウザが文字コードを正しく判断できません。日本語が読めない文字（文字化け）になることがあります。UTF-8は世界中の文字に対応した文字コードで、現在のウェブサイトではほぼ必ず使われています。
viewport — スマホ対応
viewportの設定がないと、スマートフォンでページを開いたときにパソコン用の大きなレイアウトがそのまま表示されます。文字がとても小さくなり、拡大しないと読めません。width=device-width を指定すると、画面の幅に合わせてレイアウトが調整されます。
title — ページタイトル
titleタグの内容は、ブラウザのタブに表示されるだけでなく、Googleの検索結果にも表示されます。ページの内容がわかるタイトルをつけましょう。
meta description — 検索結果の説明文
descriptionは、Googleの検索結果でタイトルの下に表示される説明文です。120字以内で、ページの内容を具体的に書くと、クリックされやすくなります。
💡 HTMLタグ一覧【よく使う20選】で基礎を確認できます。
📖 metaタグについてもっと詳しく知りたい人は「HTMLのmetaタグとは？」も読んでみてください。
CSSとJavaScriptの読み込み
<head>
<!-- 外部CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">
<!-- Google Fontsの読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<!-- JavaScriptはbodyの直前に書くのが一般的 -->
</head>🔗 あわせてHTMLリストの作り方もチェックしてみましょう。
OGPとfavicon
<head>
<!-- ファビコン（ブラウザタブのアイコン） -->
<link rel="icon" href="/favicon.ico">
<!-- OGP（SNSシェア時の表示） -->
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/page/">
</head>📖 詳しくはHTML問題ドリルで解説しています。
よくある間違い
headタグを書くときに、初心者がやりがちな間違いを紹介します。
① charsetをbodyの後に書いてしまう
charsetはheadタグの一番最初に書くのがルールです。ブラウザはページを上から順に読むので、charsetが遅れると、それまでの文字が化ける可能性があります。
② titleタグを書き忘れる
titleがないと、ブラウザのタブに「ファイル名」や「URL」がそのまま表示されます。検索結果にも正しいタイトルが出ないので、SEO（検索エンジン最適化）にも悪影響です。
③ viewportの値を変えてしまう
width=device-width, initial-scale=1.0 はほぼ定型文です。ここの値を変えると、スマホでの表示が崩れることがあります。特に理由がなければ、そのままコピーして使いましょう。
④ headの中にページの内容を書いてしまう
headタグの中に <p> や <h1> を書いても、ブラウザに表示されません。ページに表示したい内容は、必ず <body> タグの中に書きましょう。
🔗 headタグの前に書く「DOCTYPE宣言」については「HTMLのDOCTYPE宣言とは？」で解説しています。
headタグに書くべき内容の優先順位
headタグの中にはたくさんの情報を書けますが、最初から全部覚える必要はありません。優先順位をつけて、大事なものから覚えていきましょう。
必須（必ず書くもの）
- meta charset="UTF-8"：文字化けを防ぐ。これがないと日本語が正しく表示されないことがあります。
- title：ページのタイトル。ブラウザのタブに表示されます。検索結果にも使われるので、内容がわかるタイトルをつけましょう。
推奨（書いたほうがいいもの）
- meta name="viewport"：スマホで正しく表示するための設定です。content="width=device-width, initial-scale=1.0"と書きます。これがないと、スマホで見たときにページが小さく表示されてしまいます。
- meta name="description"：ページの説明文です。検索結果でタイトルの下に表示されます。120字以内で、ページの内容を簡潔に書きましょう。
任意（必要に応じて書くもの）
- link rel="stylesheet"：外部CSSファイルを読み込むときに使います。
- link rel="icon"：ブラウザのタブに表示される小さなアイコン（ファビコン）を設定します。
- script：JavaScriptファイルを読み込むときに使います。
headタグでよくあるミス
ミス1：titleタグを書き忘れる
titleがないと、ブラウザのタブに「無題」やファイル名が表示されます。検索エンジンにも正しく認識されません。必ず書きましょう。
ミス2：charsetの指定を忘れる
charsetを書かないと、日本語が文字化け（意味不明な記号の羅列）になることがあります。headタグの最初の行に書くのがおすすめです。
ミス3：headの中にbodyの内容を書いてしまう
headタグの中に段落や見出しを書いても、ブラウザに表示されないか、予期しない動作になります。画面に表示したい内容は必ずbodyタグの中に書きましょう。
ミス4：viewportを忘れてスマホ表示が崩れる
viewportの設定がないと、スマホでページを開いたときにデスクトップ版の縮小表示になります。文字が小さくて読めなくなるので、忘れずに書きましょう。
まとめ：headの基本テンプレート
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル | サイト名</title>
<meta name="description" content="ページの説明文">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>- ✅
charset="UTF-8"：文字化け防止（必須） - ✅
viewport：スマホ対応（必須） - ✅
title：ページタイトル（必須） - ✅
description：検索結果の説明文 - ✅
link rel="stylesheet"：CSSファイルの読み込み - ✅ charsetはheadの一番最初に書く
- ✅ headの中にページの内容（pやh1）を書かない