日本語 English(Home)

メタタグとは?SEOで必要なタグと書き方

メタタグは画面に表示されないため、誤りや重なりに気づきにくい部分です。Googleが使うタグと使わないタグ、SEOで点検する4つのタグの書き方、Googleが読まなくなるhead要素の書き方、WordPressでの設定と確かめる手順を整理します。

メタタグとは?SEOで必要なタグと書き方

この記事の要点:

  • メタタグ(meta要素)は、HTMLのhead要素の中に書き、ページの説明や検索エンジンへの指示をブラウザや検索エンジンに伝えるタグです。画面には表示されません。
  • Googleが使うメタタグは、公式の一覧にあるものだけです。一覧に無いタグは無視されます。meta keywordsは、Googleの検索順位に使われていません。
  • SEOで点検するのは、主にdescription・robots・viewport・charsetの4つです。titleはtitle要素、canonicalやhreflangはlink要素ですが、同じhead要素の中にあるので一緒に確かめます。
  • head要素の中にimgやiframeなど置けない要素があると、Googleはそれより後ろの要素を読みません。robotsやcanonicalが効かない原因になります。
  • 設定したら、ページのソース・レンダリング後のHTML・Search ConsoleのURL検査の3つで、意図どおりに出力されているか、同じタグが重なっていないかを確かめます。

メタタグとは:head要素でページの情報を伝えるタグ

メタタグとは、HTMLの<meta>要素のことです。ページの文字コード、スマートフォンでの表示のしかた、検索結果に使う説明文、検索エンジンへの指示(インデックスしない、など)を、name属性とcontent属性の組で書きます。

メタタグはhead要素の中に書き、ページの本文には表示されません。読み手は、ページを表示するブラウザと、ページを読み取る検索エンジンやSNSなどのサービスです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>メタタグとは|サイト名</title>
  <meta name="description" content="ページの内容を1〜2文で要約した文。">
  <link rel="canonical" href="https://example.com/blog/meta-tags/">
</head>

上は説明用の例です。SEOの解説では、titleやcanonicalも「メタタグ」とまとめて呼ばれることがあります。しかしHTMLでは別の要素です。役割と、どの記事で詳しく説明しているかを表にまとめます。

要素書き方の例役割詳しい説明
meta要素<meta name=”description” …>説明文、検索エンジンへの指示、表示の設定この記事
title要素<title>…</title>ページの題名。検索結果のタイトルリンクの主な材料タイトルの記事
link要素<link rel=”canonical” …>正規URLや言語ごとのページなど、別のURLとの関係を示すcanonical・hreflangの記事
OGPのmeta要素<meta property=”og:title” …>SNSで共有されたときの表示OGPの記事

この記事では、meta要素の全体像と、head要素をまとめて点検する方法を説明します。題名と説明文の文章の書き方はタイトルタグとメタディスクリプションの書き方、SNSでの表示はOGPの設定と表示の確かめ方に任せます。

Googleが使うメタタグと、使わないメタタグ

Googleは、検索で使うメタタグを公式の一覧で示しています。一覧に無いメタタグは無視されると説明しています(Google 検索セントラル:Google がサポートしているメタタグと属性)。主なものを、SEOでの扱いとあわせて整理します。

メタタグ役割Googleでの扱い
descriptionページの短い要約検索結果の説明文(スニペット)に使われることがある
robots・googlebotクロールやインデックス、表示のしかたへの指示noindexやnosnippetなどの指示に従う。googlebotはGoogleだけに向けた指示
viewportスマートフォンでの表示の幅の指定モバイル端末に対応したページかを判断する手がかりの1つ
charset(Content-Type)ページの文字コード文字コードの判定に使う。UTF-8が勧められている
notranslate翻訳の案内を出さない指定検索結果で翻訳を提供しない
google-site-verificationSearch Consoleの所有権の確認トップページに置いて確認に使う。値の大文字と小文字は区別される
rating成人向けの内容であることの表示セーフサーチでの絞り込みに使う
refresh一定時間後に別のURLへ移す認識はするが、転送にはサーバー側の301を使うよう勧めている
keywordsページのキーワードの列挙検索順位にもインデックスにも使われない

meta keywordsについて、Googleは2009年に「ウェブ検索の順位には使っていない」と公式ブログで説明しました(Google 検索セントラル ブログ:Google はウェブ検索のランキングに keywords メタタグを使用していません)。現在の一覧でも、使わないタグとして扱われています。書いても害はありませんが、Googleの検索のために時間をかける必要はありません。メタタグ以外も含めて、Google が使わないタグや属性はSEOに関係するHTMLタグ一覧で確かめられます。

以前は、サイトリンク検索ボックスを出さないためのnositelinkssearchboxというタグもありました。機能そのものが終わったため、Googleはこのタグを使っていません。古いテーマやプラグインが出力していても影響はありませんが、点検の際に「何のためのタグか」を知っておくと、整理するときに迷いません。

author・generator・revisit-afterなどは、Googleの一覧に載っていません。ほかのサービスやツールが読むことはあっても、Googleの検索には使われないものとして扱います。

SEOで点検する4つのメタタグの書き方

description:ページごとに違う要約を書く

descriptionは、検索結果の説明文の候補です。Googleは、検索した語句に対してページ本文の一部の方が合っていると判断すると、本文から説明文を作ります。そのため、descriptionは「必ず表示される文」ではなく「ページの要約として使ってほしい文」と考えます。

点検で見るのは、空になっていないか、全ページで同じ文になっていないか、本文の内容と合っているかの3点です。

robots:インデックスと表示の指示

robotsのメタタグでは、インデックスしない(noindex)のほかに、検索結果での表示を細かく指示できます。

指示意味使う場面の例
noindex検索結果に表示しない例:記事の無い一覧、サイト内検索の結果ページ
nofollowページ内のリンクをたどらない例:自分で内容を確かめられないリンクだけが並ぶページ
nosnippet説明文や動画のプレビューを出さない例:本文の一部が検索結果に出ると困るページ
max-snippet:[数]説明文の最大の文字数を指定する説明文を短く抑えたいページ
max-image-preview:[none/standard/large]画像のプレビューの大きさを指定する大きな画像のプレビューを出したい、または出したくないページ
unavailable_after:[日時]指定した日時より後は表示しない例:期間が決まった告知のページ

何も書かない場合は「インデックスしてよい、リンクをたどってよい」として扱われます。そのため、index, followとわざわざ書く必要はありません。noindexの使い分けと確認の手順は「noindexの書き方と使い分け」にまとめています。

viewport:スマートフォンでの表示

viewportは、スマートフォンでページを画面の幅に合わせて表示するための指定です。多くの場合は、width=device-width, initial-scale=1を書きます。拡大を禁止する指定(user-scalable=noなど)は、文字を大きくして読みたい人の妨げになるため、理由が無ければ入れません。

charset:文字コード

charsetは、ページの文字コードを伝える指定です。Googleは、Unicode(UTF-8)を使うよう勧めています。サーバーが返すHTTPヘッダーの文字コードと、ページ内の指定が食い違うと文字化けの原因になります。head要素の先頭近くに書きます。

head要素の書き順と、Googleが読まなくなる書き方

Googleは、head要素が正しいHTMLで書かれていることを前提に読み取ります。head要素に置けない要素(imgやiframeなど)が途中にあると、Googleはそこでhead要素が終わったものとみなし、それより後ろの要素を無視すると説明しています(Google 検索セントラル:有効なページメタデータを使用する)。

<!-- 例:問題のある書き方 -->
<head>
  <title>…</title>
  <img src="/tracking.gif" alt="">   ← head要素に置けない要素
  <meta name="robots" content="noindex">   ← 読まれない
  <link rel="canonical" href="https://example.com/page/">   ← 読まれない
</head>

この例では、noindexもcanonicalも効きません。計測用のタグや外部のサービスの埋め込みを、テーマのhead要素に直接貼ったときに起こりやすい失敗です。次の順番を目安にすると、読み取りの問題を避けやすくなります。

  1. charset(文字コードは最初に)
  2. viewport
  3. title
  4. description・robots
  5. canonical・hreflangなどのlink要素
  6. OGPなどSNS向けのmeta要素
  7. 計測用のscriptやスタイルシート(imgやiframeはbody要素へ)

canonicalのlink要素も、head要素の中にあるときだけ受け付けられます。body要素の中に書かれたcanonicalは無視されます。正規URLの考え方は「canonicalの書き方と301との使い分け」で説明しています。

同じ種類のタグが2つあるときにも注意が必要です。robotsのように指示が食い違う場合、Googleはより制限の強い指示に従います。canonicalが複数あると、指定が無視されることがあります。

ページの種類ごとに何を設定するか

すべてのページに同じ設定を出力するのではなく、ページの役割に合わせて決めます。次の表は、ブログ型のサイトでの例です。

ページの種類descriptionrobotscanonical
トップページサイト全体で何が分かるかを要約指定なしトップ自身
記事ページその記事が答える問いを要約指定なし記事自身
カテゴリーの一覧(1ページ目)そのカテゴリーで扱うテーマを要約指定なし。記事が1本も無い間はnoindex一覧自身
一覧の2ページ目以降1ページ目と同じでもよい指定なしそのページ自身(1ページ目にしない)
サイト内検索の結果不要noindex不要
問い合わせの完了ページ不要noindex不要
公開前の確認用サイト不要noindexより、パスワードなどで閲覧を制限する方が確実不要

多言語のサイトでは、言語ごとのページの対応をhreflangで示します。書き方と確かめ方は「hreflangの設定方法」で説明しています。

設定する方法:WordPressとHTML

WordPressでは、メタタグをテーマとSEOプラグインのどちらかが出力していることがほとんどです。両方が同じタグを出していると、descriptionやrobotsが2つずつ並びます。設定画面だけでは気づけないため、必ず出力されたHTMLで確かめます。

方法向いている場面注意点
SEOプラグイン記事ごとにdescriptionやnoindexを入力したいテーマ側の出力と重ならないか確かめる。プラグインを替えると設定が引き継がれない場合がある
テーマの設定・テンプレートcharsetやviewportなど、全ページ共通のタグテーマの更新で変更が消えないよう、子テーマで管理する
HTMLを直接書く静的なサイト、少ないページテンプレートを共通にし、ページごとの値(description・canonical)を書き忘れない
JavaScriptで書き換えるアプリのように画面を切り替えるサイト最初のHTMLにnoindexがあると、Googleはページの描画を省くことがある。後から外しても読まれないおそれがある

JavaScriptでメタタグを変える作りでは、最初に返すHTMLの段階で正しい値を出すのが確実です。noindexについて、Googleは、最初のHTMLにnoindexがあると描画やJavaScriptの実行を省く場合があると説明しています。

設定されているかを確かめる手順

メタタグは画面に表示されないため、HTMLを見て確かめます。次の順で進めると、出力の誤りと重なりを見つけやすくなります。

  1. ページのソースを見る:ブラウザで「ページのソースを表示」を開き、「<meta」で検索します。サーバーが最初に返したHTMLが分かります。
  2. コマンドで数える:ターミナルで、主なタグがいくつ出力されているかを数えます。1ページに1つのはずのタグが2以上なら、出力が重なっています。
  3. レンダリング後のHTMLを見る:ブラウザの開発者ツールの「Elements」は、JavaScriptで書き換えた後の状態を表示します。ソースと違う場合は、どちらが正しい値かを確かめます。
  4. Search ConsoleのURL検査を使う:「クロール済みのページを表示」で、Googleが取得したHTMLを確かめます。noindexでインデックスされていない場合は、ページの状態として表示されます。
  5. HTTPヘッダーを見る:robotsの指示は、X-Robots-TagとしてHTTPヘッダーで送ることもできます。HTMLに無いのにインデックスされない場合は、ヘッダーを確かめます。
# 主なタグの数を数える(例)
$ curl -s https://example.com/blog/meta-tags/ 
  | grep -oiE '<meta name="(description|robots|viewport)"|<link rel="canonical"' 
  | sort | uniq -c
      1 <link rel="canonical"
      1 <meta name="description"
      2 <meta name="robots"     ← 2つ出力されている
      1 <meta name="viewport"

# HTTPヘッダーのrobotsの指示を見る
$ curl -sI https://example.com/blog/meta-tags/ | grep -i x-robots-tag

属性の順番や書き方(引用符の種類など)によっては、上の検索に当たらないことがあります。数が0のときは、ソースを開いて目で確かめます。

当サイト(seoagent.jp)で点検した項目

当サイト(seoagent.jp)では、head要素の点検を、ページの反映のたびに行う確認に組み込んでいます。これまでに見つけて直した例は次のとおりです。

  • 日本語記事9本のtitleが、運用上の基準の40字を超えていました。主キーワードを前に出して40字以内にし、自動の確認で40字を超えるものが0件であることを確かめています。
  • 記事一覧のページのcanonicalが、多言語プラグインとの組み合わせで、存在しないURLを指していました。canonicalをページ自身のURLに直す処理を加え、全ページのcanonicalが自分自身を指すことを確かめています。
  • 記事がまだ無い一覧ページはnoindexにし、XMLサイトマップからも外しています。
  • 翻訳がある日本語と英語のページの組だけにhreflangを出し、ページのHTMLで確認しています。

どれも画面を見ているだけでは気づけない問題でした。テーマやプラグインの更新後は、HTMLの出力を確かめる習慣をおすすめします。メタタグと関わるテクニカルSEOの記事は「テクニカルSEOの記事一覧」にまとめています。

よくある質問

meta keywordsは削除したほうがよいですか?

Googleの検索では使われないため、残しても削除しても検索での扱いは変わりません。テーマやプラグインが出力していて管理の手間になるなら、止めてかまいません。ほかの検索エンジンやサイト内の仕組みで使っている場合は、そちらの説明を確かめます。

descriptionを書いたのに、検索結果に別の文が表示されます。

Googleは、検索した語句に合わせて本文の一部から説明文を作ることがあります。検索語によって表示が変わるのはそのためです。descriptionが本文の内容と合っているか、ページごとに違う文になっているかを見直します。

meta refreshでページを転送してもよいですか?

サーバーの設定を変えられない場合の手段としては使えます。ただしGoogleは、転送にはサーバー側の301リダイレクトを使うよう勧めています。設定の方法は301リダイレクトの書き方と確認方法を参照してください。

メタタグを直したら、すぐに検索結果に反映されますか?

Googleがページをもう一度クロールしたあとに反映されます。かかる時間はページによって異なります。急ぐ場合は、Search ConsoleのURL検査でインデックス登録をリクエストできます。

SEOAGENTでできること

SEOAGENTでは、作成した記事をタイトル・本文・画像・カテゴリ・タグ・スラッグを設定して、接続したWordPressへ公開・予約できます。公開前の確かめでは「公開ページの設定」などの確認項目を示します。メタタグそのものの出力は、WordPressのテーマやプラグインの設定によります。公開後は、記事ごとの表示回数やクリック、CTRを確かめ、題名と説明文を見直す手がかりにできます。

参考情報

関連する記事

「テクニカルSEO」の記事をすべて見る →

クロールバジェットとは:Googleの説明と、気にすべきサイト・しなくてよいサイト
テクニカルSEO

クロールバジェットとは:Googleの説明と、気にすべきサイト・しなくてよいサイト

クロールバジェットは、多くのサイトでは気にする必要がありません。Google の「クロール バジェットの管理」の原文に沿って、決まる仕組み、対策が必要なサイトの目安、クロールの統計情報での確かめ方、クロールを無駄にする原因と対処を、当サイトの点検結果とあわせて説明します。

AIでSEO対策を、もっと続けやすく。

機能と使い方、料金・契約条件は、サービス資料でご案内します。