お問い合わせ
お問い合わせ
ホーム > HTML > HTMLのhead要素の使い方まとめ｜Webページの基本情報を正しく設定しよう

HTMLのhead要素の使い方まとめ｜Webページの基本情報を正しく設定しよう

HTML
HTMLのhead要素の構成とmetaタグ設定の図解
HTMLのhead要素の基本構成を図で理解しよう

はじめに

HTMLの<head>要素は、ページの見た目には表示されないけれど、SEOや表示速度、SNSシェアなどに大きく関係する重要な部分です。
この記事では、<head>内でよく使う要素を体系的に整理し、基礎から完璧に理解できるように解説します。

1. head要素とは？

head要素の役割

<head>要素は、HTML文書の**メタ情報（meta-information）**を記述する部分です。
タイトル、文字コード、CSSやJavaScriptの読み込み、SNSカード情報などを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは！</h1>
</body>
</html>

2. よく使うhead内の要素一覧

要素役割
<title>ページタイトルを設定（検索結果にも表示）
<meta>ページの文字コードや説明文、OGP情報など
<link>CSSやファビコンなど外部リソースを読み込む
<script>JavaScriptを読み込む
<style>ページ内に直接CSSを書く
<base>相対URLの基準を設定する

👉 詳しくは「HTMLのlinkタグの使い方まとめ｜外部ファイルを読み込む基本」も参照。

3. metaタグの使い方

基本のmetaタグ

<meta charset="UTF-8">
<meta name="description" content="Web制作に役立つHTMLのhead要素の使い方を解説します。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • charset: ページの文字コードを指定（UTF-8推奨）
  • description: 検索結果の説明文に使われる
  • viewport: スマホなどのレスポンシブ対応に必須

👉 関連記事：HTMLで日本語フォントを指定する方法

4. titleタグとSEOの関係

<title>タグはブラウザのタブや検索結果に表示される、SEOに最も重要な要素の一つです。

<title>HTMLのhead要素の使い方まとめ｜Web制作の基本</title>
  • 文字数目安：30文字前後
  • ページ内容を簡潔に表す
  • 同サイト内で重複しないようにする

👉 関連記事：SEOに強い記事構造の作り方

5. CSS・JavaScriptの読み込み

CSSの読み込み

<link rel="stylesheet" href="style.css">

JavaScriptの読み込み

<script src="script.js" defer></script>
  • deferを付けるとHTML解析後に実行されるため、表示が速くなる

6. SNSシェア・OGP設定

SNSでページをシェアした際に画像や説明文を正しく表示するには、OGPタグを設定します。

<meta property="og:title" content="HTMLのhead要素の使い方まとめ">
<meta property="og:description" content="headタグの構成やmeta設定など、Web制作の基本を徹底解説！">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:url" content="https://example.com/html-head-element">
<meta property="og:type" content="article">

👉 詳細解説：OGP設定の基本｜SNSシェアでの見え方を整える

7. favicon（ファビコン）の設定

ブラウザタブや検索結果に表示される小さなアイコンです。

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

👉 関連記事：HTMLのlinkタグの使い方まとめ

8. その他の便利なhead設定

外部フォントの読み込み

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

canonicalタグ（重複URL対策）

<link rel="canonical" href="https://example.com/html-head-element">

robotsメタタグ（検索エンジン制御）

<meta name="robots" content="index, follow">

9. よくある間違い

ミス例問題点正しい書き方
<meta charset="Shift_JIS">古い文字コード<meta charset="UTF-8">
<title>無題ドキュメント</title>SEO的に不利<title>HTMLのhead要素の使い方まとめ</title>
<link>や<script>の順番がバラバラ読み込み順による不具合ルールを決めて統一

10. まとめ

  • <head>にはページの情報・設定・SEO要素をまとめる
  • 特にmeta・title・linkは重要
  • SNSや検索に正しく表示されるための設定を行うことが大切

関連記事