metaタグの正しい使い方 SEOとSNSシェアを最適化する設定方法
Webページを作成する際に欠かせないのが meta要素 です。meta 要素は、ページの情報をブラウザや検索エンジン、SNSに伝える役割を持っています。検索結果の説明文をカスタマイズしたり、SNSでページをシェアしたときに正しい画像やタイトルを表示させたりするのに使われます。
meta要素とは？
meta 要素は、HTMLの <head> 内に記述し、ページの設定情報を指定します。目には見えませんが、以下のような場面で重要な役割を果たします。
1. 検索エンジン対策（SEO）
検索エンジンがページの内容を理解しやすくするために、description などの meta を設定します。
2. SNSシェアの最適化
SNSでURLをシェアしたときに、適切なタイトルや画像を表示させるために OGP という meta 要素を使います。
3. スマホ表示の調整
スマホで見たときに、画面サイズを適切に調整するための viewport を設定します。
よく使われるmeta要素
meta 要素にはたくさんの種類がありますが、特によく使われるのは次のようなものです。
基本の設定
- 文字コードの指定（文字化け防止）
- ページの説明（description）
- レスポンシブ対応（viewport）
SEO・検索エンジン対策
- 検索エンジンにインデックスさせるかの指定（robots）
- 正規URLの設定（canonical）
SNSシェア用
FacebookやTwitterでの表示を最適化（OGP・Twitterカード）
基本のmeta要素
meta 要素にはさまざまな種類がありますが、まずは 基本的な設定 から。これらの要素は、ほとんどのWebページで使用される重要なものです。
文字コードの指定
<meta charset="UTF-8">
この meta 要素は 文字コード（エンコーディング） を指定します。UTF-8 を指定することで、日本語やその他の多くの言語が正しく表示されるようになります。
文字化けを防ぐためにも、必ず設定しておきましょう。
- HTML5では
<meta charset="UTF-8">の記述が推奨されており、http-equiv="Content-Type"は不要です。 UTF-8は、世界中の多くの言語をサポートするため、ほとんどのWebサイトで採用されています。
レスポンシブ対応
<meta name="viewport" content="width=device-width, initial-scale=1">
この meta 要素は、スマートフォンやタブレットでの表示を最適化するために使用されます。viewport を設定しないと、スマホでWebページを開いた際に、PC用の幅で表示されてしまうことがあります。
width=device-width→ 画面の幅をデバイスの幅に合わせるinitial-scale=1→ 初期の拡大率を1（等倍）に設定
- スマホ対応（レスポンシブデザイン）をする場合は必ず設定する。
user-scalable=noを追加するとズームができなくなるため、基本的には使わない方がよい。
サイトの著者情報
<meta name="author" content="サイトの著者名">
この meta 要素は、ページの 著者情報 を指定します。検索エンジンや一部のブラウザ拡張機能がこの情報を利用する場合があります。使用例では、下記のようになります。
<meta name="author" content="山田 太郎">
このように記述すると、「山田 太郎」がページの作成者として認識されます。
- 個人サイトやブログでは、サイト管理者の名前を入れてもよい。
- 企業サイトでは、会社名やブランド名を入れることもある。
ページの概要（検索結果に影響）
<meta name="description" content="このページは、○○に関する情報を紹介するサイトです。">
この meta 要素は、ページの 概要（description） を設定します。検索結果に表示されるスニペット（ページの説明文）に影響を与えるため、SEOにおいて重要な要素のひとつです。
- 120〜160文字以内で簡潔にまとめるのがベスト（Googleは約120文字まで表示）。
- 重要なキーワードを含めると、検索結果でのクリック率が向上する。
- 設定しない場合、Googleがページの内容から自動で生成する。
このほかにも、キーワード指定のmeta要素もありますが、meta keywords は、かつて 検索エンジンがページの内容を判断するため に使用されていました。しかし、現在では Googleをはじめとする主要な検索エンジンが無視する ようになっています。そのため、ほとんどのWebサイトでは keywords を設定していません。
SEO関連のmeta要素
SEO（検索エンジン最適化）に関する meta 要素は、検索エンジンのクローラーが どのようにページを扱うべきか を指定するために使われます。検索結果への表示やサイトの評価に影響を与えるため、適切に設定することが重要です。
クローラーの制御（robots）
<meta name="robots" content="index, follow">
この meta 要素は、検索エンジンの クローラーの動作 を制御します。robots を適切に設定することで、ページを検索結果に表示させるかどうかを指定できます。
| 設定値 | 説明 |
|---|---|
index | ページを検索結果に表示する（デフォルト） |
noindex | ページを検索結果に表示しない |
follow | ページ内のリンクをたどる（デフォルト） |
nofollow | ページ内のリンクをたどらない |
none | noindex, nofollow と同じ（検索結果に表示せず、リンクもたどらない） |
<meta name="robots" content="noindex, follow">
上記のように設定をすると ページ自体は検索結果に表示されないが、ページ内のリンクはクローラーがたどる ようになります。
index, followはデフォルトの動作なので、特に記述しなくても問題ない。- 管理画面やプライバシーポリシーなど 検索結果に表示させたくないページ は
noindexを設定する。 nofollowを使うと、リンク先の評価を渡さなくなる（SEO効果を抑える）。
Google専用のクローラー制御（googlebot）
<meta name="googlebot" content="noindex, nofollow">
googlebot は Googleのクローラー（ロボット）専用 の制御を行う meta 要素です。robots と同じ設定が可能ですが、Google専用に指示を出したい場合に使用します。
<meta name="googlebot" content="noindex, nofollow">
上記のように設定をすると Googleの検索エンジンには表示されず、リンクもたどられない ようになります。
- 一般的には
robotsを使えば十分だが、Googleだけ特別に設定したい場合に使用する。 googlebotの設定はrobotsよりも優先される。
正規URLの指定（canonical）
<link rel="canonical" href="https://example.com">
canonical は、検索エンジンに「このページの正式なURLはどれか」 を伝えるための要素です。例えば、同じ内容のページが複数ある場合、検索エンジンがどのURLを正規のページとして扱うかを指定できます。
<link rel="canonical" href="https://example.com/article">
この設定をすると、検索エンジンは https://example.com/article を正式なページ として認識し、他の類似ページは重複コンテンツとして扱わなくなります。
wwwの有無やhttp/httpsなど、複数のURLがある場合に SEOの評価を統一できる。- 商品ページや記事のページで、URLのパラメータが異なるだけのページ（例:
?id=123）を統合できる。 canonicalを間違えると、意図しないページが検索結果から消える可能性があるため注意。
Googleサーチコンソールの所有権確認
<meta name="google-site-verification" content="XXXXX">
この meta 要素は、Googleサーチコンソール（Google Search Console）で サイトの所有権を確認する ために使用されます。Googleサーチコンソールを利用すると、以下のようなデータを確認できます。
- 検索エンジンにどのようにインデックスされているか
- 検索クエリ（ユーザーがどんなキーワードで検索したか）
- ページのクリック率や表示回数
<meta name="google-site-verification" content="abc123XYZ">
Googleサーチコンソールで提供された content="XXXXX" の部分を自分のコードに置き換えて設定します。
metaタグ以外にも、HTMLファイルのアップロードやDNSレコードの設定 でも所有権確認が可能。metaタグを設定したら、Googleサーチコンソールの管理画面で「確認」ボタンを押す。- 一度確認が取れたら、
metaタグを削除しても問題ない（ただし、Google側のデータがリセットされる可能性がある）。
SEO関連の meta 要素を適切に設定することで、検索エンジンに対して最適な情報を伝えることができます。
| 項目 | 設定 | 目的 |
|---|---|---|
| クローラーの制御 | <meta name="robots" content="index, follow"> | ページを検索結果に表示させるか決める |
| Google専用クローラーの制御 | <meta name="googlebot" content="noindex, nofollow"> | Googleにだけ特別な指示を出す |
| 正規URLの指定 | <link rel="canonical" href="https://example.com"> | 重複コンテンツを防ぎ、SEO評価を統一する |
| サイト所有権の確認 | <meta name="google-site-verification" content="XXXXX"> | Googleサーチコンソールの設定 |
SNSシェア用のmeta要素（OGP, Twitter Cards）
Webページが SNSでどのように表示されるか を最適化するために、meta 要素を設定することが重要です。特に FacebookやTwitter などのSNSでは、適切な meta 設定がされていないと、タイトルや画像が正しく表示されなかったり、意図しない情報が出てしまったりすることがあります。SNSシェア時に役立つ OGP（Open Graph Protocol） と Twitter Cards について解説します。
OGP（Open Graph Protocol）とは？
OGP（Open Graph Protocol） は、Facebookが提唱した SNS向けのメタデータ規格 です。
Facebookだけでなく、LINEやLinkedInなどのSNSでも OGP を活用しており、適切に設定することで シェア時の表示を最適化 できます。
OGPの基本的なmetaタグ
<meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com"> <meta property="og:type" content="website">
| 設定 | 内容 |
|---|---|
og:title | SNSでシェアされたときのタイトル |
og:description | SNSの投稿に表示されるページの説明文 |
og:image | シェア時に表示する画像（URLで指定） |
og:url | ページのURL（正規URLを指定） |
og:type | コンテンツの種類（通常は website を指定） |
<!--使用例--> <meta property="og:title" content="HTMLのmetaタグを解説！"> <meta property="og:description" content="HTMLのmetaタグを使ってSEOやSNS最適化をしよう。"> <meta property="og:image" content="https://example.com/ogp-image.jpg"> <meta property="og:url" content="https://example.com/article"> <meta property="og:type" content="article">
og:imageは 1200×630px 以上のサイズを推奨（Facebookの推奨サイズ）og:typeは 基本的にwebsiteだが、記事の場合はarticleを指定するとよい- OGPの設定を確認するには、Facebookのシェアデバッガー を使う
Twitter Cardsとは？
Twitter Cards は、TwitterでURLをシェアした際に、画像やタイトルを適切に表示させるための meta タグです。Twitter専用の設定ですが、OGPと組み合わせて使うことで、より正確に情報を伝えることができます。
Twitter Cardsの基本的なmetaタグ
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@Twitterのアカウント"> <meta name="twitter:title" content="ページタイトル"> <meta name="twitter:description" content="ページの説明"> <meta name="twitter:image" content="https://example.com/image.jpg">
| 設定 | 内容 |
|---|---|
twitter:card | カードの種類（通常は summary_large_image） |
twitter:site | 投稿元のTwitterアカウント（@を含める） |
twitter:title | Twitterでシェアされたときのタイトル |
twitter:description | Twitterでの説明文 |
twitter:image | Twitterで表示される画像（URLで指定） |
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="HTMLのmetaタグを解説！"> <meta name="twitter:description" content="HTMLのmetaタグを使ってSEOやSNS最適化をしよう。"> <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
Twitter Cardsの種類
twitter:card の値を変更することで、Twitter上の表示をカスタマイズできます。
| 値 | 表示形式 |
|---|---|
summary | 小さなサムネイル付きのカード |
summary_large_image | 大きな画像を表示するカード（推奨） |
app | アプリ情報を表示 |
player | 動画や音声を再生するカード |
Twitterカードのプレビュー確認 Twitterの Card Validator を使うと、設定が正しく機能するか確認できます。
Xなのに、Twitter? 現在は Twitter ではなく X（旧Twitter） という名称になっていますが、meta 要素の設定では、X（旧Twitter）のmetaタグは今も “twitter:” のプレフィックスが使用されています。仕様変更がない限り “twitter:” のままで問題ありません。
OGPとTwitter Cardsの組み合わせ
OGPとTwitter Cardsを組み合わせて設定すると、多くのSNSに対応できるようになります。
<!-- OGP設定 --> <meta property="og:title" content="HTMLのmetaタグを解説！"> <meta property="og:description" content="HTMLのmetaタグを使ってSEOやSNS最適化をしよう。"> <meta property="og:image" content="https://example.com/ogp-image.jpg"> <meta property="og:url" content="https://example.com/article"> <meta property="og:type" content="article"> <!-- Twitter Cards設定 --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="HTMLのmetaタグを解説！"> <meta name="twitter:description" content="HTMLのmetaタグを使ってSEOやSNS最適化をしよう。"> <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
- OGPの設定 は Facebook, LINE, LinkedIn などのSNSに対応
- Twitter Cardsの設定 を追加することで、Twitterでも最適化された表示が可能
その他のmeta要素
以下は、特定の用途に使われる meta 要素について解説します。
SEOやSNSとは直接関係ありませんが、適切に設定することでブラウザの挙動をコントロールしたり、ユーザーエクスペリエンスを向上させたりすることができます。
IEの互換表示設定
<meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible は、Internet Explorer（IE）の互換表示設定 を行うための meta 要素です。IE=edge を指定することで、Internet Explorer で 最新のレンダリングエンジンを使用するよう指示します。
- 現在、IEのサポートは終了しており、新しいブラウザ（Edge, Chrome, Firefox など）を使用するのが一般的。
- 古い社内システムなどでIEが必要な場合 にのみ、この設定を考慮する。
- 最新のWeb開発では基本的に不要。
VS Code（Emmet）のHTML入力を行うと、Emmentのデフォルでは、下記のようにX-UA-Compatibleが出てきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> は、現在のWeb開発ではほとんど不要 なので、Emmet の !（Tabキーで展開する基本のHTMLテンプレート）に含まれている場合は 削除して問題ありません。
指定秒数後にリダイレクト
<meta http-equiv="refresh" content="5;url=https://example.com">
この meta 要素は、指定した秒数後に自動的に別のURLへリダイレクト するために使われます。ページを開いて 5秒後に https://example.com にリダイレクト となっています。
- SEOの観点では非推奨（検索エンジンによってはスパムと判定される可能性あり）。
- リダイレクトが必要な場合は、サーバー側の設定（301リダイレクトなど）を推奨。
- 一時的な用途（例えば「5秒後にホームに戻ります」など）には利用可能。
モバイルブラウザのテーマカラー
<meta name="theme-color" content="#ffffff">
theme-color は、スマートフォンのブラウザのツールバーやステータスバーの色を変更 するための meta 要素です。
<meta name="theme-color" content="#ff6600">
上記の設定をすると、スマートフォンでWebページを開いた際、ブラウザのツールバーの色がオレンジ（#ff6600）に変わる ようになります。対応しているブラウザは以下になります。
- Google Chrome（Android）
- Microsoft Edge（Windows, Android）
- Safari（iOSでは
meta name="apple-mobile-web-app-status-bar-style"を使用）
- モバイル向けWebサイトのデザインを統一するのに便利。
- ダークモード対応 も可能（
media属性を使う）。
<!--ダークモード対応の例--> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#222222" media="(prefers-color-scheme: dark)">
この設定により、ユーザーがダークモードを使用している場合は #222222（黒系）を適用 できます。
よく使うmeta要素のリスト
基本設定
| 項目 | 設定 | 目的 |
|---|---|---|
| 文字コードの指定 | <meta charset="UTF-8"> | 文字化け防止 |
| レスポンシブ対応 | <meta name="viewport" content="width=device-width, initial-scale=1"> | スマホ表示の最適化 |
| ページ概要 | <meta name="description" content="ページの説明"> | 検索結果のスニペットに影響 |
SEO対策
| 項目 | 設定 | 目的 |
|---|---|---|
| クローラーの制御 | <meta name="robots" content="index, follow"> | 検索エンジンのインデックス設定 |
| 正規URLの指定 | <link rel="canonical" href="https://example.com"> | 重複ページの統一 |
| Googleサイト認証 | <meta name="google-site-verification" content="XXXXX"> | Google Search Consoleの設定 |
SNSシェア用（OGP, Twitter Cards）
| 項目 | 設定 | 目的 |
|---|---|---|
| OGPタイトル | <meta property="og:title" content="ページのタイトル"> | Facebook・LINEのタイトル |
| OGP説明 | <meta property="og:description" content="ページの説明"> | SNS投稿時の説明文 |
| OGP画像 | <meta property="og:image" content="https://example.com/image.jpg"> | シェア時の画像 |
| OGP URL | <meta property="og:url" content="https://example.com"> | 正規のURLを指定 |
| OGPタイプ | <meta property="og:type" content="website"> | ページの種類を指定 |
| Twitterカード | <meta name="twitter:card" content="summary_large_image"> | Twitter（X）の表示形式 |
その他の便利なmeta要素
| 項目 | 設定 | 目的 |
|---|---|---|
| リダイレクト | <meta http-equiv="refresh" content="5;url=https://example.com"> | 指定秒数後に別のページへ移動 |
| テーマカラー | <meta name="theme-color" content="#ffffff"> | モバイルブラウザのツールバー色変更 |
SEO対策として最低限設定すべきmeta要素
SEOを意識する場合、以下の meta 要素は 最低限設定 しておきましょう。
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="このページは○○に関する情報を紹介するサイトです。"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com">
descriptionは 120〜160文字以内 で簡潔に記述する。robotsは 通常index, followに設定（特別な理由がない限りnoindexは使わない）。canonicalを適切に設定し、URLの評価を統一 する。
SNSシェアを最適化するための設定
SNSでのシェアを最適化するために、 OGP と Twitter Cards（X） を設定しましょう。
<!-- OGP設定 --> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com"> <meta property="og:type" content="website"> <!-- Twitter Cards設定 --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="ページタイトル"> <meta name="twitter:description" content="ページの説明"> <meta name="twitter:image" content="https://example.com/image.jpg">
og:imageには 1200×630px 以上の画像を推奨（Facebook, LINE向け）。- Twitterは
summary_large_imageを使うと大きな画像が表示される。 og:urlは 正規のURLを指定 する（URLが異なると、SNSでシェアした際に異なるページとして扱われることがある）。
この記事が気に入ったら
フォローしてね！