この記事の要点

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