◀ 6.

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 を置く方が安全。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:07:02 guest 229

人気ページ

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