「メタタグはSEOのためのタグだから、思いつくものを全部書いておけば検索で有利になりそう」。メタタグはページのHTMLにいくつでも足せて、書いても画面の見た目は変わらないため、多めに書いても損はないと思われがちです。ところが、Googleがサポートしているメタタグは9種類で、meta keywordsのようにGoogleが使わないと明記しているタグは、書いても無視されます。メタタグは、9種類の中からページに要るものだけを選んで書き、Googleが受け取ったHTMLで届いたかを確かめるものです。
本記事では、メタタグの意味から、Googleが対応する9種類の役割と、よく使うメタタグの書き方と例文、設定した後の確認方法まで、記事制作とSEO対策を手がける会社の視点で順を追ってお伝えします。
- メタタグは、ページの情報を検索エンジンやブラウザに伝えるためにHTMLのheadに書くタグで、画面には表示されない
- Googleがサポートしているメタタグは9種類で、meta keywordsのようにGoogleが使わないと明記しているタグは無視される
- 多くのページに書くのはcharset・viewport・descriptionの3つで、robotsは検索結果に出したくないページだけに書く
- 書いたメタタグがGoogleに届いたかは、Search ConsoleのURL検査ツールで確かめる
メタタグとは
メタタグとは、ページの情報を検索エンジンやブラウザに伝えるために、HTMLの<head>の中に書くタグのことです。メタタグに書いた中身は、ページの画面に表示されません。
メタタグを受け取った検索エンジンやブラウザは、自分が対応しているメタタグだけを処理し、対応していないものは無視します。
WordPressなどのCMSでは、HTMLを直接書かず、管理画面の検索の設定などの欄からメタタグの中身を入力します。
メタタグにSEO効果はあるか
メタタグのSEO効果は、検索順位を直接上げることではなく、検索結果での見え方と、ページを検索結果に出すかどうかをGoogleに伝えることにあります。Googleの公式ドキュメントも、サポートしているメタタグを、インデックス登録を制御するためのタグとして説明しています。
検索からの訪問数に関わるのは、descriptionの説明文が検索結果に使われたときです。Googleは、質の高い説明文は検索トラフィックの質と量の改善に大いに役立つ可能性があるとしています。
経営者古いページに、meta keywordsのタグでキーワードがたくさん書いてあります。消したほうがいいですか？
Writers-hub編集部
消しても問題はありませんが、急いで消す必要もありません。Googleはmeta keywordsを使わないので、残しても消しても検索順位は変わらないためです。手直しの時間は、よく見られるページのdescriptionを、ページの中身に合わせて書き分けるほうに回してください。
Googleが検索で使わず、書いても無視すると明記しているタグと属性は、meta keywordsを含めて次の4つです。
- meta keywords：インデックス登録にもランキングにも影響しない
- htmlタグのlang属性：ページの言語は本文のテキストから判断される
- rel属性のnextとprev：インデックス登録に影響しない
- nositelinkssearchbox：対象の機能が無くなり使われていない
順位より先に気を付けたいのは、noindexの入れ間違いです。robotsのメタタグにnoindexと書いたページは、Googleがページをクロールできる限り、検索結果に表示されません。公開前の確認用に入れたnoindexを外し忘れると、公開したページが検索から見つからなくなります。
Googleが対応する9種類のメタタグ
Googleがサポートしているメタタグは、公式ドキュメント「Google がサポートしている meta タグと属性」に挙がっている次の9種類です。
メタタグ | 伝える内容 | 書くページ |
|---|---|---|
description | ページの内容の要約 | ほぼすべてのページ |
robots・googlebot | 検索結果に出すか、ページ上のリンクをたどるか | 検索結果に出したくないページ |
notranslate | 検索結果で翻訳版を出さないこと | 翻訳されると困るページ |
nopagereadaloud | Googleの読み上げサービスで読み上げないこと | 読み上げを止めたいページ |
google-site-verification | Search Consoleでの所有権の確認 | HTMLタグで所有権を確認するときのトップページ |
Content-Type・charset | ページの文字コード | すべてのページ |
refresh | 一定時間後に別のURLへ移すこと | 書かずに301リダイレクトを使う |
viewport | スマートフォンでの表示幅 | すべてのページ |
rating | アダルトコンテンツを含むこと | アダルトコンテンツを含むページ |
多くのページに書くのは、次の3つです。
- charset（文字コード）
- viewport（表示幅）
- description（説明文）
robotsなど残りの6種類は、表の右の列に当てはまるページだけに書きます。refreshは一部のブラウザで動かないため書かず、Googleが勧めるサーバー側の301リダイレクトを使います。
メタタグの書き方と例文
メタタグは、HTMLの<head>の中に1つずつ書きます。多くのメタタグは、name属性にタグの種類を、content属性に中身を書く形です。多くのページに書く3つのメタタグを<head>にまとめると、次のようになります。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ページの内容を要約した説明文">
</head>charset（文字コード）
charsetは、ページの文字コードをブラウザや検索エンジンに伝えるメタタグです。Googleは、可能な場合はUnicodeのUTF-8を使うよう勧めています。書いた文字コードと、HTMLファイルを保存した文字コードが違うと、ページが文字化けします。
<meta charset="utf-8">古いテンプレートでは、文字コードをhttp-equivで指定していることがあります。http-equivで書くときは、content属性の値を引用符で囲みます。囲まないと、charsetが正しく読まれないことがあるためです。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">viewport（表示幅）
viewportは、スマートフォンでページをどの幅で表示するかをブラウザに伝えるメタタグです。Googleは、viewportがあることで、ページがモバイルに対応していると分かるとしています。
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-widthは、端末の画面の幅に合わせて表示する指定です。viewportの無いページは、スマートフォンで縮小して表示され、文字が読みにくくなります。拡大を止めるmaximum-scaleやuser-scalableは使いません。Googleの公式ドキュメントが案内するweb.devの解説は、ユーザーが画面を拡大できなくなり、アクセシビリティの問題が起きるおそれがあるとしています。
description（説明文）
descriptionは、ページの内容を要約した説明文を書くメタタグです。Googleは、本文よりページを正確に説明できると判断したとき、descriptionの説明文を検索結果のスニペット（タイトルの下に出る説明文）に使うことがあります。
<meta name="description" content="ページの内容を要約した説明文">説明文の長さに上限はなく、長い説明文は検索結果で画面の幅に合わせて切り詰められます。Googleは、ページごとに違う説明文を書き、全ページに書けないときは、少なくともトップページとよく見られるページに書くよう勧めています。スニペットに使われにくいのは、キーワードを並べただけの説明文です。文字数の目安と書く手順は、meta descriptionの書き方と文字数をご覧ください。
robots（インデックス登録の制御）
robotsは、ページを検索結果に出すかどうかと、ページ上のリンクをたどるかどうかを、検索エンジンに指示するメタタグです。何も書かなければ、検索結果に出してリンクもたどる扱いになるので、検索結果に出したくないページだけに書きます。
<meta name="robots" content="noindex">検索結果に出さず、リンクもたどらせないときは、content属性を「noindex, nofollow」にします。name属性がrobotsならすべての検索エンジン、googlebotならGoogleだけが対象です。noindexを使う場面と効かないときの原因は、noindexの書き方と設定方法で扱っています。
robots.txtでページのクロールを止めていると、Googleはページを読めないため、noindexも読まれません。ほかのサイトからリンクされていれば、ページが検索結果に出ることもあります。noindexを効かせたいページは、robots.txtでクロールを止めないでください。
google-site-verification
google-site-verificationは、Googleのサイト管理ツールであるSearch Consoleで、サイトの所有権を確認するためのメタタグです。所有権の確認方法に「HTMLタグ」を選ぶと表示される1行を、ログインしなくても見られるトップページの<head>に貼ります。
<meta name="google-site-verification" content="Search Consoleに表示された値">name属性とcontent属性の値は、大文字と小文字も含めて表示されたとおりに書きます。Search Consoleは確認の後もタグの有無を定期的に確かめるので、確認が済んでもタグは消しません。HTMLファイルのアップロードやDNSレコードなど、別の方法で所有権を確認するなら、google-site-verificationは要りません。
メタタグを確かめる2つの方法
書いたメタタグは、ブラウザでページのソースを見る方法と、Search ConsoleのURL検査ツールでGoogleが受け取ったHTMLを見る方法の2つで確かめます。検索結果の説明文は検索語ごとに作られ、本文から作られることも多いため、検索結果を見ても、書いたdescriptionが届いたかは分かりません。
ページのソースの表示
ページのソースの表示で確かめられるのは、サーバーが返したHTMLに、書いたメタタグが入っているかです。Chromeなら、ページの上で右クリックして「ページのソースを表示」を選ぶと、HTMLが別のタブで開きます。開いたタブで「meta」を検索すると、メタタグの行が見つかります。
ページを表示した後にJavaScriptで入れたメタタグは、ページのソースには出ません。
URL検査ツール
URL検査ツールでは、Googleがページを取得したときのHTMLと、ページを検索結果に出せる状態かを確かめます。調べられるのは、Search Consoleで所有権を確認したサイトのURLだけです。Googleは、JavaScriptでメタタグを入れたり書き換えたりするのを可能な限り控え、使うなら十分にテストするよう勧めています。JavaScriptでメタタグを入れているサイトでは、Googleが読み取れたかをURL検査ツールで確かめます。
ページの公開後にURL検査ツールでメタタグを確かめる手順は、次の4つです。
Search Consoleを開き、画面上部の検査検索バーに、確かめたいページのURLを省略せずに入力します。最初に表示されるのは、Googleが前回インデックスに登録したときの情報です。
「公開URLをテスト」をクリックすると、Googleが今のページを取得してテストします。メタタグを書き換えた直後は、公開URLのテストで確かめます。ログインしないと開けないページはテストできません。
「テスト済みのページを表示」をクリックし、表示されたHTMLの中で、書いたメタタグの行を探します。
テスト結果の「インデックス登録を許可？」の欄で、noindexでインデックス登録を止めていないかを確かめます。「いいえ」なら、ページがnoindexのタグかヘッダーを返していて、検索結果に表示されません。robots.txtでクロールを止めているページは、noindexがあっても「はい」と表示されます。
メタタグはCMSのテンプレートから全ページに出力されることが多いため、1ページで抜けや入れ間違いが見つかったら、同じテンプレートを使うほかのページも1つ開いて確かめます。
メタタグを直した後、サイト全体で次に直すところは決まっていますか
「滋賀のSEO対策」では、1か月目にサイトの現状の分析と設計を行い、2か月目から実行に移ります。オンラインで全国に対応しています。
メタタグのよくある質問
メタタグについてよく聞かれる3つの質問に答えます。
titleタグもメタタグに入る？
titleタグは、メタタグではなく、<head>に書く別の要素です。ただ、検索結果に出るタイトルリンクの材料になるため、メタタグと一緒に設定します。Googleは、すべてのページに<title>でページのタイトルを付け、具体的で分かりやすい言葉で書くよう勧めています。titleの書き方は、titleとdescriptionの書き方をご覧ください。
OGPのタグは書かなくていい？
OGPのタグは、SNSでページが共有されたときのタイトルや画像を指定するメタタグで、Googleのサポート一覧には入っていません。Googleは、一覧にないメタタグも、サイトに必要なら使ってよいとしています。
SNSで共有してもらいたいページには、OGPのタグを書きます。Googleも、og:titleの中身を、検索結果のタイトルリンクを決める材料の1つに挙げています。書き方は、OGPのタグの書き方と公開前の確認手順で扱っています。
メタタグを直したら検索結果はいつ変わる？
検索結果は、Googleがページを再びクロールして処理するまで変わりません。Googleはタイトルリンクについて、元になるtitleなどの更新を認識するまでに、数日から数週間かかることがあると説明しています。急ぐときは、URL検査ツールで「インデックス登録をリクエスト」をクリックすると、クロールを頼めます。リクエストを送っても、すぐに検索結果に反映されるとは限りません。
まとめ｜メタタグは書く数より選んで確かめる
メタタグは、ページの情報を検索エンジンやブラウザに伝えるためにHTMLの<head>に書くタグで、Googleがサポートしているのは9種類です。多くのページに書くのは3つのメタタグで、robotsは検索結果に出したくないページだけに書きます。書いた後は、Search ConsoleのURL検査ツールで、Googleが受け取ったHTMLにメタタグが入っているかを確かめます。
私たち合同会社Writers-hubは、「滋賀のSEO対策」として、現状の分析と設計から実行、毎月の報告と見直しまでを月額で請け負っています。
サイトの現状の分析から実行まで、任せられる先を探していませんか
「滋賀のSEO対策」は月額20万円〜（税別・6か月〜）です。オンラインで全国に対応し、彦根市とその周辺は訪問もできます。
