Webサイトを作ったあと、「どうすれば検索結果に自分のページがうまく表示されるのか？」と悩んだことはありませんか？そんなときに関わってくるのが「メタタグ」という小さなタグです。
メタタグはページの情報を検索エンジンに伝えるための大事な仕組みで、内容によっては検索順位やクリック率にも関係してきます。
とはいえ、聞きなれない言葉が多くてむずかしそうに感じる方もいらっしゃると思います。
この記事では、Web初心者の方でも安心して読めるように、専門用語をかみくだいてやさしく解説しています。
「メタタグってなに？」「どう設定するの？」という疑問を一つずつ解消しながら、SEO対策につながるポイントをわかりやすくご紹介します。
メタタグとは？SEOとの関係をわかりやすく解説
メタタグってなに？初心者にもやさしく解説
メタタグとは、Webページの見えない部分に書かれている情報のことで、検索エンジンやブラウザにそのページの内容を伝えるための役割を持っています。
たとえば、ページの説明文や使用している文字コード、検索エンジンに表示するかどうかなどを伝えるのがメタタグです。
見た目には表示されませんが、ページの裏側で働いていて、htmlファイルの<head>という部分に設置されるのが一般的です。
以下は基本的なメタタグの例です。
<meta name="description" content="Webマーケティングの基本を初心者にもわかりやすく紹介します。">
このように、ページの説明を「description」というタグで記述することで、検索エンジンにどんなページかを伝えることができます。
SEO対策とのつながりとは？
SEOとは「検索エンジン最適化」のことで、Webページを検索結果で上のほうに表示させるための工夫のことを指します。
メタタグはこのSEOにおいて、ページの内容を正しく、かつわかりやすく伝えるための土台となります。
検索エンジンは、ページのコンテンツだけでなく、メタタグの情報も見て評価を行います。
特に以下のような部分が評価に影響する可能性があります。
- ページの説明がユーザーの検索意図と合っているか
- 不要なページを検索結果に表示しないようになっているか
- 正しい文字コードが使われていて、情報が正しく読み取れるか
つまり、メタタグは検索エンジンにとっての案内板のようなもので、その内容によってページの印象が大きく変わることもあります。
「検索結果に表示される情報」の仕組み
検索結果に出てくる「タイトル」や「説明文」は、多くの場合、メタタグで指定された内容をもとに作られます。
特に以下の2つがよく使われます。
- titleタグ：ページタイトルを表示
- descriptionタグ：ページの説明文を表示
ただし、検索エンジンがページの内容や検索キーワードとの関係を見て、自動的に別の文章を抜き出すこともあります。
そのため、descriptionに書かれた内容が必ず表示されるわけではありません。
それでも、メタタグにしっかりと説明を書いておくことで、検索エンジンやユーザーにページの内容を正確に伝えるチャンスが増えます。
また、説明文が魅力的であれば、ユーザーがそのページをクリックしてくれる可能性も高まります。
メタタグはなぜWebサイトに必要なの？
メタタグはページの裏方の存在ですが、見た目以上に重要な役割を担っています。
メタタグがない、もしくは不適切な内容が書かれていると、以下のような問題が起きることがあります。
- ページの内容が正しく検索エンジンに伝わらない
- 誤った説明が検索結果に表示されてしまう
- 間違った言語や文字コードで読み取られ、文字化けする
- クロール（検索エンジンの巡回）がうまく行われず、検索に表示されない
以下のような場面では、メタタグが特に必要とされます。
- Webサイトを新しく公開したとき
- ページ数が多く、インデックスする・しないの判断が必要なとき
- 他社と差別化した魅力的な説明文を設定したいとき
また、SNSでシェアされた際の見え方にも関係してくるため、SEOだけでなく、ユーザーエクスペリエンスにもつながる要素です。
メタタグは、一度設定して終わりではなく、ページの内容に応じて見直したり、改善したりすることで、より効果的に活用できます。
Webページを運営するうえで欠かせない基本要素のひとつとして、ぜひ意識して使っていくことが大切です。
メタタグの代表的な種類と役割を知ろう
meta name=”description”ってどんなタグ？
descriptionタグは、ページの内容を短い文章で説明するためのタグです。
検索結果に表示される説明文として使われることが多く、ユーザーにページの内容を伝える大切な役割を持っています。
このタグに設定した文章は、検索キーワードと一致する部分が太字になることもあり、クリック率に影響します。
ページの魅力や内容をしっかり伝えることで、訪問してもらえる可能性が高くなります。
書き方の基本は以下のような形式です。
<meta name="description" content="このページではメタタグの基本と使い方を初心者向けに解説しています。">
descriptionに書く内容はページごとに異なるため、すべてのページで個別に考えて作るのが効果的です。
文字数はおよそ80〜120文字程度が目安ですが、検索結果の仕様により変動することがあるため、内容の要点をわかりやすく伝えることが大切です。
titleタグとの違いとは？
titleタグはページのタイトルを指定するタグで、ブラウザのタブや検索結果の見出しに表示されます。
ページの名前のようなもので、訪問者がどんな情報があるのかをひと目で判断できるようにします。
検索結果では、titleとdescriptionがセットで表示されることが多く、titleは検索エンジンの評価にも大きく影響します。
meta descriptionとの主な違いは以下の通りです。
- 表示場所：titleは見出し、descriptionは説明文
- 役割：titleは検索エンジンへの強いアピール要素、descriptionはユーザーへの説明
- 書き方：titleはシンプルに、descriptionは補足的に
どちらもページの内容に沿って書くことが大切で、無関係な言葉を入れすぎると、逆に検索エンジンに評価されにくくなります。
keywordsタグの今の役割
以前はSEO対策として広く使われていたkeywordsタグですが、現在は主要な検索エンジン（Googleなど）では評価の対象になっていません。
そのため、無理に設定する必要はありません。
ただし、企業内のサイト検索や独自エンジンを使っている場合などには、参考情報として役立つケースがあります。
また、CMSのプラグインや一部のテンプレートでは入力欄が残っていることもありますが、空欄にしても問題ありません。
検索順位に影響がないとはいえ、ページの内容を整理する目的で使うなら、次のような書き方になります。
<meta name="keywords" content="メタタグ, SEO, 記述, タグ, 初心者向け">
現在はdescriptionやtitleの内容のほうが重要なので、そちらに注力することをおすすめします。
robotsタグでやること・やらないことを決める
robotsタグは、検索エンジンに対してそのページをどう扱うかを伝えるためのタグです。
たとえば「このページは検索結果に表示してもいいですよ」あるいは「リンクはたどらないでください」など、細かい指示ができます。
よく使われる指示には次のようなものがあります。
- index：検索結果に掲載してOK
- noindex：検索結果に載せない
- follow：ページ内のリンクをたどってもOK
- nofollow：リンクをたどらないように指示
これらは組み合わせて使うことができます。
<meta name="robots" content="noindex, nofollow">
特に、会員専用ページや下書き状態のページなど、検索に出したくないページがある場合は、noindexを使って制御します。
robots.txtという別の方法もありますが、metaタグで設定する方がページ単位で細かく制御しやすいです。
各タグが果たす役割をわかりやすく整理
メタタグは、それぞれに特定の目的があります。どのタグがどのような影響を持つかを理解すると、SEO対策やユーザーエクスペリエンスの向上に役立ちます。
以下のような点を意識することで、よりよい設定ができます。
- 説明文であるdescriptionタグ：ページの魅力を簡潔に伝える
- タイトルを決めるtitleタグ：ページの第一印象を作る
- 検索結果への掲載をコントロールするrobotsタグ：不要なページの非表示が可能
- ほとんど使われないkeywordsタグ：現在はSEOに影響しない
検索エンジンは、ページの内容や構造だけでなく、これらのタグの使い方を総合的に見て評価します。
メタタグを正しく使うことで、より多くのユーザーにページを見つけてもらえる可能性が高まります。
検索エンジンに伝えるためのmetaタグ設定方法
どこに書く？metaタグの設置場所（head内）
metaタグは、WebページのHTML内にある<head>という部分に書きます。
このhead内には、ページのタイトルやスタイル情報、JavaScriptの読み込み、文字コードの指定など、ページそのものを説明する情報がまとまっています。
metaタグがheadの中にある理由は、ページが表示される前に検索エンジンやブラウザが必要な情報を取得するためです。
以下はmetaタグの記述例を含むhead部分です。
<head>
<meta charset="UTF-8">
<meta name="description" content="SEO対策に必要なメタタグの使い方を解説します。">
<title>メタタグの基本と設定方法</title>
</head>
metaタグをbodyの中に書いてしまうと、検索エンジンは読み取らず、効果がありません。
必ずhead内に記述しましょう。
HTMLでの書き方の基本ルール
metaタグはHTMLのタグのひとつで、自己完結型のタグです。
つまり、開始タグと終了タグを分けずに、1行で完結させて書きます。
基本的な構造は以下のようになります。
<meta name="〇〇" content="△△">
それぞれの意味は次の通りです。
- name：メタ情報の種類（descriptionやkeywordsなど）
- content：実際に伝えたい情報
HTML5では、文字コードの指定は次のように書きます。
<meta charset="UTF-8">
metaタグの記述ミスがあると、文字化けが起きたり、検索エンジンに内容が正しく伝わらなかったりするので、スペルや記号にも注意が必要です。
サイト全体とページごとの使い分け
metaタグはページ単位で設置するのが基本です。
そのため、すべてのページで同じmeta descriptionやtitleを使い回すと、SEOの観点では逆効果になる場合があります。
たとえば、同じ説明文が複数のページにあると、検索エンジンから「似たような内容ばかりのサイト」と判断されることがあります。
ページごとにmetaタグを変えるメリットには次のようなものがあります。
- 検索結果での説明文が各ページに合ったものになる
- ユーザーのクリック率が上がる可能性がある
- ロングテールキーワードに対応できる
metaタグを適切に使い分けることは、ユーザーエクスペリエンスの向上とSEO対策の両方に役立ちます。
WordPressでの設定方法
WordPressを使っている場合、HTMLを直接書くのではなく、プラグインを使ってmetaタグを簡単に設定する方法があります。
代表的なプラグインとしては「All in One SEO Pack」や「Yoast SEO」などがあります。
たとえば、Yoast SEOの場合は、記事投稿画面の下部にmeta descriptionの入力欄が表示され、そこに説明文を記入するだけでmetaタグが自動的に追加されます。
WordPressテーマによっては、管理画面からdescriptionやkeywordsを設定できる機能があるものもあるため、テーマのマニュアルやヘルプもあわせて確認することをおすすめします。
設定が正しく反映されているか確認するには、ブラウザで該当ページを開いて右クリック→「ページのソースを表示」を選ぶと、head内にmetaタグがあるかどうかをチェックできます。
metaタグを設定するときのチェックポイント
metaタグを設定する際は、次のポイントを意識することで、より効果的に活用できます。
- ページ内容とmeta descriptionの内容が一致しているか
- 文字数が長すぎたり短すぎたりしていないか（80〜120文字程度が目安）
- 不自然なキーワードの詰め込みになっていないか
- 検索キーワードを自然に含めているか
- ページごとに個別のタグが設定されているか
正しい場所に、正しい形式で、ページに合った情報を記述することが、metaタグの基本となります。
SEO対策として有効なメタタグの書き方とポイント
ユーザーが読みたくなる説明文の作り方
meta descriptionは、検索結果でタイトルの下に表示される短い文章です。
ここに何を書くかで、ユーザーがクリックするかどうかが変わってきます。
検索結果を見ている人が思わずページを開きたくなるような説明文を作るためには、「このページには自分の知りたい情報がある」と思ってもらうことが大切です。
効果的な説明文の特徴は次の通りです。
- ページの内容を簡潔に要約している
- 読み手の興味を引く言葉や表現を使っている
- 検索キーワードが自然に含まれている
- 最後まで読むと次の行動につながるようになっている
たとえば、初心者向けのSEO記事であれば「SEOの基本をわかりやすく解説。初めての方でもすぐに始められる方法を紹介」といった文が好まれます。
こうした説明文は、クリックされるかどうかに直結するため、内容がページと一致していること、そして魅力的であることが重要です。
ページ内容に合ったメタタグを書くコツ
メタタグは単なる文章ではなく、そのページだけの情報を表現するタグです。
どんなに魅力的な説明文を書いても、実際のページ内容と違っていれば、すぐに離脱されてしまう可能性があります。
以下のポイントに気をつけて書くと、検索エンジンにもユーザーにも伝わりやすくなります。
- ページに書かれている内容と一貫性を持たせる
- 実際に使われているキーワードを自然に含める
- 同じサイト内で他のページと似たような文にならないようにする
検索エンジンはページの文章とmetaタグの内容が一致しているかを見ています。
意図しないキーワードを入れすぎると評価が下がることもあるため、自然な流れで伝えたい情報を含めるようにしましょう。
文字数の目安と改行に注意
meta descriptionには文字数の制限があります。
一般的には全角でおよそ80文字から120文字前後に収めるのが目安です。
あまり長すぎると、検索結果に途中までしか表示されず、内容が途切れてしまいます。
また、HTML上では改行できたとしても、検索結果に表示されるときにはすべてが1行でつながってしまうため、読みやすい構成と語順がとても大切です。
読みやすくするために意識すべき点は以下の通りです。
- ひとつの文で完結させるようにする
- 「、」や「。」などで区切りを入れて読みやすくする
- 無理に情報を詰め込みすぎない
見た目では整っていても、実際の検索画面では文の途中で切れてしまい印象が悪くなることがあるため、最後まで読まれる前提で自然にまとめることが効果的です。
よくあるNG例とその対処法
metaタグを書くときによくある失敗には、検索エンジンからの評価を下げたり、ユーザーのクリックを妨げたりする原因が含まれています。
次のようなケースは避けるようにしましょう。
- 関係のないキーワードを無理に並べて詰め込む
キーワードの乱用はスパムと見なされる可能性があります - 全ページに同じmeta descriptionを使い回す
検索エンジンが重複コンテンツと判断することがあります - 内容が曖昧で何を伝えたいのかわからない
ユーザーがページを開かない可能性が高くなります
これらを防ぐためには、それぞれのページで、ページの内容に合わせた固有の説明文を用意することが基本です。
また、チェックする際はブラウザの「ページのソースを表示」でmetaタグを確認したり、Googleがどのように表示しているかをSearch Consoleでチェックするのも効果的です。
サイト全体のメタタグを一貫させるメリット
Webサイト全体でmetaタグの書き方にルールを決めておくと、統一感のある情報発信ができ、ユーザーエクスペリエンスが高まるというメリットがあります。
たとえば、次のような点をそろえておくと、効果的に整えることができます。
- タイトルや説明文の構成テンプレート（〇〇｜サービス名 など）
- 文体やトーン（敬語・ですます調など）
- キーワードの優先順位（ビッグキーワードやロングテールキーワードをどこに使うか）
このように共通ルールを決めておくことで、後からmetaタグの見直しや改善をする際にも迷わずに進められます。
サイトの目的や対象ユーザーに合わせて、定期的にルールを見直すことも大切です。
メタタグはただの「設定」ではなく、検索エンジンとユーザーの両方に向けたコミュニケーションの第一歩といえる存在です。
地味な部分ですが、手を抜かずに整えることで、サイト全体の印象をしっかり伝えることができます。
見落としがちなタグの効果も知っておこう
metaタグにはよく知られているdescriptionやrobotsのほかにも、あまり注目されていないけれど、便利なタグがあります。
- charsetタグ：文字コードの指定をすることで、文字化けを防げます
- viewportタグ：スマホ表示の幅やスケールを調整し、モバイル端末での見やすさを高めます
- refreshタグ：一定時間後に自動的にページを更新・移動させたいときに使われます
これらは直接SEO評価に影響しないものもありますが、サイトの快適さや見やすさを整えることで、結果的にユーザーエクスペリエンスが良くなります。
特にモバイルユーザーが多い現代では、viewportタグが設定されていないとページが縮小表示されてしまい、使いにくさにつながります。
Googleに適切に伝えるための設置時の注意点
Googleが読み取るmeta情報の優先順位
GoogleはWebページの内容を理解する際、metaタグもあわせてチェックします。
ただし、すべてのmeta情報を同じように重視しているわけではありません。
どの情報を優先して読み取るかには一定のルールがあります。
Googleが重視するmeta情報の順番は概ね次のとおりです。
- titleタグ：検索結果の見出しに表示されるため、最も重要
- meta description：検索結果の説明文として使用されるが、内容が不適切だと自動生成される場合もある
- robotsタグ：検索エンジンの巡回やインデックスの制御に直接関わる
- charsetタグ：文字コードを読み取ることで、ページの文字化けを防止
- viewportタグ：スマホ表示での見やすさを決める
中でもtitleとdescriptionは、ユーザーが検索結果を見てクリックするかどうかを決める判断材料になるため、きちんと設定しておくことが求められます。
noindexやnofollowの正しい使い方
robotsタグに設定するnoindexやnofollowは、検索エンジンに対してページの取り扱いを指示するためのキーワードです。
設定の仕方を間違えると、Googleにページをインデックスさせたくても、非表示にされてしまうことがあります。
以下のような場面では、これらのタグの使い方に注意が必要です。
- noindex：検索結果に掲載させたくないページに使用します。会員限定ページや仮ページ、テストページなどが該当します
- nofollow：そのページ内のリンクをGoogleにたどらせたくないときに使用します。広告リンクや信頼できない外部リンクなどが対象になることがあります
<meta name="robots" content="noindex, nofollow">
このように両方を同時に指定することも可能ですが、むやみに使うと、重要なページまで検索結果から除外されてしまうことがあるため、使用の判断は慎重に行ってください。
タグの書き間違いが招くトラブル
metaタグはHTMLに直接書き込むため、小さなミスでも正しく認識されない可能性があります。
特に次のような書き間違いには注意が必要です。
- スペルミス：descriptionをdescriptonと書いてしまう
- 属性の指定ミス：nameではなくcontentを2回書いてしまう
- ダブルクオーテーションの閉じ忘れ：content=”説明文が途中で終わる
- robotsタグの値に不要なスペースが入ってしまう
タグは正しく書かれていなければ、Googleが読み取れず、せっかくの情報が評価に反映されない可能性もあります。
エラーに気づきにくい部分なので、記述後にはチェックツールを使って確認するのが効果的です。
以下のようなツールを活用すると便利です。
- Google Search Console：ページのインデックス状況やエラーを確認できる
- W3C Markup Validation Service：HTMLの構文エラーをチェックできる
すでにあるメタタグの確認方法
metaタグが正しく書かれているかを確認する方法はいくつかあります。
特にCMS（WordPressなど）を使っている場合、自動生成されていることもあるため、意図した内容が出力されているかを確認することが大切です。
確認するには、以下の方法があります。
- ブラウザの右クリックメニューから「ページのソースを表示」を選び、head内を確認する
- Google Chromeの開発者ツール（右クリック→「検証」→「Elements」タブ）を使って、metaタグの内容を見る
- Chrome拡張機能「META SEO inspector」などを利用して、meta情報を一覧表示で確認する
特にdescriptionやOGPタグは、実際にどんな文が設定されているかを目視で確認することが重要です。
検索結果に反映されるまでの時間感覚
metaタグを修正したからといって、すぐに検索結果に反映されるわけではありません。
Googleのクロールとインデックス作業が行われて初めて変更内容が認識されます。
通常、反映までの目安は次のようになります。
- 数時間〜数日：更新頻度の高いサイトやトップページ
- 1週間〜2週間程度：一般的な更新頻度のページ
- それ以上かかる：新しく公開されたページ、低頻度のページ
反映のタイミングは状況やGoogleの巡回スケジュールにより変動するため、確実な日数は断言できません。
反映を早めたいときは、Google Search Consoleの「URL検査」機能から「インデックス登録をリクエスト」することで、巡回を促すことができます。
また、古いmeta情報が表示されたままのケースでは、ブラウザのキャッシュやGoogleのキャッシュが影響している可能性もあるため、確認はシークレットモードや他の端末でも行うと正確です。
metaタグの反映は目に見えないからこそ、地道に正確な設定とチェックを重ねることが大切です。
まとめ
メタタグは、Webページの裏側にあるけれど、とても大切な情報です。
検索エンジンに向けてページの内容を伝えたり、検索結果にどんな説明文を表示させるかを決めたりする働きをしています。
正しく書かれたメタタグは、クリックされやすくなったり、ユーザーが安心してページを開いたりするきっかけになります。
特に、descriptionタグやtitleタグは検索結果に直接表示されるため、そのページの印象を大きく左右します。
また、OGPタグを使えば、SNSでシェアされたときの見た目も整えることができます。
metaタグを設定するときは、ページの内容と合っているか、文字数が適切か、タグの書き方に間違いがないかをしっかり確認することが大切です。
WordPressなどを使っている方は、プラグインで簡単に設定できる場合もあります。
少しむずかしく感じるかもしれませんが、基本を押さえておけば、Webサイトをよりわかりやすく、伝わりやすく整えることができます。
検索エンジンにも人にもやさしいサイトを作る第一歩として、ぜひメタタグを活用してみてください。
