メタタグとは？SEOに重要なタグと確認方法

Webサイトを運営されている方なら、Webページ（記事）を作成する際には内容だけでなく、タイトルやメタディスクリプションにも気を配っていることでしょう。
メタタグ（metaタグ）は、ページを開いた時に必ずしも直接表示されるものではありませんが、ページの内容や指示を検索エンジン（クローラー）やブラウザに伝えるという役割を担っています。

一口にメタタグといっても多くの種類が存在しますが、この記事では、Web集客やSEOの視点で重要なメタタグ、あまり重要でないメタタグをピックアップして紹介します。

メタタグとは

メタタグとは、HTMLにおいて、要素で記載される、クローラーやブラウザ向けなどのシステム向けの情報（メタデータ）のことを指します。
主なメタタグの用途として、ディスクリプション（ページ概要）の記載、文字コードの指定、クローラーへのインデックス可否の意思表示などがあります。

なお文脈によっては広義に、必ずしも要素でなくとも内に記載されるような情報全般がメタタグと呼ばれることがあるため注意が必要です。例えば、タイトルタグやカノニカルタグなどは要素ではなく厳密にはメタタグではありませんが、ロボット向けのコードとして同列に扱われることがあります。

ブラウザでページを見ているユーザーがメタタグを直接目にすることはほとんどありませんが、メタタグを適切に設定すると、クローラーやブラウザにページの情報や指示を伝えられるようになるため、結果としてWebサイトの成果を高める可能性があります。

メタタグの確認方法（見方）

メタタグは、HTMLのタグ内に記載されていますが、ページを開いただけでは通常表示されないものばかりですので、ソースコードを確認します。

一般的なブラウザでは、Ctrl+Uでソースコードを表示することができます。

もしくは、Chromeであれば、Ctrl+Shift+I（またはページ内の任意の位置で右クリックして「検証」）でデベロッパーツールを開けばElementタブ内にコードが表示されます。

参考：Google Chromeデベロッパーツールとは？使い方や簡易的な解析テクニックについて

メタタグは内に記載することになっていますので、ソースコードの上のほうを探してみましょう。要素はname属性、http-equiv属性、charset属性のうち一つが必須となっていますが、このうちname属性が記述されたものが最も一般的です。
name属性が使用された場合、content属性も必須であるため、「<meta name=”値” content=”内容”」という形のものが多いでしょう。例えば、メタディスクリプション（descriptionタグ）やSNSでシェアされたときのサムネイル画像（og:imageタグ）は以下のように記述されています。

メタタグの記述方法のサンプルについては、後述するメタタグのリストを参照ください。

SEOやWebマーケティングに重要なメタタグ7選

メタタグには様々な種類がありますので、特にSEOの視点で特に重要なメタタグを解説します。

なお、Googleがサポートしているメタタグのリストは以下のドキュメントで公開されています。
Google がサポートしている特別なタグ

タイトル

titleタグは正確にはメタタグではありませんが、検索エンジンが検索結果画面に使用したり、ブラウザがタブに表示させたりする、ページ内で非常に重要なタグです。

SEOを重視するのであれば、検索結果画面でユーザーに目を留めてもらえるよう、キーワードを含む形で、なるべく端的に（35文字程度以内）、コンテンツの魅力が伝わるタイトルを考えて設定するとよいでしょう。

メタディスクリプション

ページの概要を定義するメタタグで、検索エンジンもこのタグの内容を検索結果のスニペットとして表示することがあります（ただし絶対ではなく、場合によってはGoogleが自動的に生成して表示することもあります）。

現在メタディスクリプションにはランキング効果はありませんが、タイトルタグに書ききれなかったページの魅力をここに記載して、ユーザーのクリックを促すという意味でSEOに効果のあるタグです。

検索結果に表示される文字数は仕様変更の可能性もありますが100文字前後を目安とし、タイトルタグと同じようにキーワードを含む形で設定するとよいでしょう。

文字エンコード

エンコードは記載したからといってSEOのランキングが向上するといったものではありませんが、HTMLでページを公開する際のきまりごととして、クローラーやブラウザなどのコンピューターに誤りなく処理してもらうために必ず設定しておきましょう。

OGP（Open Graph Protocol）

TwitterやFacebookをはじめとするSNSでWebページがシェアされた際に、どのようにリンク表示するかを定義するタグです。特にサムネイル画像（og:imageタグ）やタイトル（og:title）のリンクカードの表示のされ方は、集客力に大きく影響します。Twitter専用のタグとしてTwitter cardがありますが、OGPがあればそちらを参照しますので、twitter cardは設定しなくても問題はありません。

なお、FacebookやtwitterはタイトルやディスクリプションタグよりOGPを優先して認識する一方、GoogleはOGPを参照しませんので、これらは両方設定しておく必要があります。

ビューポート

モバイル最適化された表示をするためのビューポートを指定するタグです。
このタグはページごとに埋め込むというよりも、サイト制作の段階でテンプレートとして埋め込むことがほとんどでしょう。

すでにモバイル対応済みのサイトであれば気にする必要はありませんが、まだモバイル対応を行っていないサイトでは、採用するモバイル対応方式を検討の上、実装しましょう。

参考：
モバイルユーザビリティとは？テストの実施方法とエラーの改善方法を解説
これからのモバイル対応はレスポンシブが強く推奨

メタリフレッシュ

ユーザーが古いページを訪問した際に新しいページに自動転送することを「リダイレクト」と呼び、メタリフレッシュはそれを実現するための方法の１つです。

しかし、メタリフレッシュの利用はHTMLの規格を定めるW3Cでは推奨されていません。また、Googleもメタリフレッシュをサポートはしていますが推奨しておらず、あくまで他のより適切なリダイレクトが設定できない場合の救済措置という位置づけです。
可能であればメタリフレッシュは避け、301リダイレクトを設定するようにしましょう。

参考
htmlのmeta refreshを使ったリダイレクト設定
リダイレクトとは？リダイレクトの種類と設定方法

robotsメタタグ(noindex, nofollowなど)

robotsメタタグは検索エンジンにそのページの扱いなどを指示するためのものです。
主なrobotsメタタグには以下のようなものがあります。

noindex

そのページをインデックスすることを拒否する

nofollow

広告コンテンツなどの理由により、そのページからのリンクをたどらないように指示する

max-image-preview: [setting]

discoverなどに表示された場合の画像を指定します。[setting]部分はlargeを入れておくとよいかと思います。

nosnippet

そのページが検索結果に表示された際、スニペットを表示しないための指示。特別な理由がない限りおすすめしません。

max-snippet: [number]

[number]に数字を入れることでスニペットの最大文字数を制御することが可能ですが、あまり使用する機会はなさそうです

noarchive

設定しておくことで、検索結果にキャッシュが表示されないようになります。

Googleがサポートしているrobotsメタタグは以下も参照ください。
https://developers.google.com/search/docs/advanced/robots/robots_meta_tag?hl=ja

なお、BingもGoogleと同じようなrobotsメタタグをサポートしているようです。
https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240

その他メタ要素でないタグ

要素でないものの、内に記述するコードとしてすでにタイトルタグを挙げましたが、他にもSEOに影響するものとしてcanonicalタグがあります。このタグは正規URLを指定する際に使用され、正規でないページはインデックスされたり検索結果に表示さたりしにくくなります。ただし、他のメタタグが検索エンジンなどに「指示」するものであるのに対し、canonicalタグはあくまで指標であり、検索エンジンが必ずしも従うとは限りません。

参考：canonicalタグの書き方と使い方

他に検索エンジン向けのコードとしては、構造化データが挙げられます。構造化データについては必ずしも内にあるものではありませんが、ユーザーには表示されないロボット向けのコードであるという点でメタタグと似た特徴があります。今後SEOにおいてますます重要性が高まっていくものと考えられます。
参考：構造化データとは？～HTMLを構造化する前に知っておきたいこと～

Web集客やSEOにはほとんど影響しないメタタグ

メタタグはユーザーではなくシステム向けのコードですから、システムがそのタグを解釈・使用していなければ意味がありません。

システム的な挙動にも、Web集客やSEOにも影響しない代表的なメタタグを2つ挙げます。

メタキーワード

ページのキーワードを記載するもので、かつて検索エンジンが参照していたことがありましたが、現在は使用されていませんので、設定する必要がありません。

著者

ページの著者を表しますが、Googleが使用していたことはありません。なお、Googleは一時期、Google+を用いたrel=”author”（オーサーシップ）を検討していましたが、本格実装されることなく終了しており、その後Google+も終了しています。

いずれにしても、Googleは著者をメタタグなどコード１つで記載される単純なものとしては扱わないということになります。
一方で、「誰が作成したコンテンツであるか」ということは、SEOにおいてもますます重要になりますので、ページ内に著者を明示したり、構造化データを記載しておくなどの対応が求められます。

まとめ

メタタグによりWebページの内容や指示を適切にクローラーやブラウザに伝えることができます。SEOにおいてはコンテンツが最も重要であるということに疑いはありませんが、メタタグにより効果を一層高めることができるケースもあります。
ただし、使用法を誤ったり確認を怠ったりすると、ページがインデックスされないなどマイナス方向への影響が出る可能性もありますので注意が必要です。