メタタグとは？SEOで押さえる6種類の書き方と確認方法を解説

メタタグとは、ページのタイトルや説明文、検索エンジンへの指示などを、HTMLのheadの中に書いて伝えるタグです。

SEOで大切なのは、Googleが使うタグを正しく書くことで、使われないタグに手間をかける必要はありません。本記事では、主なメタタグの種類と書き方、確認方法、よくある間違いを解説します。

なお、自社サイトのメタタグが正しく設定できているか不安な方は、カルテットコミュニケーションズのSEOコンサルティングの無料相談もご活用ください。

サイトのタイトルや説明文の状況を伺い、検索広告のデータもあわせて、直す順番を一緒に整理します。

メタタグとは？HTMLのheadに書くページの情報

メタタグの「メタ」は、データについてのデータを指すメタデータのことで、ページそのものについての情報を表します。

まずは、メタタグをどこに書き、誰が読むものなのかを押さえておきましょう。

定義①｜headの中に書く「ページの情報」

HTMLのページは、大きく分けて、ページの情報を書くheadと、画面に表示する本文を書くbodyでできています。

メタタグはこのheadの中に書くタグで、Googleは次のように説明しています。

meta タグは、ページに関する詳細情報を検索エンジンや他のクライアントに伝えるために使用される HTML タグです。クライアントは meta タグを処理し、サポートしていないものは無視します。

meta タグは、HTML ページの <head> セクションに追加します。

引用元：Google検索セントラル「Google がサポートしている meta タグと属性」

ここでいう「クライアント」は、検索エンジンのクローラーやブラウザ、SNSなど、ページを読み取るプログラムのことです。

読み取る側は、自分が使うタグだけを処理し、知らないタグは読み飛ばします。

メタタグは、ページを読み取るプログラムに向けてheadに書く情報だと押さえましょう。

定義②｜画面には出ず、検索エンジンやSNSが読み取る

メタタグは、ページを開いた人の画面には表示されません。

その代わりに、検索エンジンは検索結果のタイトルや説明文に、ブラウザは文字の表示や画面の幅に、SNSはシェアされたときのカードに使います。

画面で見えないぶん、間違いがあっても気づきにくく、長いあいだ直されないまま残っていることも少なくありません。

サイトのリニューアルやテンプレートの変更のあとに、タグが消えたり、古い内容のまま残ったりするのもよくある例です。

メタタグは見えないからこそ、公開の前後にソースで中身を確かめる習慣を付けましょう。

定義③｜titleやOGPもまとめて「メタタグ」と呼ばれる

HTMLの決まりでいうメタタグはmeta要素（<meta>）のことですが、SEOの現場ではもう少し広い意味で使われます。

ページのタイトルを書くtitle要素（<title>）はmeta要素ではありませんが、同じheadに書くページの情報として、一緒にメタタグと呼ばれることが多いです。

SNS向けのOGP（og:で始まるタグ）や、URLの正規化に使うlink要素のcanonicalも、まとめて扱われることがあります。

本記事では、SEOで押さえておきたいhead内のタグを、広くメタタグとして扱います。

社内で話すときは、「metaタグ」にtitleも含めるのかを先にそろえておきましょう。

SEOで押さえたいメタタグ6種類と書き方

SEOで押さえたいメタタグは、headに書く次の6種類です。

まずは全体の役割を表で確かめてから、1つずつ書き方を見ていきます。

タグ	役割	書くページ
title	検索結果のタイトルの元	全ページ（ページごとに変える）
meta description	検索結果の説明文の候補	全ページ（重要なページから）
meta robots	インデックスなどの指示	検索結果に出したくないページ
meta viewport	スマホでの表示の幅	全ページ（共通の部分）
meta charset	文字コードの指定	全ページ（共通の部分）
OGP（og:）	SNSでの見え方	シェアされたいページ

種類①｜title要素は検索結果のタイトルの元

title要素は、ブラウザのタブや、検索結果のタイトルリンク（青い見出し）の元になるタグです。

Googleは、タイトルリンクを作るときに、title要素のほか、ページの大見出しやog:titleなど、複数の情報を使うと公式ドキュメントで説明しています。

Googleが勧めているのは、すべてのページにtitleを付けたうえで、ページの中身を具体的に表す言葉にすることです。

「ホーム」「プロフィール」のようなあいまいな言葉や、同じ語句の繰り返し、全ページ共通の長い定型文は避けるよう案内されています。

タイトルの考え方は、SEOで勝つタイトルの付け方で詳しく解説しています。

titleは、ページごとに中身を表す言葉で書き分けましょう。

種類②｜meta descriptionは説明文の候補

meta descriptionは、ページの内容を短くまとめた説明文で、検索結果の説明文（スニペット）の候補になります。

ただし、スニペットはGoogleがページの本文から自動で作るのが基本で、descriptionがいつも使われるわけではありません。

スニペットは主にページのコンテンツ自体から作成されます。ただし、HTML のメタ ディスクリプション要素のほうがページから直接取得したコンテンツよりもページを正確に説明できる可能性がある場合は、その情報が使用されることもあります。

引用元：Google検索セントラル「検索結果のスニペットを管理する」

Googleはdescriptionを、ページがまさに探していたものだと思わせる「一種の宣伝コピー」と表現し、ページごとに固有の説明を書くよう勧めています。

弊社は検索広告の運用会社なので、リスティング広告の広告文でクリックされやすかった訴求を、descriptionの書き出しに生かす方法もおすすめしています。

descriptionは、検索した人が「このページだ」と思える要約を、ページごとに書きましょう。

種類③｜meta robotsで検索への表示を指示する

meta robotsは、検索エンジンに、ページをインデックスに登録するか、ページ上のリンクをたどるかなどを伝えるタグです。

何も書かなければ「index, follow」と同じ扱いになるため、検索結果に出したくないページにだけ、noindexなどの指示を書きます。

<!-- 検索結果に表示しない -->
<meta name="robots" content="noindex">

<!-- ページ上のリンクをたどらない -->
<meta name="robots" content="nofollow">

<!-- スニペットを表示しない -->
<meta name="robots" content="nosnippet">

<!-- Googleにだけ指示する -->
<meta name="googlebot" content="noindex">

nameを「robots」にするとすべての検索エンジンに、「googlebot」にするとGoogleにだけ指示が伝わります。

noindexは、問い合わせ完了のページや社内向けのページなど、検索から人を呼ぶ必要がないページに使います。

noindexとnofollowの違いは、noindexとnofollowの記事もご覧ください。

meta robotsは、検索結果に出したくないページにだけ書くタグと覚えましょう。

種類④｜meta viewportでスマホの表示を整える

meta viewportは、スマホなどのモバイル端末で、ページをどの幅で表示するかをブラウザに伝えるタグです。

Googleは、このタグによって、ページがモバイルに対応していることがわかると説明しています。

書き方はweb.devの解説で紹介されている「width=device-width, initial-scale=1」が基本で、画面の幅に合わせて等倍で表示させます。

最近のテーマやテンプレートには最初から入っていることが多いものの、古い自作のページでは抜けていることがあります。

viewportは全ページ共通の部分に書き、スマホの実機で表示を確かめましょう。

種類⑤｜meta charsetで文字化けを防ぐ

meta charsetは、ページの文字コードをブラウザに伝えるタグです。

指定した文字コードと、実際のファイルの保存形式が食い違うと、日本語が読めない記号に化けて表示されます。

Googleは、可能な場合はUnicode（UTF-8）を使うことを勧めています。

書く場所は、headのできるだけ先頭に近いところにし、titleより前に置くのが一般的です。

charsetはUTF-8で指定し、ファイルの保存形式もUTF-8にそろえましょう。

種類⑥｜OGPでSNSでの見え方を整える

OGP（Open Graph protocol）は、ページがSNSでシェアされたときに表示される、タイトルや画像、説明文を指定する仕組みです。

公式サイトでは、すべてのページに必要な基本の項目として、og:title・og:type・og:image・og:urlの4つが挙げられています。

To turn your web pages into graph objects, you need to add basic metadata to your page.

（ウェブページをグラフのオブジェクトにするには、ページに基本のメタデータを追加する必要があります。）

引用元：The Open Graph protocol

OGPは検索順位のためのタグではありませんが、シェアされたときの見え方は、クリックされるかどうかに関わります。

また、Googleはタイトルリンクを作る情報の1つにog:titleも挙げているため、titleと大きく食い違う内容にしないようにします。

Xのように独自のタグを持つSNSもあるため、使うSNSの開発者向けの案内もあわせて確かめましょう。

OGPは、シェアされやすい記事やサービスのページから優先して整えましょう。

Googleが読むタグ・無視するタグ｜meta keywordsは必要？

Googleは、公式ドキュメントで、サポートしているメタタグと、サポートしていないタグを分けて公開しています。

どのタグに時間をかけるべきかは、この一覧を見れば判断できます。

区分①｜Googleがサポートしているタグ

Googleがサポートしているとしているmetaタグは、description、robotsとgooglebot、viewport、charsetなどです。

このほか、翻訳版を表示させないnotranslate、読み上げを止めるnopagereadaloud、Search Consoleの所有権の確認に使うgoogle-site-verificationがあります。

アダルトの内容を含むページに付けるratingは、セーフサーチの結果から外すためのラベルです。

一定時間のあとに別のURLへ移すrefreshもサポートされていますが、Googleはサーバー側の301リダイレクトを勧めています。

SEOのために中身を考えるタグは、title・description・robotsの3つが中心です。

区分②｜サポート外で無視されるタグ

一方で、Google検索ではサポートされず、書いても無視されるタグも挙げられています。

代表的なのがmeta keywordsで、ほかにhtmlタグのlang属性や、ページ送りに使われていたrel=”next”とrel=”prev”などがあります。

lang属性は、Google検索がページの言語を本文から判断するため、検索では使われないとされています。

ただし、lang属性はほかのプログラムが使うこともあるため、Google検索で使われないからといって外す必要はありません。

サポート外のタグは、順位のために足したり消したりする必要はないと考えましょう。

判断①｜meta keywordsは順位に影響しない

meta keywords（メタキーワード）は、ページの内容を表すキーワードを、カンマで区切って並べるタグです。

「meta keywords」は月210回、「メタキーワード」は月140回検索されており、今も書くべきか迷う方が多いテーマです。

meta-keyword タグは Google 検索では使用されないため、インデックス登録やランキングにはまったく影響しません。

引用元：Google検索セントラル「Google がサポートしている meta タグと属性」

古い解説では、キーワードの数や並べ方の決まりが紹介されていることがありますが、Google検索の順位のために書く意味はありません。

meta keywordsは、Google検索の順位のために新しく書く必要はありません。

判断②｜すでにあるmeta keywordsの扱い

古いサイトやテンプレートでは、meta keywordsが全ページに入ったままになっていることがあります。

Google検索では使われないタグなので、それだけを理由に急いで消す必要はありません。

ただし、ページのソースは誰でも見られるため、狙っているキーワードを競合に知らせる一覧になっている点には注意が必要です。

CMSやテンプレートで一括で外せるなら、サイトを直すタイミングでまとめて外すのが、手間の少ない方法です。

既存のmeta keywordsは、テンプレートを直すついでに外すくらいの優先度で十分です。

判断③｜KWはtitle・見出し・本文で伝える

検索してほしい言葉をGoogleに伝えたいなら、meta keywordsではなく、title・見出し・本文の中で、読む人に向けて自然に使います。

Googleは、titleに具体的なキーワードをいくつか含めると効果的な場合がある一方で、同じ語句を何度も繰り返すキーワードの乱用は避けるよう説明しています。

弊社では、リスティング広告の検索語句レポートで、実際に問い合わせにつながった言葉を確かめ、titleや見出しの言葉選びに生かすことをおすすめしています。

広告とSEOの組み合わせ方は、リスティング広告とSEOを併用するメリットで解説しています。

KWは、タグに並べるのではなく、ページの中身で伝えましょう。

メタタグの設定方法｜HTML・WordPress・Wix

メタタグの設定方法は、サイトをどう作っているかで変わります。

Googleも、CMSを使っている場合は、HTMLを直接編集しなくても、検索設定のページなどが用意されていると案内しています。

設定①｜HTMLを直接編集する

HTMLを直接編集できるサイトでは、各ページのheadの中に、メタタグを1行ずつ書き足します。

基本の形は、次のようになります。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページの中身を表すタイトル｜会社名</title>
  <meta name="description" content="ページの要約を文章で書く">
  <meta property="og:title" content="ページのタイトル">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.co.jp/page/">
  <meta property="og:image" content="https://example.co.jp/ogp.png">
</head>

charsetやviewportのように全ページで同じタグは、共通のテンプレートに1回書けば済みます。

titleとdescriptionはページごとに中身が変わるため、テンプレートに固定の文を書かないように注意します。

共通のタグはテンプレートに、ページごとのタグは各ページに書き分けましょう。

設定②｜WordPressはテーマとSEOプラグインで設定する

WordPressでは、多くのテーマがtitle要素を自動で出力し、投稿のタイトルとサイト名を組み合わせて表示します。

WordPress本体には、ページごとにdescriptionを入力する欄がないため、テーマの機能か、SEOプラグインの入力欄を使います。

あわせて確かめたいのが、管理画面の「設定」＞「表示設定」にある「検索エンジンでの表示」の項目です。

ここにチェックを入れると、サイトのheadに「noindex,nofollow」のmeta robotsが出力されると、WordPressの公式ドキュメントで説明されています。

制作中にチェックを入れたまま公開すると、サイト全体が検索結果に出なくなるため、公開の前後で確かめましょう。

WordPressは、SEOプラグインの入力欄と、表示設定のチェックの両方を確かめましょう。

設定③｜Wixは「SEO ベーシック」で設定する

Wixでは、エディタ左側の「ページ・メニュー」から、ページの横の「その他のアクション」を開き、「SEO ベーシック」を選びます。

「タイトルタグ（検索結果のタイトル）」と「メタディスクリプション（検索結果の説明文）」に入力し、エディタ右上の「公開」をクリックすると反映されます。

手順は、Wixのヘルプセンター「ページに SEO タイトルタグとメタディスクリプションを追加する」で確かめられます。

ペライチやJimdoなどほかのCMSにも、同じような入力欄が用意されていることが多いため、各サービスのヘルプで場所を確かめます。

CMSでは、HTMLを触らずに、用意された入力欄から設定しましょう。

設定④｜JavaScriptでの挿入や書き換えは控える

タグマネージャーやJavaScriptを使えば、あとからメタタグを差し込むこともできます。

ただし、Googleはこの方法に慎重な姿勢を示しています。

JavaScript を使用して meta タグを挿入または変更することを検討している場合は、慎重に行ってください。JavaScript による meta タグの挿入や変更は可能な限り控えることをおすすめします。

引用元：Google検索セントラル「Google がサポートしている meta タグと属性」

どうしても使う場合は、Googleが実際に読み取ったHTMLにタグが入っているかを、次の章のURL検査で確かめます。

メタタグは、できるだけHTMLに直接出力される形で設定しましょう。

メタタグが正しく入っているかの確認方法

メタタグは画面に出ないため、書いたつもりでも、実際には出力されていないことがあります。

次の4つの方法で、ページに入っているか、Googleに届いているかを順に確かめます。

確認①｜ブラウザでページのソースを見る

いちばん手軽なのは、ブラウザでページのソースを表示する方法です。

Chromeなら、ページの上で右クリックして「ページのソースを表示」を選ぶか、URLの前に「view-source:」を付けて開きます。

開いたら、ページ内検索で「<title」「description」「robots」と探すと、すぐに見つかります。

同じタグが2つ出力されていないか、テンプレートの初期値のままになっていないかも、あわせて見ておきます。

まずはソースを開き、title・description・robotsの3つが意図どおりかを見ましょう。

確認②｜Search ConsoleのURL検査で確かめる

Googleは、ページのメタタグと属性の確認に、Search ConsoleのURL検査ツールを使えると案内しています。

URL検査にページのURLを入れ、「クロール済みのページを表示」を開くと、Googleが読み取ったHTMLを確かめられます。

タグを直した直後なら、「公開 URL をテスト」で今のページを読み込ませると、修正後のHTMLを見られます。

Search Consoleの基本は、Google Search Consoleについてで解説しています。

JavaScriptで出しているタグは、URL検査でGoogleから見えているかを確かめましょう。

確認③｜インデックス登録のレポートでnoindexを探す

サイト全体でnoindexが付いたページを探すには、Search Consoleの「ページのインデックス登録」レポートが便利です。

インデックスに登録されなかった理由の一覧に、noindexタグによる除外が出ていれば、そのページにnoindexが付いています。

意図して付けたページか、制作中の設定が残っただけなのかを、URLの一覧で見分けます。

全ページの確認や、直す順番の判断まで手が回らない場合は、カルテットのSEOコンサルティングでもご相談を承っています。

noindexによる除外は、意図したページかどうかを一覧で見分けましょう。

確認④｜SNSでのシェアの見え方を確かめる

OGPは、実際にSNSにURLを貼ってみると、タイトルや画像がどう表示されるかを確かめられます。

公開のアカウントで試しにくい場合は、社内のアカウントや投稿の下書きの画面で、URLを貼ったときの表示を見ます。

SNSによっては、一度読み取った情報を保存しているため、OGPを直してもすぐには表示が変わらない場合があります。

OGPを直したら、使っているSNSで実際の表示を確かめましょう。

メタタグのよくある間違いと直し方

メタタグの間違いはページの見た目には出ないため、気づかないまま残りがちです。

よく見かける5つの間違いと、公式ドキュメントに沿った直し方をまとめます。

間違い①｜全ページで同じtitleとdescriptionを使っている

テンプレートに固定の文が入っていて、全ページのtitleやdescriptionが同じになっているケースです。

Googleは、すべてのページで同じ説明や似た説明を使っても、個々のページが検索結果に表示されたときに役に立たないとしています。

すべてのページを書き分ける余裕がない場合は、トップページやよく見られるページなど、重要なページから書き始めます。

同じ文が並んでいたら、重要なページから順に書き分けましょう。

間違い②｜公開後もnoindexが残っている

テスト環境や制作中のサイトに付けたnoindexが、公開後も残っているケースです。

WordPressの「検索エンジンでの表示」のチェックや、テンプレートに直接書いたmeta robotsが原因になります。

新しいページが検索結果に出てこないときは、まずソースでrobotsのタグを探しましょう。

公開の前後で、noindexが残っていないかをソースとSearch Consoleで確かめましょう。

間違い③｜robots.txtで止めたページにnoindexを書く

検索結果から外したいページを、robots.txtでクロールさせないようにしたうえで、noindexも書いているケースです。

クローラーがこの設定を読み取り、それに従って動作できるのは、この設定を含むページへのアクセスを許可されている場合のみです。

引用元：Google検索セントラル「Robots meta タグ、data-nosnippet、X-Robots-Tag の指定」

robots.txtで止めると、Googleはページを読めないため、noindexの指示にも気づけません。

Googleは、ほかのサイトからのリンクで見つかったページは、クロールを止めていてもインデックスに登録されることがあると説明しています。

検索結果から外したいページは、クロールを許可したうえでnoindexを書きましょう。

間違い④｜descriptionにキーワードを並べる

descriptionに、狙っているキーワードを読点で区切って並べているケースです。

Googleは、長い文字列のキーワードで作ったdescriptionは、ページの内容がユーザーに伝わらず、スニペットとして表示される可能性が低くなると説明しています。

誰に向けた、どんな内容のページかを、文章で短くまとめるほうが、検索した人にも伝わります。

descriptionは、キーワードの一覧ではなく、ページの要約として書きましょう。

間違い⑤｜meta refreshで別のURLへ転送する

ページを移したときに、meta refreshで数秒後に新しいURLへ移す設定をしているケースです。

Googleは、meta refreshは一部のブラウザでサポートされず、ユーザーを混乱させる可能性があるとして、サーバー側の301リダイレクトを勧めています。

サーバーの設定やCMSのリダイレクトの機能を使って、恒久的な移転として転送します。

ページの移転には、meta refreshではなく301リダイレクトを使いましょう。

メタタグのよくある質問

最後に、メタタグについてよく挙がる疑問に、Googleの公式ドキュメントをもとに答えます。

社内で設定の方針を話し合うときの材料としてもお使いください。

質問①｜descriptionは何文字で書けばいい？

Googleは、meta descriptionの長さに制限はないとしたうえで、検索結果では端末の幅などに合わせて切り詰められると説明しています。

そのため、決まった文字数に合わせるより、伝えたい要点を前半に置き、途中で切れても意味が通じる書き方にするのが現実的です。

descriptionは文字数より、前半で要点が伝わるかを優先しましょう。

質問②｜書いたtitleが検索結果にそのまま出ないのはなぜ？

Googleは、title要素が部分的に空、古い、ページの内容と合わないなどの問題を見つけると、見出しやページ内の文字から、タイトルリンクを作り直すことがあります。

書いたtitleがそのまま出ないときは、titleとページの大見出しが食い違っていないか、全ページ共通の定型文になっていないかを見直します。

titleが書き換えられたら、ページの大見出しとの食い違いから見直しましょう。

質問③｜メタタグを直したら、いつ反映される？

Googleがタイトルリンクの元になる情報の変更を反映するには、ページの再クロールと再処理が必要で、数日から数週間かかることがあると説明されています。

急ぐページは、Search ConsoleのURL検査から、インデックス登録をリクエストして再クロールを依頼できます。

直したページは、URL検査から再クロールを依頼して反映を待ちましょう。

質問④｜メタタグはbodyに書いても効く？

Googleは、meta robotsについては、bodyに書かれていても尊重すると説明しています。

ただし、メタタグはheadに追加するものとされているため、ほかのタグも含めてheadに書くのが基本です。

メタタグは、例外に頼らずheadにまとめて書きましょう。

質問⑤｜AIによる概要にもメタタグは関係する？

Googleの説明では、meta robotsのnosnippetは、AIによる概要やAIモードを含む、すべての形式の検索結果に適用されます。

nosnippetを付けたページの内容は、AIによる概要やAIモードの直接の入力としても使われないとされています。

AI検索で紹介されたいページに、nosnippetやmax-snippetの制限を付けていないかを、あわせて確かめておきましょう。

AI検索で使われたいページは、スニペットを止めるタグがないかを確かめましょう。

質問⑥｜大文字と小文字は区別される？

Googleは、google-site-verificationを除き、metaタグでは基本的に大文字と小文字は区別されないとしています。

Search Consoleの所有権の確認に使うgoogle-site-verificationだけは、発行された値を、大文字と小文字も含めてそのまま貼り付けます。

所有権の確認のタグだけは、コピーした値を一字も変えずに貼りましょう。

まとめ｜メタタグはGoogleが使うものを正しく書けば十分

メタタグは、数を増やすほど良いものではなく、Googleが使うタグを、ページごとに正しく書くことが大切です。

まずは主要なページのtitle・description・robotsを、ソースとSearch Consoleで確かめ、気になる点から直してみてください。

メタタグの見直しを含めて、サイト全体の改善の進め方に迷う方は、カルテットコミュニケーションズのSEOコンサルティングの無料相談もご活用ください。

検索広告の検索語句やCVのデータもあわせて、どのページから手を付けるとよいかを一緒に整理します。