検索順位を上げるメタタグの書き方を解説

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

最終更新日:2021年2月12日

小関拓弥

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

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

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

それでは、早速「metaタグ（メタタグ）とは何か」から見ていきましょう。

※ページの最後で、metaタグの使い方を含めたSEO対策に効果がある項目をまとめた資料を無料ダウンロードできますので、気になる方はぜひご覧ください。

今すぐSEO対策お役立ち資料を確認したい方は
こちらからどうぞ！

最新SEO対策チェックリスト
無料ダウンロードはこちら

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

1 metaタグ（メタタグ）とは？
2 metaタグ（<meta>タグ）の書き方とは？
3 SEO対策において重要な6つのmetaタグとその最適化
4 メタキーワード（meta keywords）
5 metaタグを生成するツールをご紹介
- 5.1 METAタグ生成ツールメタタグビルダー
6 まとめ：メタタグを正しく設定して間接的なSEO効果を最大化しよう！

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

metaタグ（メタタグ）とは、Googleをはじめとする検索エンジンやブラウザ等のシステムに向けて書くHTML（HTML5）コードのこと。検索エンジンやブラウザに対して、文字コードの指定やインデックスの可否など指示を出したり、情報（メタデータ）を提供したりするのが主な役割です。

metaタグは、システム向けの情報（メタデータ）のため、ユーザーがWEBサイトを訪れた際に見ることは決して多くありません。ただし、SEO対策においては間接的に影響するので非常に重要な要素です。

metaタグ（メタタグ）は、「meta情報（メタ要素、メタ情報、メタデータ）」などと呼ばれることもあります。

metaタグ（<meta>タグ）の書き方とは？

metaタグは、下記のようにHTMLコードのheadタグ内に記述します。

【metaタグの書き方】

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

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

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

すると次のような画面が現れます。

ここで、headタグの中身を確認することができます。

ここまでは、metaタグに関する基本情報を見てきました。続いては、SEOにおいて重要なmetaタグを紹介し、その最適化方法も解説いたします。

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

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

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

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

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

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

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

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

SEOに強いタイトルとは？文字数・キーワードやタグの使い方を解説

2019.05.27

このページでは、seo対策の中でも重要なタイトルの付け方について紹介しています。seo効果を最大化させるタイトルの付け方について知りたい方は必見です。...

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

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

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

最適化の方法として、重要なキーワードは冒頭に書くことを心がけましょう。特に、スマホでメタディスクリプションを見た場合、80文字程度しか表示することができないため、できるだけキーワードも80文字以内の箇所へ配置しておくことが重要です。

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

メタディスクリプションの書き方・文字数改善でSEO効果UP！最適なタグの設定方法とは？

2019.04.03

「メタディスクリプションはSEOに効果がない」。実はこれ、正確ではありません。本当のディスクリプションとは、SEOの集客効果を補完的に高める優れた施策です。正しくディスクリプション...

③文字コード（meta charset属性）

<meta charset="utf-8">

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

もし文字コードを指定していなければ、日本語で作成したサイトに英語版ブラウザからアクセスした場合などに文字化けが起こる可能性があるので、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タグの一つにmetaキーワードタグがあります。記述は下記の通りです。

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

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

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

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

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

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

METAタグ生成ツールメタタグビルダー

引用元：https://www.submit.ne.jp/tools/meta

こちらのMETAタグ生成ツールメタタグビルダーを使えば、タイトルとディスクリプション、メタキーワードなど必要項目を入力し、下記の項目をチェックするだけで、metaタグが生成されます。

検索ロボットへの指示（meta robots）

noindex（ページをインデックスに登録しない）
nofollow（ページのリンクを追跡させない）
nosnippet（検索結果にスニペットを表示しない）
noodp（ODP/DMOZの代替説明を使用しない）
noarchive（ページのキャッシュリンクを表示しない）
noimageindex（検索結果に表示される画像の参照元ページとして表示しない）

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

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

SEO対策で使うべき
厳選おすすめツール

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

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

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

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

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

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

また当サイトでは他にも、当社が13年以上かけて貯めた独自のノウハウを、チェックリストとして公開しています。metaタグの使い方以外にも、SEO対策に効果がある項目をまとめておりますので、ご興味がある方はぜひ下記の資料をご覧いただければと思います。

この記事を書いた人

小関拓弥

Emma Magazine編集長/株式会社EXIDEAのグロースハッカー。入社後、通信領域のメディアを中心に担当し、半年で売上を約5倍に。その経験がきっかけとなり、SEOに魅了される。現在はGoogleのアルゴリズムの動向を日々研究しながら、情報発信中。