この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: head要素
SEOタイトル: HTML <head> 要素完全ガイド（title / meta / link / script / SEO 基本）

この記事の要点
  • は HTML 文書のメタデータを置く領域。画面には表示されない
  • 必須: , </code>, <code><meta name="viewport"></code></li><li><strong>SEO 重要</strong>: <code>title</code> / <code>meta description</code> / <code>canonical</code> / OGP</li><li><strong>外部リソース</strong>: <code><link rel="stylesheet"></code>, <code><script src></code>, ファビコン</li><li><strong>charset は <head> の先頭付近</strong>（最初の 1024 バイト以内）に置く</li><li>モバイル必須: <code><meta name="viewport" content="width=device-width, initial-scale=1"></code></li></ul></td></tr></table> <h2>head 要素の役割</h2> <p><code><head></code> は HTML 文書の<strong>メタ情報</strong>を記述する領域です。<strong>画面には表示されない</strong>が、ブラウザ・検索エンジン・SNS シェア・OS（PWA）などが読んで動作する重要な部分です。</p> <pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html> <html lang="ja"> <head> <!-- ★ 文字エンコーディング (最初に書く) --> <meta charset="UTF-8"> <!-- ★ モバイル対応 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ★ ページタイトル --> <title>サンプルページ | サイト名

    主要な要素

    要素役割必須/推奨
    </code></td><td>ブラウザタブ / 検索結果 / SNS シェアのタイトル</td><td>★ 必須</td></tr> <tr><td><code><meta charset></code></td><td>文字エンコーディング (UTF-8 推奨)</td><td>★ 必須</td></tr> <tr><td><code><meta name="viewport"></code></td><td>モバイル表示倍率制御</td><td>★ ほぼ必須</td></tr> <tr><td><code><meta name="description"></code></td><td>検索結果スニペット</td><td>SEO 重要</td></tr> <tr><td><code><meta name="robots"></code></td><td>クロール / index 制御 (noindex, nofollow 等)</td><td>必要時</td></tr> <tr><td><code><link rel="canonical"></code></td><td>正規 URL 指定 (重複コンテンツ対策)</td><td>SEO 重要</td></tr> <tr><td><code><link rel="stylesheet"></code></td><td>外部 CSS</td><td>★</td></tr> <tr><td><code><link rel="icon"></code></td><td>ファビコン</td><td>推奨</td></tr> <tr><td><code><script></code></td><td>JavaScript</td><td>必要時</td></tr> <tr><td><code><style></code></td><td>インライン CSS</td><td>必要時</td></tr> <tr><td><code><base></code></td><td>相対 URL のベース指定</td><td>稀</td></tr> </tbody> </table> <h2>charset の指定</h2> <p>文字化けを防ぐため、<strong>必ず head の最初の方に</strong>書きます。仕様上は<strong>先頭 1024 バイト以内</strong>に置く必要があります:</p> <pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ HTML5 推奨 --> <meta charset="UTF-8"> <!-- HTML4 / XHTML 形式（互換性のため残されているが古い） --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- どちらも head の冒頭に置く --> <head> <meta charset="UTF-8"> <!-- ★ ここ --> <title>... ...

    viewport: モバイル対応の要

    これを書かないと、スマホで「PC 版が縮小表示される」状態になります:

    title と description (SEO)

    
HTML head 要素の書き方 | webdev チュートリアル

    OGP (Open Graph Protocol)

    Facebook / Twitter / Slack / Discord などで URL をシェアした際の「カード」表示を制御します:

    ファビコン

    CSS と JS の読み込み戦略

    言語と方向

    テーマカラー / PWA

    head に書いてはいけないもの

    • や

      など「表示要素」 → へ

    • 大量のインライン JS（描画ブロッキング） → 末尾 / defer / 外部化
    • 大量のインライン CSS（Critical CSS 用途以外） → 外部 CSS へ
    • ユーザー入力をそのまま埋めた meta（XSS リスク） → 必ずエスケープ

    FAQ

    Q: http-equiv="Content-Type" と meta charset はどっちを使う？
    A: HTML5 では が標準。古い書式は不要です。

    Q: meta keywords は今でも書くべき？
    A: Google は 2009 年に「keywords は使わない」と明言。書かなくて OK。一部の社内検索エンジンが使うことはあります。

    Q: title タグの最適な長さは？
    A: 検索結果に表示される30〜35 文字を目安に。長すぎると後ろが「...」で省略される。サイト名は「| サイト名」「- サイト名」形式で末尾に付けるのが一般的。