タイトル: meta要素
SEOタイトル: HTML meta 要素完全ガイド
| この記事の要点 |
|
要素は 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 を置く方が安全。