この記事の要点:
- メタタグ(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-verification | Search 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要素に直接貼ったときに起こりやすい失敗です。次の順番を目安にすると、読み取りの問題を避けやすくなります。
- charset(文字コードは最初に)
- viewport
- title
- description・robots
- canonical・hreflangなどのlink要素
- OGPなどSNS向けのmeta要素
- 計測用のscriptやスタイルシート(imgやiframeはbody要素へ)
canonicalのlink要素も、head要素の中にあるときだけ受け付けられます。body要素の中に書かれたcanonicalは無視されます。正規URLの考え方は「canonicalの書き方と301との使い分け」で説明しています。
同じ種類のタグが2つあるときにも注意が必要です。robotsのように指示が食い違う場合、Googleはより制限の強い指示に従います。canonicalが複数あると、指定が無視されることがあります。
ページの種類ごとに何を設定するか
すべてのページに同じ設定を出力するのではなく、ページの役割に合わせて決めます。次の表は、ブログ型のサイトでの例です。
| ページの種類 | description | robots | canonical |
|---|---|---|---|
| トップページ | サイト全体で何が分かるかを要約 | 指定なし | トップ自身 |
| 記事ページ | その記事が答える問いを要約 | 指定なし | 記事自身 |
| カテゴリーの一覧(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を見て確かめます。次の順で進めると、出力の誤りと重なりを見つけやすくなります。
- ページのソースを見る:ブラウザで「ページのソースを表示」を開き、「<meta」で検索します。サーバーが最初に返したHTMLが分かります。
- コマンドで数える:ターミナルで、主なタグがいくつ出力されているかを数えます。1ページに1つのはずのタグが2以上なら、出力が重なっています。
- レンダリング後のHTMLを見る:ブラウザの開発者ツールの「Elements」は、JavaScriptで書き換えた後の状態を表示します。ソースと違う場合は、どちらが正しい値かを確かめます。
- Search ConsoleのURL検査を使う:「クロール済みのページを表示」で、Googleが取得したHTMLを確かめます。noindexでインデックスされていない場合は、ページの状態として表示されます。
- 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を確かめ、題名と説明文を見直す手がかりにできます。


