metaタグ（メタタグ）とは？初心者でもわかるその役割や設定方法、確認方法について

「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）を指定する要素で、開始タグ と終了タグ の間にページタイトルを記述します。実際に検索結果上で見るタイトルはこのタイトルタグの記述によるものです。タイトルタグには、そのページで対策を行いたいキーワードを追加します。よくタイトルタグは全てのページで共通しているサイトなどがありますが、SEO的に見ると効果的ではないため、各ページに固有のタイトルをつけるのがいいでしょう。タイトルによって検索結果上でのクリック率（CTR）が変わるため、ユーザーの検索意図に沿ったタイトルを設定しましょう。タイトルタグの記述方法は以下の通りです。 タイトル名 メタディスクリプション（meta description）メタディスクリプションとは、Webサイトやページの内容を100文字前後で説明する要素です。検索順位の決定に直接影響する要素ではありませんが、わかりやすいメタディスクリプションの設定を行うことで、検索結果上でユーザーに対して「自分の悩みや気になっていることがこの記事内にある」と思ってもらうことができ、ひいてはクリック率の改善から流入数の増加などに繋がります。メタディスクリプションタグの記述方法は以下の通りです。 文字コード文字コードは、Webサイトやページの文字化けを防ぐ要素です。多くの場合、Webサイトやページは日本語＋英語など他の言語が混ざっていると文字化けします。文字化けすると、クローラが適切に情報を読み取れず、ページの正しい評価がされません。上記を避けるため、Webサイトやページを制作する際は、必ず文字コードタグを設定するようにしましょう。文字コードタグの記述方法は以下の通りです。 OGPタグOGPタグとは、TwitterやInstagramなどのSNSにて、Webサイトやページがシェアされた際、コンテンツのレイアウトを調整する要素です。OGPタグでページのURLや画像のURLなどを指定することで、WEB上でURLやアイキャッチ画像、タイトルなどを綺麗に調整します。普段からTwitterなどで見ているシェアされた記事のサムネイル画像が見られるのはこのOGPタグの設定によるものです。以下にOGPタグそれぞれの記述方法をまとめました。 ビューポートタグビューポートタグは、モバイル端末（スマートフォンやタブレット）で表示されるテキストや画像サイズを最適化する要素です。近年、検索順位を決定する重要指標として、モバイルファーストインデックス（MFI）があります。モバイルファーストインデックス（MFI）とは、これまで検索エンジンがPCサイトの内容をもとにインデックスやコンテンツの質を評価していたことを一変させ、スマートフォンサイトを評価の主軸としてインデックスするという方針です。検索順位を決定する重要指標のため、必ず設定するようにしましょう。ビューポートタグの記述方法は以下の通りです。 noindex/nofollownoindexは、対象ページがインデックスされることを防ぐ要素です。インデックスとは、検索エンジンのデータベースに対して登録されることです。登録されることで、ユーザーが特定のキーワードで検索した際の検索結果上にサイトやブログ記事などが表示されるようになります。また、nofollowは、検索エンジンのクローラーに対し、リンク先へSEO評価を引き渡さないようにできる要素です。インデックスやクロールが不要なページ（主に質の悪いページ）を検索結果から除外することで、SEO評価が下がることを防止することも可能です。noindex/nofollowの記述方法は以下の通りです。 metaタグの正しい設定方法ここでは、metaタグの正しい作成方法について以下の3点を解説していきます。HTMLソースに直接書き込むWordpressを活用するmetaタグ生成ツールを活用するHTMLソースに直接書き込む自社のWebサイトやページをエディタを用いて作成している場合は、HTMLソースの 要素内に必要なmetaタグを記述しましょう。各metaタグの記述方法は、本記事の「SEO対策で必要なメタタグ設定6選」をご参考ください。Wordpressのプラグインを活用するWordPressを活用している場合は、プラグインでmetaタグを記述することができます。プラグイン導入によるメリットとしては、必要な機能が簡単に導入できるため、プログラミングの知識が不要という点です。よく使用されるプラグインは以下の3種類です。自社で使用しているテーマなどによっても互換性が変わるため一度プラグインを実装し、自社のサイトに最適なものを見つけましょう。All in one SEO PackTable of Contents PlusWebSubプラグインを活用すれば、metaタグの設定以外にも、SEO効果を高めるための施策が簡単に実装できます。ぜひ導入して、使用感をたしかめてみてください。metaタグ生成ツールを活用するmetaタグは、自分で作成する以外に、ツールで自動生成することもできます。HTMLなどに理解のない方でmetaタグを記述しなくてはいけない時に便利です。以下におすすめの生成ツールを紹介するので、ぜひ活用してみてください。（HP内の情報から自動的にメタディスクリプションなどを生成するものではありません）【おすすめのmetaタグ生成ツール】Meta Tag GeneratorSEO toolsRyuumumetaタグ作成時に注意したい2つのポイントここでは、metaタグ作成時に注意したい2つのポイントについて解説しますメタキーワードは、検索順位の評価に直接関係ないかつて、メタキーワードを設定することは、SEOに効果的だと言われていましが、2022年4月現在、メタキーワードの設定はSEO的に効果がないため不要です。メタキーワードとは、以下の記述方式で記述し、どんなキーワードと関連したページなのかを指定できる要素です。キーワードが複数ある場合は、コンマ区切りで指定を行います。 理由は先ほども申し上げたように、Googleがサポートしているmetaタグにメタキーワードに関する詳細がなく、Googleがコンテンツの質をメタ要素で判断しなくなったためです。なおメタキーワードを過剰に使用すると、スパム扱いされ、ペナルティの対象になる場合があるため、注意が必要です。metaタグは に囲まれた中に記述するmetaタグを記述する際は、必ず に囲まれた中に記述しましょう。記述場所を間違えると検索エンジンに正しくテキストを伝達できません。まとめこのページでは、「metaタグ」に焦点を当て、その概要や確認方法、設定方法、種類、重要性、設置の際の注意点などについて解説しました。metaタグは、検索エンジンやユーザーにコンテンツ内容を伝達する重要な役割を果たします。設定をすれば、SEO効果が上がるということはありませんが、設定することで、検索エンジンにコンテンツの情報を正確に伝え、正当な評価がされやすくなります。そのため、間接的にSEO効果を持っていると言えるでしょう。まずは、自社サイトでmetaタグがどのように設定されているか紹介した方法で確認し、足りないものがあれば追加したり、修正したりして改善を進めていきましょう。また製造業のクライアントがブログを始めた際の話を記事にしております。併せてご覧ください。関連記事：製造業の経営者が「うちもブログを始めたらどうだろう？」と思ったら