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

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

このページでは、EO対策を進める上で重要なメタタグとは何か、設定や最適化する方法などの基本的な情報を解説します。

「メタタグって何？」というような初心者から、「もう一歩進んだ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効果を高めることができるのでしょうか？

結論、メタタグの書き方を最適化できれば、SEO効果を高めることができます。

メタタグを設定することで得られるSEO上の3つのメリットを以下、解説します。

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

1つ目は、検索エンジンにページの内容を正しく伝えることできる点です。

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

検索画面に表示される

2つ目は、検索画面に表示されることです。

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

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

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

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

3つ目は、クローラーのインデックスを拒否できることです。

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

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

ただし、検索結果には表示されないだけで、クローラーがWebページにアクセスすることそのものの拒否はできません。

また、meta robotsは、不適切に使用すると、検索結果に悪影響を与える可能性があるため、使用する際には注意が必要です。

メタタグの書き方を解説

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

HTMLに直接書き込む方法

1つ目は、HTMLソースに直接、書き込む方法です。

メタタグを下記のように、HTMLコードのheadタグ内に記述することで、設定します。

メタタグの書き方

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

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

2つ目は、WordPressのプラグインを使用し、簡単にWebページのメタタグを設定する方法です。

おすすめのプラグインには、「All in One SEO Pack」、「Yoast SEO」、「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つ、それぞれの最適化方法と一緒に紹介します。

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の検索エンジンに対してページのコンテンツがどのような内容かを知らせる役割も果たします。検索エンジンがコンテンツを正しく理解するのにも、対策キーワードを含めることは有効です。

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

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

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

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

SEO対策におけるmeta descriptionタグ（メタディスクリプションタグ）の効果的な設定方法は『メタディスクリプションとは？SEO効果のある設定方法や最適な文字数・書き方を解説！』をご覧ください。

文字コード（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クローラーの性能が上がったことで、2024年現在では高いSEO効果を持ちません。

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

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

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

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

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

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

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

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

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

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

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

このように、SEOではメタタグをはじめ対策しなければならないタグが山ほどあります。その他のタグについては以下のページで詳しく解説していますので、ぜひご一読ください。

SEOタグの使い方を詳しく知る