◀ 6.

HTML meta 要素完全ガイド

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

要素の役割

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

必須の meta タグ 2 つ


    
    

    
    

    ページタイトル

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 タグ

Open Graph (Facebook / LINE)

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

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

Twitter Card

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

http-equiv 属性

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

theme-color と PWA

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

keywords は無効

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

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




    
    

    記事タイトル | サイト名

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 00:16:55 guest 227

人気ページ

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