メタタグとは？SEOに与える影響や確認・設定方法をわかりやすく解説
Webページに設置する「メタタグ」は、検索エンジンやブラウザに向けた情報が書かれたHTMLタグです。
メタタグはユーザーに直接表示されないため、詳しい意味や内容を知らない人もいるのではないでしょうか。
メタタグはSEOに影響を与えることから、サイト運用担当者なら、ぜひとも知っておきたい知識の一つです。
本記事を読めば以下の内容がわかります。
- メタタグとは何か
- メタタグをブラウザで確認する方法
- メタタグがSEOに与える影響
- メタタグの書き方や設定方法
- メタタグの種類
- メタタグの設定ポイントや注意点
基礎知識を理解すれば、メタタグの設定は比較的簡単です。この機会にマスターしておきましょう。
▼目次
1.メタタグとは
2.メタタグを確認する方法・手順
3.メタタグがSEOに与える影響
3-1.Webページの内容を検索エンジンに伝える
3-2.検索結果の画面に表示される
3-3.情報を伝えたいページのみクローラーに伝えられる
4.メタタグの書き方と設定方法
4-1.メタタグの書き方
4-2.メタタグの設定方法
5.SEOで重要なメタタグの種類
5-1.meta description（メタディスクリプション）
5-2.文字エンコーディング（文字コード）
5-3.viewport（ビューポート）タグ
5-4.OGPタグ
5-5.noindexとnofollow
6.メタタグを設定するポイントと注意点
6-1.メタワードは設定しなくても良い
6-2.検索順位を直接上げるメタタグはない
6-3.キーワードを羅列することは避ける
7.メタタグを適切に設定しSEO効果を高めよう
1.メタタグとは
前述のとおり、メタタグとは、検索エンジンやブラウザに向けて情報（メタデータ）を記述するHTMLタグです。
メタデータはデータの付帯情報のことで、HTMLファイルでは文字コードや表示指定などにあたります。なお、メタタグはメタ情報、メタ要素、メタデータなどとも呼ばれます。
メタタグは基本的にWebページに表示されません。ただし、一部のメタタグは検索結果ページやリンク情報などに記載されるため、ユーザーが意識せずに目にすることがあります。
メタタグは間接的にSEOに影響するため、サイト運営において適切な設定が大切です。SEOへの具体的な影響については「3.メタタグがSEOに与える影響」で説明します。
2.メタタグを確認する方法・手順
メタタグの概要だけではイメージがつかめなかった方も多いのではないでしょうか。そこで実際にメタタグを確認してみましょう。
メタタグを確認する手順は次のとおりです。
1.ブラウザでメタタグを見たいページを開く
2.右クリックして「ページのソースを表示」をクリック
3.表示されたHTMLコードのheadタグの中にある<meta 〇〇>を確認する
例えばYahoo! JAPANのトップページを見ると、先頭行に文字コードを指定する<meta charSet=”utf-8″/>があります。
通常、どのページにもメタタグが書かれていますので、いろいろなWebページを確認してみてください。
3.メタタグがSEOに与える影響
メタタグの書き方を最適化すると、結果的にSEO効果を高められます。ここでは、なぜSEO効果が高まるのかを3つに分けて解説します。
なお、説明の中でメタタグの種類が出てきますが、ここでは特定の機能を持ったタグがあると理解しておくだけでかまいません。メタタグの種類の詳細は後ほど解説します。
3-1.Webページの内容を検索エンジンに伝える
Webページの内容を正しく検索エンジンに伝えるのにメタタグは効果的です。例えば、「description（ディスクリプション）」のメタタグを設定すれば、Webページの概要を伝えられます。
また、「keywords（キーワード）」を使えば、どのようなキーワードに関連したWebページなのか伝えられます。
つまり、自己紹介のような役割を果たすのがメタタグです。いくら高品質なコンテンツを制作しても、検索エンジンに内容を理解してもらわなければ狙った検索結果ページにサイトが表示されません。
また、評価を受けるまでの期間が長くなるケースもあります。そこで適切にメタタグを設定して、自社サイトの内容を伝えることが大切です。
3-2.検索結果の画面に表示される
一部のメタタグは検索エンジンの検索結果に表示されます。例えば、「title（タイトル）」は、検索結果に記事のタイトルやWebページの名称として表示されます。
また、「description（ディスクリプション）」も、検索結果に表示されるWebページの概要です。
検索ユーザーの多くは、タイトルとディスクリプションを読んで、どのサイトをクリックするかを決めます。検索ニーズとマッチしたメタタグを設定すれば、クリック率の向上が見込まれるでしょう。
ただし、検索エンジンは検索クエリ（検索語句）に合っていると判断しても、「description」をそのまま表示するとは限りません。
もっと適切な文章がWebページ内にあると判断した場合は、検索結果にマッチした文章を自動生成し検索結果に表示することがあります。
検索クエリについてさらに知りたい方はこちら
>>>検索クエリとは？分析・活用方法やキーワードとの違いをわかりやすく解説！
メタディスクリプションについて詳しく知りたい方はこちら
>>>【例文あり】メタディスプリクションとは？文字数や書き方のコツを紹介
3-3.情報を伝えたいページのみクローラーに伝えられる
meta robotsタグを使えば、クローラー（Webページを巡回して情報を集めるプログラム）に対して、インデックス（検索エンジンのデータベースに登録されること）を指定できます。
例えば、検索エンジンに特定のサイトをインデックスさせたい／させたくない（＝検索結果に表示させたい／させたくない）場合は、「index／noindex」を使います。
メタタグで伝えたい情報を指定する理由は、Webサイトがコンテンツだけで構成されているとは限らないからです。
例えばWordPressの管理画面や昔のWebページなどは検索結果に表示したくありません。そのため「index/noindex」のメタタグを使って取捨選択します。
また、低品質のWebページがSEOに影響して、検索順位が下がる可能性も考えられますが、noindexを指定してもクローラーの動きは止められません。
クローラーを拒否したい場合はnoindexではなくrobots.txtを設定します。robots.txt ファイルとは、どのページにアクセスして良いかクローラーに対して伝えるファイルです。
4.メタタグの書き方と設定方法
メタタグのメリットがわかったところで、具体的な設置方法を解説します。はじめにメタタグを書く場所や記述方法について解説した後、メタタグを設置する2種類の方法を紹介します。
4-1.メタタグの書き方
メタタグは、HTMLファイルのheadタグの中に記述します。記述方法の基本は、<meta 〇〇=”△△” content=”◇◇”>です。
○○と「content」は属性と呼ばれ、△△と◇◇は属性値または値といいます。また、「meta charset=”utf-8”」のように、「content=”◇◇”」の部分がないメタタグもあります。
具体的なHTMLコードを見てみましょう。
—————————
<html>
<head>
<meta name=”title” content=”【○○タイトルを記述】”>
<meta name=”keywords” content=”【○○キーワードを記述】”>
</head>
<body>
</body>
</html>
—————————
上の例では「title」と「keywords」はどちらも「name」属性に含まれるため、○○の部分にnameが入ります。そしてcontent属性に属性値を設定します。
メタタグの種類はたくさんあるため、それぞれの書き方を覚える必要はありません。基本の記述法さえ知っておけば、テンプレートを真似して書けるでしょう。
4-2.メタタグの設定方法
メタタグを設定する方法は、HTMLに直接設置する方法と、WordPressを使って設置する方法があります。
HTMLに直接設置する方法は、先に解説したメタタグの書き方に従って、HTMLコードを直接編集する方法です。
記述を間違えるとWebページ全体が正しく表示できなくなる可能性もあるため、ややハードルが高い方法といえるでしょう。
WordPressを使って設置する方法は、拡張機能を使います。「Yoast SEO」「All in One SEO Pack」「The SEO Framework」などのプラグインをインストールしましょう。画面操作でメタタグを設置できるため初心者でも簡単です。
5.SEOで重要なメタタグの種類
SEOで重要なメタタグは次の5種類です。
- meta description（メタディスクリプション）
- 文字エンコーディング
- viewportタグ
- OGPタグ
- noindexとnofollow
それぞれについて解説します。
5-1.meta description（メタディスクリプション）
meta description（メタディスクリプション）は、検索結果ページに表示された自社サイトのタイトル下に表示するために記述します。
ユーザーはメタディスクリプションを読んでコンテンツを探す傾向があるため、クリック率の向上が見込めます。
メタディスクリプションで表示されるのはスマートフォンが50文字ほど、パソコンが120文字程度です。
メタディスクリプションの記述に文字数制限はありませんが、ターゲットに合わせて簡潔に概要を要約しましょう。
【記述例】
<meta name=”description”content=”ココエの社長・近藤恵子や、メンバーによるブログです。デジタルマーケティングにまつわるお役立ち情報も発信します”>
メタディスクリプションについて詳しく知りたい方はこちら
>>>【例文あり】メタディスプリクションとは？文字数や書き方のコツを紹介
5-2.文字エンコーディング（文字コード）
文字エンコーディング（文字コード）は、HTMLファイルなどのテキストが、どの文字コードで記述されているか示すメタタグです。
文字エンコーディングを設定しておかないと、日本語と英語が混じったときなどに文字化けを起こしてしまいます。
文字化けが起きればユーザーの利便性が下がり、結果的にSEOに悪影響を与えてしまいます。そのため、国内向けのサイトでは文字エンコーディングの設定が必須です。
日本語サイトでは「utf-8」「shift_jis」「euc-jp」が使えますが、世界中の言語に対応できるutf-8を設定するのが一般的です。
【記述例】
<meta charset=”utf-8”>
または
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
5-3.viewport（ビューポート）タグ
viewport（ビューポート）タグは、スマートフォンやタブレットなどのモバイルデバイスにおけるコンテンツの表示領域を設定するメタタグです。
viewportを設定すれば、パソコンでもモバイルデバイスでも自動的にレイアウトが最適化される「レスポンシブデザイン」を実現できます。
viewportによるレスポンシブデザインは、SEOにも良い影響を与えます。モバイルユーザーが増えている現在、ユーザーの利便性を向上できるためです。
Googleもレスポンシブデザインによるサイト構築を推奨しています。以下の記述例はGoogleが推奨している設定です（2023年3月時点）。特別な理由がない場合は、そのまま使うと良いでしょう。
【記述例】
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
※width=device-width：デバイスの幅に自動的に合わせる
※initial-scale=1.0：初期のズーム倍率。開いたときに拡大・縮小されないため違和感がない
レスポンシブデザインについて詳しく知りたい方はこちらをご参照ください。
>>>【初心者向け】レスポンシブデザインとは｜サイトの作り方と基礎知識をわかりやすく解説
5-4.OGPタグ
OGPタグとはTwitterやFacebookなどのSNSでWebサイトのリンクをシェアした際に、詳細情報を正しく伝えるためのメタタグです。
OGPタグを設定すると共有されたユーザーへのアピール力が高まり、結果として自社サイトへの流入数増加が見込めます。
OGPタグには複数の種類があります。それぞれの記述例は以下のとおりです。なお、設定を省略すると、SNSが勝手に情報を選んで表示するか、表示されません。
ユーザーに内容が伝わらない可能性があるため、なるべく設定しましょう。
【ページURLの記述例】
<meta property=”og:url” content=”【ページURLを記述】”/>
【ページタイプ（トップページか投稿記事か）の記述例】
<meta property=”og:type” content=”website”/>
または
<meta property=”og:type” content=”article”/>
※ページタイプはトップページならwebsite、それ以外の記事・コンテンツならarticleと記載します。
【ページタイトルの記述例】
<meta property=”og:title” content=”【ページタイトルを記述】”/>
【サイトディスクリプションの記述例】
<meta property=”og:description” content=”【サイトディスクリプションを記述】”/>
【サイトタイトルの記述例】
<meta property=”og:site_name” content=”【サイトタイトルを記述】”/>
【画像URL（（サムネイルとして表示される画像））の記述例】
<meta property=”og:image” content=”【画像URLを記述】”/>
5-5.noindexとnofollow
noindexはWebページを検索結果にインデックス（表示）させないためのメタタグです。例えば、低品質でユーザーに読んでほしくない投稿記事ページにnoindexを付けます。
先にも解説しましたが、noindexはクローラーの巡回を止めるわけではありません。巡回を止めたい場合はrobots.txtを使用しましょう。
nofollowはクローラーにページ内のリンクを辿らせたくないときに設定するメタタグです。
例えば、自社サイトと無関係のアフィリエイト（他社の広告リンク）があるページに、nofollowを設定します。これによって余計な要素がSEOに影響しないようにできます。
【記述例】
<meta name=”robots” content=”noindex”>
<meta name=”robots” content=”nofollow”>
noindexとnofollowについて詳しく知りたい方はこちら
>>>【マーケ必須知識】noindexとnofollowの目的やSEO効果、書き方を解説
6.メタタグを設定するポイントと注意点
「メタタグを設定すれば検索順位が上がる」と考えている人は少なくありません。ここでは、メタタグとSEOを短絡的に結び付けてしまう人が陥りやすい注意点を3つ解説します。
6-1.メタワードは設定しなくても良い
meta keywords（メタキーワード）とは、ページ内容を表すキーワードを記載するタグのことです。
メタキーワードは「Google がサポートしている meta タグと属性」に含まれていないため、とくに設定する必要はありません。なぜなら、インデックス登録や検索順位に影響しないからです。
参考：Google がサポートしている meta タグと属性｜Google
メタキーワードがサポートから外れている理由の一つは、メタキーワードにSEO対策キーワードを羅列して意図的に検索順位を上げようとするユーザーが増えたからです。
また、クローラーが進化して、ページ内の重要キーワードを抽出できるようになったことも関係しています。
【記述例】
<meta name=”keywords” content=”【キーワード1】,【キーワード2】,【キーワード3】”>
6-2.検索順位を直接上げるメタタグはない
どの種類のメタタグも直接的なSEO効果はありません。しかし、メタタグによって検索ユーザーの利便性が向上して、間接的にSEOに好ましい効果がもたらされます。
Googleはユーザーの利便性を柱にしてインデックス登録やランキングを判定している点を忘れないようにしましょう。
例えば、メタディスクリプションがあれば、検索ユーザーはWebサイトにアクセスしなくてもページ概要がわかります。
また、ビューポートタグがあればスマートフォンに最適なレイアウトで閲覧可能です。ユーザー視点でメタタグを設定していけば、総合的に良質なサイトとなるため、SEOにも良い影響が出るでしょう。
6-3.キーワードを羅列することは避ける
titleタグやメタディスクリプションでは、SEO対策キーワードを適切に入れるのがセオリーです。
しかし、積み込み過ぎてしまうと読みにくくなってユーザーの利便性が下がり、SEOにも悪い影響を与えます。
また、クローラーをだます悪質行為とみなされてGoogleからペナルティを受け、検索順位が下がってしまう可能性もあるでしょう。
目安としては、メタタグごとにSEO対策キーワードは1個、多くても2個に抑えたほうが良いとされています。「メタタグ」をSEO対策キーワードにした場合の例を紹介します。
【悪い例】
<meta name=”title” content=”メタタグとは？SEOに与えるメタタグの影響やメタタグの確認方法・メタタグの書き方・メタタグの設定方法をわかりやすく解説”>
【良い例】
<meta name=”title” content=”メタタグとは？SEOに与える影響や確認方法・書き方と設定方法をわかりやすく解説”>
7.メタタグを適切に設定しSEO効果を高めよう
メタタグを適切に活用すると、クローラーにWebサイトを正しく認識してもらえるようになります。
また、検索結果に概要を表示させたり、Webページの表示領域を最適化したりしてユーザーの利便性を高められるでしょう。
結果としてメタタグの適切な設定はSEOに良い影響が出ることから、運営担当者としてはぜひとも知っておきたい知識のひとつです。
現場で使える実践的な知識を身に付けたい場合は、ココエのDX人材育成プログラムをご活用ください。
「座学＋実践」の実戦型プログラムで、IT・デジタル部門以外の方でもスキルとノウハウが身に付きます。
>>>DXリテラシー基礎講座について詳しくはこちら。
>>>株式会社ココエについて1分でわかる資料請求はこちら。
