HTML meta 要素完全ガイド

▶

この記事の要点

<meta> は HTML ドキュメントのメタ情報 (文字コード、説明、ビューポート等) を宣言する空要素
必須は <meta charset="UTF-8"> と <meta name="viewport"> (モバイル対応)
SEO の description は重要だが keywords は Google が無視 (現代では不要)
SNS シェア最適化は Open Graph (og:*) と Twitter Card
PWA 対応に theme-color / apple-mobile-web-app-capable

`<meta>` 要素の役割

<meta> 要素は HTML ドキュメントのメタデータを宣言する空要素で、必ず <head> 内に配置します。文字コード、ビューポート、検索エンジン向け説明、SNS シェア時の表示情報など、ブラウザや外部サービスが解釈する情報を提供します。

必須の meta タグ 2 つ

<head>
    <!-- 1. 文字コード (最優先で書く) -->
    <meta charset="UTF-8">

    <!-- 2. モバイル対応 (レスポンシブの基本) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ページタイトル</title>
</head>

charset は最初の 1024 バイト以内、できれば最初の行に書きます。これより前にある内容は文字化けする可能性があります。

viewport はモバイル端末で論理ピクセル幅をデバイス幅に合わせる宣言です。これが無いと、スマホで表示すると 980px 等の PC 用幅にレイアウトされ、文字が極小になります。

主要な meta タグ一覧

タグ	用途	備考
`charset`	文字コード	UTF-8 必須
`viewport`	モバイル幅制御	レスポンシブの基本
`description`	ページ説明 (検索結果に表示)	120 文字程度 / SEO 重要
`keywords`	キーワード	Google は無視。書かなくて良い
`author`	著者名	SEO 効果はほぼなし
`robots`	クローラー指示	`noindex`, `nofollow` 等
`theme-color`	ブラウザ UI の色	モバイルアドレスバーに反映
`http-equiv="refresh"`	自動リダイレクト	使わずに HTTP 301 推奨

SEO 向け meta タグ

<head>
    <!-- 検索結果に出る説明文 (重要) -->
    <meta name="description"
          content="Laravel で CSRF トークン切れエラー「The page has expired」の原因と4つの対処法を解説。@csrf 漏れ、セッション切れ、storage 権限不足など。">

    <!-- クローラー制御 -->
    <meta name="robots" content="index,follow">           <!-- 既定値 -->
    <meta name="robots" content="noindex,nofollow">       <!-- 検索除外 -->
    <meta name="googlebot" content="noarchive">          <!-- キャッシュ無効 -->

    <!-- カノニカル URL (重複コンテンツ対策) -->
    <link rel="canonical" href="https://example.com/article/123">

    <!-- 言語 alternate (多言語サイト) -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/article/123">
    <link rel="alternate" hreflang="ja" href="https://example.com/article/123">
</head>

Open Graph (Facebook / LINE)

SNS や LINE でシェアしたとき、リンクカードに表示される画像・タイトル・説明を制御します。これが無いとシェアしてもただの URL になるため、現代のサイトでは必須です。

<head>
    <meta property="og:title" content="Laravel CSRF エラーの解決法">
    <meta property="og:description"
          content="@csrf 漏れ、セッション切れ、storage 権限不足など4つの原因と対処を解説">
    <meta property="og:image" content="https://example.com/og/csrf.png">
    <meta property="og:url" content="https://example.com/article/csrf">
    <meta property="og:type" content="article">           <!-- website / article -->
    <meta property="og:site_name" content="IT総合 Wiki">
    <meta property="og:locale" content="ja_JP">
</head>

og:image は1200×630px (1.91:1) が Facebook/LINE 推奨。表示時に切り抜かれるので、中央に重要要素を配置します。

Twitter Card

<head>
    <meta name="twitter:card" content="summary_large_image">
    <!-- summary | summary_large_image | app | player -->

    <meta name="twitter:site" content="@example_jp">      <!-- サイト Twitter -->
    <meta name="twitter:creator" content="@author_jp">    <!-- 著者 Twitter -->
    <meta name="twitter:title" content="Laravel CSRF エラーの解決法">
    <meta name="twitter:description" content="...">
    <meta name="twitter:image" content="https://example.com/og/csrf.png">
</head>

Twitter (X) は OG タグもフォールバックとして読みます。多くのサイトでは OG タグだけ書いて twitter:card のみ追加するパターンが一般的です。

http-equiv 属性

http-equiv は HTTP レスポンスヘッダ相当の指示をします。リフレッシュ、CSP、Cache-Control 等。

<!-- 5 秒後にリダイレクト (使うな、301 を返す方が良い) -->
<meta http-equiv="refresh" content="5; url=https://example.com/new">

<!-- 即座にリダイレクト -->
<meta http-equiv="refresh" content="0; url=https://example.com/new">

<!-- CSP (HTTP ヘッダの方が推奨) -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-inline'">

<!-- 互換モード (IE 用、現代は不要) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- キャッシュ無効化 (HTTP ヘッダの方が推奨) -->
<meta http-equiv="Cache-Control" content="no-store">

theme-color と PWA

モバイル Chrome のアドレスバー色、PWA インストール時のスプラッシュ画面色などを指定します。

<!-- ブラウザ UI の色 (モバイル Safari/Chrome のアドレスバー) -->
<meta name="theme-color" content="#4f46e5">

<!-- Dark Mode 対応 (色を分ける) -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">

<!-- iOS PWA / ホーム画面追加 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyApp">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Windows タイル -->
<meta name="msapplication-TileColor" content="#4f46e5">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

keywords は無効

1990 年代に SEO スパムで濫用された結果、Google は 2009 年に keywords を無視すると公式発表しました。書いても効果はありませんが、害もないので削除する必要もありません。新規サイトでは省略推奨。

ベストプラクティスのテンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>記事タイトル | サイト名</title>
    <meta name="description" content="120字程度の説明...">

    <!-- カノニカル -->
    <link rel="canonical" href="https://example.com/article/123">

    <!-- OG (SNS シェア) -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="記事タイトル">
    <meta property="og:description" content="120字程度の説明...">
    <meta property="og:image" content="https://example.com/og/123.png">
    <meta property="og:url" content="https://example.com/article/123">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- テーマカラー -->
    <meta name="theme-color" content="#4f46e5">

    <!-- アイコン -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- CSS / JS -->
    <link rel="stylesheet" href="/css/app.css">
    <script defer src="/js/app.js"></script>
</head>

FAQ

Q: meta description の文字数は?
A: Google 検索結果に表示されるのは 120 文字前後 (PC) / 80 文字前後 (SP)。先頭にキーワードと結論を詰めるのがコツ。

Q: OG タグが Facebook に反映されない
A: Facebook Sharing Debugger で「Scrape Again」を実行。キャッシュ更新が必要。

Q: meta タグの順序は重要?
A: charset は最初。viewport は早めに。他は順不同。title の前に charset を置く方が安全。

編集

子ページ

子ページはありません

同階層のページ

2026-06-11 07:07:02 guest 227

最近更新/作成されたページ

Unreal Engine AI MoveTo 完全ガイド（NavMesh / AIController / Behavior Tree） 2026-06-11 07:07:02
shutdown コマンド完全ガイド（Linux / Windows / systemd の使い分け） 2026-06-11 07:07:02
DI（依存性注入）完全ガイド（Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入） 2026-06-11 07:07:02
git 用語一覧完全リファレンス（Repository / HEAD / Branch / Rebase / Stash 他） 2026-06-11 07:07:02
TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:07:02
Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:07:02
EJB完全ガイド（Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替） 2026-06-11 07:07:02
git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:07:02
Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:07:02
CDI完全ガイド（Inject/Produces/Qualifier/Scope/Spring DIとの違い） 2026-06-11 07:07:02
Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:07:02
Apache .htaccess でベーシック認証を設定する手順（.htpasswd / htpasswd / AuthType Basic / トラブルシュート） 2026-06-11 07:07:02
Python アプリのローカル独立配布完全ガイド（PyInstaller / wheel / Docker） 2026-06-11 07:07:02
Laravel Eloquent モデルのデフォルト値設定 2026-06-11 07:07:02
Unity Component 取得とキャッシュの完全ガイド（GetComponent／RequireComponent／TryGetComponent） 2026-06-11 07:07:02

ページ一覧

その他

HTML meta 要素完全ガイド

`<meta>` 要素の役割

必須の meta タグ 2 つ

主要な meta タグ一覧

SEO 向け meta タグ

Open Graph (Facebook / LINE)

Twitter Card

http-equiv 属性

theme-color と PWA

keywords は無効

ベストプラクティスのテンプレート

FAQ

人気ページ

最近更新/作成されたページ

ページ一覧

その他

HTML meta 要素完全ガイド

<meta> 要素の役割

必須の meta タグ 2 つ

主要な meta タグ一覧

SEO 向け meta タグ

Open Graph (Facebook / LINE)

Twitter Card

http-equiv 属性

theme-color と PWA

keywords は無効

ベストプラクティスのテンプレート

FAQ

人気ページ

最近更新/作成されたページ

`<meta>` 要素の役割