- 「HP制作やオウンドメディアを制作する際に、どんなmetaタグを設定したらいいのかがわからない」
- 「自社のmetaタグが適切に設定されているのかがわからない」
など、SEO対策の経験が浅い方はこのような悩みに直面することが多いのではないでしょうか。metaタグは間接的にSEOにも影響するため、適切な設定が大切です。
そこで本記事では、メタタグの内容から、効果、設定方法や確認方法について解説していきます。ぜひ最後まで読んで、metaタグへの理解を深めてくださいね。
metaタグとは？
metaタグとは、ページのタイトルや説明文、コンテンツの作成者など、ページの各種情報を埋め込むことができるタグのことです。簡単にいうと、検索エンジンにページの情報を”わかりやすく”伝えるための一つの要素です。さまざまな種類があり、それらを用途によって、使い分けることで検索エンジンに対して適切な情報を伝えることができます。
具体的には、検索結果上で表示されるタイトルや、その下に表示される説明文などをmetaタグによって指定することで、検索エンジンやユーザーに対してコンテンツ内容を伝達する役目を持っています。
metaタグは、HTMLに記述されるため、Webページ上で表示されることはありません。しかしGoogleなどの検索エンジンは、Webページの内容を理解、評価する際に、metaタグの情報も参照します。
上記から、metaタグが間違っていると検索エンジンに誤った情報が伝わってしまいSEO評価を下げることにもなりかねません。そのため、metaタグについての理解と設定はWebに関わる仕事をしている方には必須の知識となってきています。
metaタグの確認方法
では、実際に自社のサイトなどで、metaタグがどう設定されているのかを確認する2つの方法を紹介します。
- HTMLソースから直接確認
- Chrome拡張機能「META SEO Inspector」で確認
HTMLソースで確認
metaタグを確認するには、確認したいページを開き、「右クリック」します。 今回は例として、「Wikipedia」で試してみます。
「右クリック」すると、いくつかのメニューが表示されます。 その中から、「ページのソース表示」をクリックしましょう。
すると、上記のようにソースコードが表示されます。 ここで、metaタグの設定状況を確認できます。
Chrome拡張機能「META SEO Inspector」で確認
META SEO Inspectorとは、閲覧しているWebページのメタデータを確認できるChrome拡張機能です。
META SEO Inspectorのインストール後は、ブラウザの右上に表示されるアイコンをクリックするだけで、自社サイトのmeta情報などを確認できます。（他には、hタグや構造化データなどを確認することもできます）
導入方法は、まず、Chrome ウェブストアからMETA SEO inspectorを追加します。登録等は必要ありません。
追加後は、特定のWebページ上で、アドレスバーの横にあるMETA SEO inspectorのアイコンをクリックすることで各情報が確認できます。
metaタグがSEO対策で重要な理由
ここでは、metaタグがSEO対策で重要な理由について以下の2点を解説します。
- 検索エンジンの理解を助ける
- 検索結果画面上でユーザーにサイト内容をわかりやすく伝える
検索エンジンの理解を助ける
Googleをはじめとする検索エンジンは実際のWebページではなく、HTMLからページ内容を理解します。
逆に言えば、metaタグを不適切に設定してしまうとそのWebページの情報を検索エンジンが理解できません。そうなると、検索エンジンに評価されづらくなったり、検索結果上で順位が上がらなかったりなどの影響があります。
ユーザーにサイト内容を分かりやすく伝える
metaタグには、記事のタイトルを指定できるタグ（タイトルタグ）や記事の要約を指定できるタグ（メタディスクリプション）などがあります。
指定した内容は、検索結果画面に表示されます。
つまり、metaタグはWebサイトやページを訪問する前のユーザーに、コンテンツ内容を大まかに伝達できるため、ユーザーにサイトの内容を検索結果上で伝えることができます。
必ず設定しておきたいmetaタグ6つ
ここでは、SEO対策に重要なmetaタグを6つ解説します。
- タイトル（title）
- メタディスクリプション（meta description）
- 文字コード
- OGPタグ
- ビューポートタグ
- noindex/nofollow
タイトル（title）
タイトルは、HTMLのタイトル（document title）を指定する要素で、開始タグ<title>と終了タグ</title>の間にページタイトルを記述します。実際に検索結果上で見るタイトルはこのタイトルタグの記述によるものです。
タイトルタグには、そのページで対策を行いたいキーワードを追加します。よくタイトルタグは全てのページで共通しているサイトなどがありますが、SEO的に見ると効果的ではないため、各ページに固有のタイトルをつけるのがいいでしょう。
タイトルによって検索結果上でのクリック率（CTR）が変わるため、ユーザーの検索意図に沿ったタイトルを設定しましょう。
タイトルタグの記述方法は以下の通りです。
<title>タイトル名</title>メタディスクリプション（meta description）
メタディスクリプションとは、Webサイトやページの内容を100文字前後で説明する要素です。
検索順位の決定に直接影響する要素ではありませんが、わかりやすいメタディスクリプションの設定を行うことで、検索結果上でユーザーに対して「自分の悩みや気になっていることがこの記事内にある」と思ってもらうことができ、ひいてはクリック率の改善から流入数の増加などに繋がります。
メタディスクリプションタグの記述方法は以下の通りです。
<meta name="description"content="メタディスクリプション> 文字コード
文字コードは、Webサイトやページの文字化けを防ぐ要素です。多くの場合、Webサイトやページは日本語＋英語など他の言語が混ざっていると文字化けします。文字化けすると、クローラが適切に情報を読み取れず、ページの正しい評価がされません。
上記を避けるため、Webサイトやページを制作する際は、必ず文字コードタグを設定するようにしましょう。
文字コードタグの記述方法は以下の通りです。
<meta charset=”utf-8”> OGPタグ
OGPタグとは、TwitterやInstagramなどのSNSにて、Webサイトやページがシェアされた際、コンテンツのレイアウトを調整する要素です。
OGPタグでページのURLや画像のURLなどを指定することで、WEB上でURLやアイキャッチ画像、タイトルなどを綺麗に調整します。普段からTwitterなどで見ているシェアされた記事のサムネイル画像が見られるのはこのOGPタグの設定によるものです。
以下にOGPタグそれぞれの記述方法をまとめました。
<meta property=”og:url” content=”ページURL”/>
<meta property=”og:site_name” content=”サイト名”/>
<meta property=”og:type” content=”ページタイプ”/>
<meta property=”og:title” content=”ページタイトル”/>
<meta property=”og:description” content=”サイトディスクリプション”/>
<meta property=”og:image” content=”画像URL”/>ビューポートタグ
ビューポートタグは、モバイル端末（スマートフォンやタブレット）で表示されるテキストや画像サイズを最適化する要素です。
近年、検索順位を決定する重要指標として、モバイルファーストインデックス（MFI）があります。
モバイルファーストインデックス（MFI）とは、これまで検索エンジンがPCサイトの内容をもとにインデックスやコンテンツの質を評価していたことを一変させ、スマートフォンサイトを評価の主軸としてインデックスするという方針です。
検索順位を決定する重要指標のため、必ず設定するようにしましょう。
ビューポートタグの記述方法は以下の通りです。
<meta name=”viewport” content=”width=device-width,initial-scale=1”>noindex/nofollow
noindexは、対象ページがインデックスされることを防ぐ要素です。
インデックスとは、検索エンジンのデータベースに対して登録されることです。登録されることで、ユーザーが特定のキーワードで検索した際の検索結果上にサイトやブログ記事などが表示されるようになります。
また、nofollowは、検索エンジンのクローラーに対し、リンク先へSEO評価を引き渡さないようにできる要素です。
インデックスやクロールが不要なページ（主に質の悪いページ）を検索結果から除外することで、SEO評価が下がることを防止することも可能です。
noindex/nofollowの記述方法は以下の通りです。
<meta name=”robots” content=”noindex,nofollow”>metaタグの正しい設定方法
ここでは、metaタグの正しい作成方法について以下の3点を解説していきます。
- HTMLソースに直接書き込む
- WordPressを活用する
- metaタグ生成ツールを活用する
HTMLソースに直接書き込む
自社のWebサイトやページをエディタを用いて作成している場合は、HTMLソースの<head>要素内に必要なmetaタグを記述しましょう。
各metaタグの記述方法は、本記事の「SEO対策で必要なメタタグ設定6選」をご参考ください。
WordPressのプラグインを活用する
WordPressを活用している場合は、プラグインでmetaタグを記述することができます。
プラグイン導入によるメリットとしては、必要な機能が簡単に導入できるため、プログラミングの知識が不要という点です。
よく使用されるプラグインは以下の3種類です。自社で使用しているテーマなどによっても互換性が変わるため一度プラグインを実装し、自社のサイトに最適なものを見つけましょう。
プラグインを活用すれば、metaタグの設定以外にも、SEO効果を高めるための施策が簡単に実装できます。ぜひ導入して、使用感をたしかめてみてください。
metaタグ生成ツールを活用する
metaタグは、自分で作成する以外に、ツールで自動生成することもできます。HTMLなどに理解のない方でmetaタグを記述しなくてはいけない時に便利です。
以下におすすめの生成ツールを紹介するので、ぜひ活用してみてください。（HP内の情報から自動的にメタディスクリプションなどを生成するものではありません）
【おすすめのmetaタグ生成ツール】
metaタグ作成時に注意したい2つのポイント
ここでは、metaタグ作成時に注意したい2つのポイントについて解説します
メタキーワードは、検索順位の評価に直接関係ない
かつて、メタキーワードを設定することは、SEOに効果的だと言われていましが、2022年4月現在、メタキーワードの設定はSEO的に効果がないため不要です。
メタキーワードとは、以下の記述方式で記述し、どんなキーワードと関連したページなのかを指定できる要素です。キーワードが複数ある場合は、コンマ区切りで指定を行います。
<meta name=”keyword” content=”キーワード”>理由は先ほども申し上げたように、Googleがサポートしているmetaタグにメタキーワードに関する詳細がなく、Googleがコンテンツの質をメタ要素で判断しなくなったためです。
なおメタキーワードを過剰に使用すると、スパム扱いされ、ペナルティの対象になる場合があるため、注意が必要です。
metaタグは<head></head>に囲まれた中に記述する
metaタグを記述する際は、必ず<head></head>に囲まれた中に記述しましょう。
記述場所を間違えると検索エンジンに正しくテキストを伝達できません。
まとめ
このページでは、「metaタグ」に焦点を当て、その概要や確認方法、設定方法、種類、重要性、設置の際の注意点などについて解説しました。
metaタグは、検索エンジンやユーザーにコンテンツ内容を伝達する重要な役割を果たします。
設定をすれば、SEO効果が上がるということはありませんが、設定することで、検索エンジンにコンテンツの情報を正確に伝え、正当な評価がされやすくなります。そのため、間接的にSEO効果を持っていると言えるでしょう。まずは、自社サイトでmetaタグがどのように設定されているか紹介した方法で確認し、足りないものがあれば追加したり、修正したりして改善を進めていきましょう。
また製造業のクライアントがブログを始めた際の話を記事にしております。併せてご覧ください。
