メタタグ（metaタグ）とは？7つの種類とSEOに効果的な書き方を解説！

メタタグとは？SEO対策に重要な7つのmetaタグと最適な書き方

最終更新日:2023年1月26日

小関拓弥

メタタグ（metaタグ）は、ユーザーではなく、検索エンジンやブラウザなどのシステムに対して情報（メタデータ）を伝えるHTMLタグです。メタタグの直接的なSEO効果は限定的ですが、正しくメタタグを設定することで、間接的なSEO効果を最大化します。

当ページでは、『メタタグとは何か』や『メタタグの書き方』などの基本的な情報を伝えた上で、SEO対策をする上で重要なメタタグとその最適化方法をわかりやすく紹介していきます。

「メタタグって何？」というような初心者から、「もう一歩進んだSEO対策をするためにメタタグの最適化方法を知りたい」といった中上級者の方まで、広く参考にしていただける記事です。

このページで解説する内容を動画でチェック！

1 メタタグ（metaタグ）とは？
2 SEOに与える影響やメリットとは？
3 メタタグの書き方を解説！
- 3.1 HTMLに直接書き込む
- 3.2 wordpressのプラグインを活用する
4 メタタグの確認方法とは？
- 4.1 「ソースコード」からメタタグを確認する方法
- 4.2 「META SEO Inspector」によるメタタグの確認方法
5 SEO対策において重要な7つのメタタグとその最適化
6 メタタグを生成するツールをご紹介
- 6.1 Meta Tag Generator（メタタグジェネレーター）
7 まとめ：メタタグを正しく設定して間接的なSEO効果を最大化しよう！

メタタグ（metaタグ）とは？

メタタグ（metaタグ）とは、Googleをはじめとする検索エンジンやブラウザ等のシステムに向けて書くHTML（HTML5）コードのこと。「meta情報（メタ要素、メタ情報、メタデータ）」などと呼ばれることもあります。

メタタグは検索エンジンやブラウザに対して、文字コードの指定やインデックスの可否など指示を出したり、情報（メタデータ）を提供したりするのが主な役割です。メタタグは、システム向けの情報（メタデータ）のため、ユーザーがWEBサイトを訪れた際に見ることは決して多くありません。ただし、SEO対策においては間接的に影響するので非常に重要な要素です。

次項ではメタタグが与えるSEO効果や最適化のメリットについて解説します。

SEOに与える影響や
メリットとは？

メタタグとは、ユーザーの目には触れず、検索エンジンにWebサイトの情報を伝えるHTMLコードだとお伝えしました。それでは、メタタグを適切に設定できればSEO効果を高めることができるのでしょうか？

結論、メタタグの書き方を最適化できれはSEO効果を高めることが可能です。理由として下記の3つのメリットからわかりやすく解説していきます。

検索エンジンにページの内容を正しく伝える

メタタグの中でも「meta description」や、「meta keywords」は、Webページの内容を検索エンジンに伝える役割を担っています。正しく設定できれば正しい内容を検索エンジンに伝えることができるため、SEO効果を高めることができます。

検索画面に表示される

ユーザーが検索画面にて知りたい情報を検索すると、タイトルだけではなく、ページの説明文が同時に表示されています。これらはメタタグの中でも「title」や「meta description」が関係しています。

メタタグ正しく設定できれば検索結果に表示される要素となるため、クリック率の向上につながります。その結果、流入が増えることによりSEO効果の向上が見込めます。

ただし、検索エンジンは検索クエリに合っていると判断したとしても、必ずしもmeta descriptionを表示するわけではなく、検索結果に合った文章を自動生成することもあるので覚えておきましょう。

クローラーのインデックスを拒否できる

メタタグの中でも、meta robotsタグを使用することで、検索エンジンのクローラーがWebページをインデックスするかどうかを制御することができます。

robotsタグには、「index」や「noindex」を設定することができ、「noindex」を設定することで、クローラーによるインデックスを拒否することができます。情報を伝えたいページだけ厳選してクローラーに伝えることにより、SEO評価を高めることができます。

ただし、検索結果には表示されないだけで、クローラーがアクセスを拒否することはできません。また、meta robotsの不適切な使用により、検索結果に悪影響を与える可能性があるので使用する際には注意が必要です。

メタタグの書き方を解説！

続いてはメタタグの書き方を2つご紹介します。

HTMLに直接書き込む

メタタグを下記のようにHTMLコードのheadタグ内の場所に記述することで設定することができます。
【メタタグの書き方】

<html>
<head>
※ここにmetaタグを記述する
</head>
<body>
</body>
</html>

wordpressのプラグインを
活用する

WordPressのプラグインを使用することでも、簡単にWebページのメタタグを設定することができます。
おすすめのプラグインには、「Yoast SEO」、「All in One SEO Pack,」「The SEO Framework」などがあり、インストールした後に、WordPressの管理画面から設定することができます。

Yoast SEOは、特に人気のプラグインで、メタタグの設定だけでなくSEOに関する設定をすることが可能です。インストール後に、設定画面から、titleタグやmeta descriptionタグ、meta robotsタグなどを設定してみましょう。

メタタグの確認方法とは？

続いてはメタタグの確認方法を解説します。メタタグを設定した後は正しく記述できているか必ず確認するようにしましょう。

「ソースコード」から
メタタグを確認する方法

また、WEBページのメタタグがどのように記載されているかを調べるには、下記の2手順で簡単に確認可能です。

メタタグの確認方法

対象のページで右クリック
『ページのソースを表示』をクリック

すると次のような画面が現れます。
ここで、headタグ内にあるメタタグを確認することができます。

「META SEO Inspector」によるメタタグの確認方法

META SEO Inspectorを使用するには、まずGoogle Chrome Web Storeなどで拡張機能をインストールしてください。インストール後、Webページを開き、拡張機能のアイコンをクリックすると、メタタグが表示されます。

「META SEO Inspector」で確認できること

タイトルタグ
メタディスクリプション
メタキーワード
hタグ
Facebook用OGP設定・Twitterカード形式
canonical属性
構造化データ

META SEO Inspectorを活用すれば上記を確認することができます。

以上、メタタグの確認方法をご紹介いたしました。

SEO対策において重要な
7つのメタタグとその最適化

続いては、SEOにおいて重要なメタタグを7つ紹介し、その最適化方法も解説いたします。

重要なメタタグの種類

titleタグ（タイトルタグ、meta title、<title>）
meta description（メタディスクリプション）
文字コード（meta charset属性）
OGPタグ（meta property属性）
ビューポートタグ（meta viewport）
noindex,nofollow（meta robotsで指定）
メタキーワード（meta keywords）

titleタグ（タイトルタグ、meta title、<title>）

<title>タイトル名</title>

タイトルタグ(titleタグ)はその記事のタイトル情報を30文字程度で表したもの。直接的なSEO効果があります。タイトルタグは正確には、メタタグではありませんが、メタタグと合わせて説明されることが多いため、ここで紹介いたします。

タイトルタグには、必ず対策キーワードを含めましょう。タイトルタグは、検索結果ページにおいて、ユーザーの目に入る最初の情報です。タイトルが魅力的か否かが、クリック率を大きく左右します。

そのため、ユーザーが検索する際に使用する対策キーワードを含ませることで、ユーザーのクリックを呼びこみましょう。

また、タイトルはユーザーの他に、Googleの検索エンジンに対してページのコンテンツがどのような内容かを知らせる役割も果たします。検索エンジンがコンテンツを正しく理解するのにも、対策キーワードを含めることは有効です。

SEOに効果的なtitleタグ（タイトルタグ）の設定方法について詳しくは以下のページをご覧ください。

SEOに効果的な
titleタグについて見る

meta description
（メタディスクリプション）

<meta content="概要文を120文字程度" name="description">

meta descriptionタグ（メタディスクリプションタグ）は、その記事の内容を120文字程度で表した説明文。直接的なSEO効果はありませんが、クリック率を左右するため、非常に大切なメタタグです。

最適化の方法として、重要なキーワードは冒頭に書くことを心がけましょう。また、文字数の指定はないですが、スマホでmeta descriptionを見た場合、80文字程度しか表示することができないため、できるだけキーワードも80文字以内の箇所へ配置しておくことが重要です。

SEO対策におけるmeta descriptionタグ（メタディスクリプションタグ）の効果的な設定方法は以下のページをご覧ください。

SEOに効果的なmeta descriptionについて見る

文字コード（meta charset属性）

<meta charset="utf-8">

meta charset属性は、html文書の文字エンコーディングを指定するメタタグです。

もし文字コードを指定していなければ、日本語で作成したサイトに英語版ブラウザからアクセスした場合などに文字化けが起こる可能性があるので、meta charset属性は、日本語のサイトでは必ず書く必要があります。

日本語サイトの場合、meta charset属性には、世界共通のUnicode『UTF-8』や日本語の文字コード『Shift-JIS』などの値を使用します（大文字/小文字の違いは区別されません）。

　用語と意味文字コード：文字や記号に割り当てられたコンピュータが認識するための数字。文字エンコード：文字や記号に割り当てられたコード（数字）の対応表。エンコーディング：入力されたデータを他の形式へ変換すること。

OGPタグ（meta property属性）

<meta property="og:title" content="ページの タイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページの URL" />
<meta property="og:image" content="サムネイル画像の URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP"  />

OGPとはOpen Graph Protocolの略で、FacebookやTwitterなどのソーシャルメディアで共有(シェア)された際に、ページのイメージ画像やタイトル、ディスクリプション(概要文)、URLなどを正しく表示させる仕組みのことです。

OGPタグ（meta property属性）は、SNSなどでシェアされた際のクリック率に大きく関わるため、バイラル性の高いコンテンツを発信していて、ソーシャルメディアからの流入を考えている方はしっかりと設定しておきましょう。

WordPress（ワードプレス）を利用しているならテーマ設定（外観＞カスタマイズ）などからOGPタグの設定ができる場合があります。テーマ設定でOGPタグの設定ができない場合は、「All in One SEO Pack」などのプラグインを使うことでもOGPタグの設定は可能です。

WordPressでのOGP設定
（プラグインを使わない場合）

WordPress（ワードプレス）でプラグインを使わずにOGPタグを設定したい場合には、以下のコードをfunctions.phpにコピペすることでOGPタグの設定ができます。

赤下線が引かれた3箇所は変更が必要です。

※functions.phpの変更はサイトを“真っ白”にしてしまう可能性があるので、必ずバックアップを取ってから行うようにしてください。

/******************************
OGPタグ/Twitterカード設定の出力用
******************************/
function my_meta_ogp() {
    if (is_front_page() || is_home() || is_singular()) {
        global $post;
        $ogp_title = '';
        $ogp_descr = '';
        $ogp_url = '';
        $ogp_img = '';
        $insert = '';
        if (is_singular()) { //記事＆固定ページ
            setup_postdata($post);
            $ogp_title = $post - > post_title;
            $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
            $ogp_url = get_permalink();
            wp_reset_postdata();
        } elseif (is_front_page() || is_home()) { //トップページ
            $ogp_title = get_bloginfo('name');
            $ogp_descr = get_bloginfo('description');
            $ogp_url = home_url();
        }
        //og:type
        $ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';
        //og:image
        if (is_singular() && has_post_thumbnail()) {
            $ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            $ogp_img = $ps_thumb[0];
        } else {
            $ogp_img = 'TOPページとアイキャッチ画像未設定のときに使用する画像のURL';
        }
        //出力するOGPタグをまとめる
        $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
        $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
        $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
        $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
        $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
        $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
        $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
        $insert .= '<meta name="twitter:site" content="Twitterのアカウント名(@を含む)" />' . "\n";
        $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";
        //FacebookのアプリIDを設定する場合（※Facebook向けOGP設定）
        $insert .= '<meta property="fb:app_id" content="ここにFBのアプリID(appID)を入力">' . "\n";
        //fb:app_idを設定しない場合、この行と上2行は削除する
        echo $insert;
    }
} //END my_meta_ogp
add_action('wp_head', 'my_meta_ogp'); //headタグのwp_headの位置にOGPタグ/Twitterカード設定を出力

ビューポートタグ
（meta viewport）

<meta name="viewport" content="width=device-width,initial-scale=1">

ビューポートタグ（meta viewport）は、モバイル端末でのページ表示をブラウザに指定するタグ。つまり、ビューポートタグ（meta viewport）は、レスポンシブデザインを実現するために必要なメタタグです。

近年は、スマホユーザーの方が多くなってきており、Googleもスマホユーザーの評価をインデックスの基準とするモバイルファーストインデックス（MFI）を打ち出すなど、スマホへの対応は必至。

ビューポートタグをしっかり設定することで、スマホへの対応を行い、モバイルファーストインデックスに対応しましょう。

noindex,nofollow
（meta robotsで指定）

<meta name="robots" content="noindex,nofollow">

noindex,nofollowは、Google検索エンジンなどのクローラ（ロボット）に対してページをインデックスさせない、ページにリンクしているページはクロールしないようにするメタタグです。

低品質なページや、ユーザーに見せたくないページ、内容が重複しているページなどに使用します。低品質なページをインデックスしないことによって、SEOのマイナス評価を避けることができるため、SEOの観点から効果的です。

メタキーワード
（meta keywords）

以前、SEO効果があると言われていたメタタグの一つにmeta keywordsタグがあります。記述は下記の通りです。

<meta name="keywords" content="キーワード1,キーワード2,キーワード3">

以前は、Googleのクローラーがメタキーワードからページのコンテンツを判断していたため、メタキーワードを設置することはSEOに有効でした。

しかし、メタキーワードがSEO対策で悪用されるようになったことや、Googleクローラーの性能が上がったことで、2023年現在では高いSEO効果を持たなくなったのです。

Googleは、メタキーワードの情報を一切見ていないと発表したことからも、SEO効果が小さいことが伺えます。

メタタグを生成するツールをご紹介

メタタグを生成するにはツールを使うのも1つの手です。ここでは、メタタグの生成に利用できるツールを1つ紹介します。

Meta Tag Generator
（メタタグジェネレーター）

引用元：https://www.benricho.org/metatag/

こちらの「Meta Tag Generator」を使えば、簡単にメタタグを生成することが可能です。タイトルやmeta description、meta keywordsなど必要項目を入力し、生成されるコードをコピーするだけ。

非常にシンプルで使いやすいので、使ってみてはいかがでしょうか？

また当ブログでは、SEO対策に取り組むにあたり、ぜひ使いたい便利なおすすめSEOツールを厳選して機能別にまとめています。SEO対策でどんなツールを使えばいいか知りたい方、もっと効率的に効果的なSEO施策を実施していきたい方は、ぜひ以下のリンクからご覧ください。

2023年最新の
SEOツールについて見る

まとめ：メタタグを正しく設定して間接的なSEO効果を最大化しよう！

SEO対策でも重要なメタタグについてご紹介しましたがいかがでしたか？SEO対策において、Google検索アルゴリズムにはメタ情報の項目はあるものの、ほかのSEO要因と比べて、検索順位の変動には大きな影響はないのが実情です。

ただし、タイトルやメタディスクリプションは、ユーザーが検索した際の最初に目に触れる情報となるため、ユーザビリティやCTR（クリック率）に大きな影響をもたらします。また、他のmeta情報も直接的にSEOに関わることはないですが、UXの観点からも正しく設定することが必要です。

今回お伝えしたメタタグの最適化方法を、SEOに強いWEBサイトを構築する際の参考にしていただければと思います。

このように、SEOではメタタグをはじめ対策しなければならない項目が山ほどあります。もっと総合的にSEOの対策をしたいという方は、下記も是非ご覧ください。

2023年最新の
SEO対策方法はこちら

この記事を書いた人

小関拓弥

EmmaTools blog編集長。Googleのアルゴリズムの動向を日々研究するSEOマニアであり、三度の飯よりSEOが好き。「最高の１ページを溢れさせる」をミッションとする株式会社EXIDEAのWebメディア事業部のマネージャーを兼任。

メタタグ（metaタグ）とは？

SEOに与える影響やメリットとは？