この記事はAhrefs公式ブログの日本語訳です。
原文：Meta Tags for SEO: A Simple Guide for Beginners
（著者：Joshua Hardwick / 原文の最終更新日：September 29, 2020）
※フルスピード註：この記事は2020年9月29日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
メタタグは、検索エンジンに検索結果での表示方法など、ウェブページに関する重要な情報を伝えるコードの小片です。また、ウェブブラウザに対して、そのページをどのように表示するかを指示します。
すべてのウェブページにはメタタグがありますが、HTMLコードにのみ表示されます。
このガイドでは、SEOに最も重要な6つのメタタグの使い方、そして使ってはいけないことを学びます：
Meta title（メタ タイトル）
Googleをはじめとするほとんどの検索エンジンが、検索結果に表示するページタイトルです。
注：Googleは常にタイトルタグを表示するわけではありません。違うものを表示することもあります。
SEO対策として重要な理由
Googleが一番よく説明しています：
タイトルは、ユーザーに検索結果の内容や検索結果との関連性を素早く伝えるために重要です。どの検索結果をクリックするかを決定するための主要な情報源となることが多いので、ウェブページには高品質のタイトルを使用することが重要です。
ベストプラクティス
- 各ページにユニークなタイトルタグをつける。
- 簡潔でありながら、説明的であること。
- 一般的で曖昧なタイトルは避ける。
- 文の大文字とタイトルの小文字を使い分ける。
- クリックベイトではなく、クリックに値するものを作る。
- 検索意図と一致させる。
- ターゲットとなるキーワードを意味ある場所に含める。
- 60文字以内に収める。
おすすめの記事：完璧なSEOタイトルタグを作成する方法（4ステップで解説）
ページにタイトルタグを付ける方法
以下のコードをページの<head>セクションに貼り付けます：
<title>This is the title of the page.</title>
WordPressを使用している場合は、YoastのようなSEOプラグインをインストールしてください。ページや投稿のエディターにタイトルタグを設定する場所が表示されるはずです。
SquarespaceやWixなど他のCMSにも、同様の機能が内蔵されています。
よくあるタイトルタグの間違いの見つけ方と直し方
タイトルタグに共通する問題点は4つあります：
- 長すぎる／短すぎる。Googleは、”不必要に長い、または冗長なタイトルを避ける “一方で、”説明的で簡潔なタイトル “を保つように言っています。
- タイトルが存在しない。Googleは、すべてのページにtitleタグをつけるべきとしています。
- 1つのページに複数のtitleタグがある。1つのページに複数のタイトルタグがある場合、検索エンジンは好ましくないタイトルタグを表示することがあります。
- 複数のページでタイトルが重複している。Googleは、”サイトの各ページに明確で説明的なタイトルをつけることが重要です。”と言っています。
最初の2つの問題に対してページをチェックするには、SERPSimのような無料ツールにURLを差し込んでください。
タイトルを引き直さないのであれば、タイトルを追加する必要があります。
画素長カウントが赤の場合は、短縮が必要です。
タイトルタグの重複や複数を確認するには、AhrefsのSite Auditでサイトをクロールしてください。
そこから、On page reportで「Multiple title tag」のエラーがないか確認します：
該当するページのタグを1つ削除することで、これらを解決します。
次に、「重複コンテンツ」レポートで、「Bad duplicate」エラーのあるタイトルタグを探します：
影響を受けたページのタイトルタグを書き換えて、ユニークなものにしてください。
なお、この同じレポートでは、タイトルタグが長すぎるか短すぎる、見つからない、または空であるページも表示されます。
Meta description（メタ ディスクリプション）
meta descriptionは、ページの内容を要約したものです。検索エンジンは、検索結果のスニペットによく使用します。
注：Googleは、設定したmeta descriptionを常に表示するわけではありません。時には違うスニペットを表示することもあります。
SEO対策として重要な理由
Googleがまたまた最高の説明をしています：
meta descriptionタグは、一般的に、特定のページが何についてのものであるかを短く関連性のある要約でユーザーに知らせ、興味を持たせる必要があります。メタディスクリプションは、そのページがまさにユーザーが求めているものであることを納得させる、宣伝文句のようなものです。
しかし、メタディスクリプションは、直接的なランキング要因ではありません。Googleはこう言っています：
表示するスニペットにdescription metaタグを使うことはあっても、ランキング要因にdescription metaタグを使うことはまだありません。
ベストプラクティス
- 各ページにユニークな説明文を書く。
- 内容を正確に要約するように心がける。
- 一般的な説明は避ける。
- 文末の大文字と小文字を使い分ける。
- クリックベイトではなく、クリックする価値のあるものを作成する。
- 検索意図に沿うようにする。
- ターゲットとなるキーワードを意味あるところに含める。
- 160文字以内に収める。
おすすめの読み物：完璧なメタディスクリプションを効率的に書く方法
ページにmeta descriptionを追加する方法
以下のコードをページの<head>セクションに貼り付けます：
<meta name="description" content="Place the meta description text here.">
WordPressをお使いの方は、Yoastで簡単にできます。
SquarespaceやWixなどの他のCMSも同様の機能を備えています。
よくあるmeta descriptionの間違いの見つけ方と直し方
メタディスクリプションに共通する4つの問題点は、タイトルタグと同じです：
- 長すぎる／短すぎる。Googleは、”meta descriptionの長さに制限はないが、検索結果のスニペットは必要に応じて切り捨てられ、通常はデバイスの幅に合わせる “と述べています。
- 存在しない。Googleは、”サイト内のすべてのページにmeta descriptionがあることを確認する “と言っています。
- 1つのページに複数のmeta descriptionがある。複数のタグは検索エンジンを混乱させる可能性があります。
- 複数のページでmeta descriptionが重複している。Googleは、”異なるページのディスクリプションを区別するべき”だと言っています。
最初の2つのエラーは、SERPSimやYoastを使ってページ単位でチェックしましょう。
AhrefsのSite Auditでウェブサイトをクロールし、On page reportですべてのページで最初の3つのエラーがないかを確認します。
重複コンテンツレポートで、ページ間でメタディスクリプションが重複していないか確認してください。
タイトルタグと同じように修正しましょう。
Meta robots（メタ ロボット）
meta robotsタグは、検索エンジンがあなたのウェブページをクロールするかどうか、どのようにクロールするかを指示します。
Syntax
<meta name=”robots” content="index, follow">
SEO対策として重要な理由
meta robotsタグの属性を間違えると、検索結果におけるあなたのサイトの存在感に壊滅的な影響を与える可能性があります。SEO対策はこのタグを理解し、効果的に使用することにかかっています。
それを踏まえて、このタグで使用できる値を紹介します：
- index：ボットにインデックスさせるように指示します。
- noindex：ボットにページをインデックスさせないように指示します。
- follow：ボットにそのページのリンクをクロールするように指示し、あなたもそのリンクを保証することを指示します。
- nofollow：ボットにページ上のリンクをクロールしないように指示し、保証を意味しないことを示します。
これらの組み合わせは、次のいずれかの方法で行うことができます：
<meta name=”robots” content=”noindex, nofollow”>
<meta name=”robots” content=”index, follow”>
<meta name=”robots” content=”noindex, follow”>
<meta name=”robots” content=”index, nofollow”>
また、<meta name=”robots” content=”none”>を設定することで、noindex, nofollowと同じになります。meta robotsタグを設定しないのも、index, followと同じです。
注：Googleは「nofollow」タグを指示ではなく、ヒントとして見ています。他にも、noarchive、noimageindex、nosnippetなどの属性があります。しかし、これらはより高度な値であるため、この記事で話すつもりはありません。
ベストプラクティス
- meta robotsタグは、Googleがページをクロールする方法を制限したい場合にのみ使用してください。
- robots.txtでmeta robotsタグのあるページをブロックしないでください。
合わせて読みたい記事：ロボットのメタタグとX-Robots-Tag：あなたが知るべきすべてのこと
ページにmeta robotsタグを追加する方法
上記の適切なコードを、ページの<head>セクションに貼り付けます。
WordPressでは、Yoastの詳細設定を使って、meta robotsタグを設定します：
ほとんどのCMSには、同様のオプションが組み込まれています。
よくあるmeta robotsのミスを診断し、修正する方法
meta robotsのよくある間違いは3つあります：
- robots.txtによってブロックされたnoindexedページ。これにより、Googleはnoindex robotsタグを見ることができないので、そのURLをインデックスする可能性があります。
- 不正なmeta noindex。Googleがページをインデックスするのを防ぐため、そのページからオーガニックトラフィックを得ることはできません。
- 不正なmeta nofollow。これは、Googleがページ上のリンクをクロールすることを妨げるので、重要なコンテンツの発見とインデックスを妨げる可能性があります。また、そのページへのPageRankの流入も妨げられるため、好ましくない場合があります。
最初の2つの問題は、Google Search Consoleのカバレッジレポートで確認することができます。
meta robots noindexに設定されている可能性のあるインデックスされたページを見つけるには、「Valid with warnings」タブをクリックし、「Indexed, though blocked by robots.txt」警告を探せばよいでしょう：
インデックスさせるべきページからrobots metaタグを削除してください。
不正なmeta robots nofollowタグを持つページを見つけるには、AhrefsのSite Auditでサイトをクロールし、Indexabilityレポートで「Nofollow page」の警告がないか確認しましょう。
特に、検索エンジンにページ上のリンクをクロールさせたくない場合は、このタグを削除してください。
注：サイトマップにnoindexタグを持つページがあるなど、この記事でカバーされていない問題が他にもいくつかあります。そういった問題については、AhrefsのSite AuditにあるIndexabilityレポートをご覧ください。
Meta viewport（メタ ビューポート）
meta viewportタグは、ウェブページの表示領域を設定します。デスクトップ／タブレット／モバイルなど、異なる画面サイズでのページの表示方法を、ブラウザに指示するために使用されます。
SEO対策として重要な理由
Googleは、”このタグの存在は、そのページがモバイルフレンドリーであることをGoogleに示す “と述べています。2015年現在、Googleはモバイル検索結果において、モバイルフレンドリーなウェブページを上位にランク付けしているため、これは重要です。
meta viewportタグがある場合とない場合のモバイルでのページの見え方は、以下の通りです：
多くの人は、デスクトップ版のページがモバイルで読み込まれると、「戻る」ボタンを押すのではないでしょうか。煩わしいし、読みづらいからです。これはGoogleにネガティブなシグナルを送り、あなたのページに何か望ましくないものがあることを伝える可能性があります。
注：ウェブサイトをモバイルフレンドリーにするために必要なのは、viewportタグだけではありません。ウェブサイトはレスポンシブデザインを活用することも必要です。
ベストプラクティス
- すべてのウェブページでmeta viewportタグを使用してください。
- “standard”タグは、自分が何をしているのかがわからない限り使用すること（下記参照）。
Meta viewportタグをページに追加する方法
以下のコードをウェブページの<head>セクションに貼り付けます：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
なお、content属性は必ずしもwidth=device-width, initial-scale=1.0である必要はありませんが、これが最も一般的な実装であり、ほとんどのページで正しい実装となります。
Meta viewportのよくある間違いを診断して修正する方法
ほとんどのCMSやテーマが自動的にビューポートを設定するため、最近のウェブサイトではタグに関連する問題は珍しいことではありません。
とはいえ、Google Search Consoleの「モバイルユーザビリティ」レポートを使って問題を確認することは可能です。
モバイル端末での使い勝手に問題があるページを表示します。この問題がviewport metaタグの欠如に一部でも起因する場合、「Viewport not set」エラーが表示されます。
この問題を解決するには、該当するページに適切なmeta viewportタグを追加してください。
重要
meta viewportタグを追加しても、CSSスタイルが異なる幅に対して記述されていないことに起因する、根本的なモバイル表示の問題は解決しません。meta viewportタグを追加しても解決しない場合は、開発者に相談してください。
では、Google Search Consoleを使用しない場合は？
Meta viewportは、ほとんどの場合、サイトレベルで設定され、通常はテーマにハードコーディングされています。
Googleのモバイルフレンドリーテストツールを使って、ホームページにmeta viewportタグがあるかどうかを確認しましょう。
タグがホームページにない場合は、おそらくサイトの他の場所にもないでしょう。
なお、これは完全な方法とは言い難く、可能であれば常にGoogle Search Consoleを使用する必要があります。
Meta charset（メタ キャラセット）
meta charsetタグは、ウェブページの文字エンコーディングを設定します。つまり、ウェブページのテキストがどのように表示されるかをブラウザに伝えます。
キャラセット（文字セット）は何百種類もありますが、ウェブでよく使われるのはこの2つです：
- UTF-8 – Unicode用の文字エンコーディングです。
- ISO-8859-1 – ラテンアルファベットの文字エンコーディングです。
全リストはこちらからご覧ください。
SEO対策として重要な理由
間違った文字コードを使用すると、ブラウザで一部の文字が正しく表示されないことがあります。
文字書式の問題はユーザーエクスペリエンスに悪影響を及ぼし、ページがかなり崩れて見える原因になることがあります。
以下のようなSEO上の問題が発生する可能性があります：
- あなたのページにリンクを貼りたがらない人が増える可能性。
- 直帰率が高くなったり、ページ滞在時間が短くなったりする。
- 検索エンジンがあなたのコンテンツを理解しなくなる。
しかし、これについては現実的に考えてみましょう：
文字コードの問題でページが大きく崩れるようなことがない限り、影響は極めて小さいと思われます。
それでも、Googleは可能な限りUnicode/UTF-8を使用することを推奨していることは注目に値します。
ベストプラクティス
- すべてのウェブページでmeta charsetタグを使用する。
- 可能であれば、UTF-8を使用する。
- HTMLのバージョンに応じた正しい構文を使用する（下記参照）。
ウェブページにmeta charsetタグを追加する方法
以下のコードをウェブページの<head>セクションに貼り付けます：
<meta charset="UTF-8">
HTML4以下をお使いの場合は、代わりにこのコードをお使いください：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
どのバージョンのHTMLを使用しているかわからない場合は、ソースコードに<!doctype html>があるかどうかを確認してください。それがあれば、あなたはHTML5を使用しています。
よくあるmeta charsetの間違いを診断して修正する方法
ほとんどのウェブサイトでは、UTF-8またはISO-8859-1のいずれかの文字エンコーディングが使用されています。
前者は後者に比べて好ましい設定です。
そのため、サイト内でUTF-8エンコードを使用していないページがあるかどうかを確認する価値があります。これは、Ahrefsのサイト監査で行うことができます。ページエクスプローラーに移動し、以下の設定を使用しましょう：
検索で結果が返ってきた場合は、文字コードに問題がないか、それぞれを手動で確認してください。
可能であれば、UTF-8エンコーディングに切り替えてください。それで問題が解決する場合もありますが、必ずしもそうではありません。しかし、meta charsetを全く設定しない場合、ブラウザは推測せざるを得なくなり、ユーザーにゴミのようなテキストを表示する可能性があります。
Meta refresh redirect（メタ リフレッシュ リダイレクト）
meta refreshタグは、一定時間後にユーザーを別のURLにリダイレクトするようウェブブラウザに指示します。
SEO対策として重要な理由
Meta refresh redirectタグは、Googleが理解し尊重しているにもかかわらず、使用しない方が良いという意味で、SEO上重要です。
これにはいくつかの理由があります：
- すべてのブラウザでサポートされているわけではありません。
- ユーザーを混乱させる可能性があります（セキュリティ上の懸念もあります）。
- ページが目的地のURLを表示するまでに解析が必要で、時間がかかることがあります。
また、ページ上にcanonicalタグが存在しない場合にも、問題が発生する可能性があることを、John Mueller氏がこのツイートで説明しています：
301 or 302 is essentially just a question of which URL is canonical, that can go either way here, so make sure your other canonicalization methods reflect the way you want it to go.
— johnmu likes 🥚 staplers 🥚 (@JohnMu) March 2, 2018
ベストプラクティス
- 絶対に必要な場合を除き、meta refreshリダイレクトタグは避けてください；
- 代わりに301リダイレクトを使用します。
Meta refresh redirectタグをページに追加する方法（本当に必要な場合のみ）
以下のコードをページの<head>セクションに貼り付けます：
<meta http-equiv="refresh" content="5;url="https://example.com/">
content 属性は、遅延時間を秒単位で指定する。URL属性は、リダイレクトURLを指定する。
Meta refresh redirectのよくあるミスを見つけ、修正する方法
meta refresh redirectは悪い習慣なので、可能な限り削除するのがベストです。
それらを見つけるには、AhrefsのSite Auditでサイトをクロールし、Internal pages reportを確認します。「Meta refresh redirect」エラーを探してください。
可能な限り301または302リダイレクトに置き換えてください。
ない場合は、canonicalタグの存在を確認し、canonicalバージョンのページを参照していることを確認してください。
Meta keywords（メタ キーワード）はどうでしょうか？
meta keywordsタグにターゲットキーワードのリストを記入するようにという記事もあります。これは無意味であり、潜在的に悪いアドバイスです。Googleは2009年以降、ランキングにmeta keywordsを使用していないからです：
（前略）keywordsメタタグは、一般的な訪問者がそのキーワードを目にすることなく、すぐにしばしば関連性のないキーワードを詰め込むことができる領域となってしまいました。keywordsメタタグがあまりにも悪用されたため、何年も前にGoogleはkeywordsメタタグを無視するようになりました。
2011年、Bingはさらに一歩進んで、このタグをスパムシグナルとして使用することを発表しました。つまり、もしあなたの記事がキーワードで埋め尽くされているとしたら、それはBingでは不利に働く可能性があるのです。
このため、安全策をとって、meta keywordsタグをサイトから削除するのがベストです。
そのためには、AhrefsのSite Auditでサイトをクロールし、Page Explorerにこれらの設定を差し込みます：
一致するページからmeta keywordsタグを削除してください。
なお、多くのサイトでは、CMSでサイト全体のmeta keywordsタグを設定しているため、これらのタグを削除するのは簡単です。すべてのページからタグを削除するには、その1つのコードを削除すればよいのです。
おすすめの読み物：メタキーワード：それらはどういうもので、現在でも使うべきものか？
まとめ
メタタグはそれほど複雑ではありません。上記の6つのタグを理解すれば、SEOの重大な失敗を防ぐのに十分でしょう。
metaタグについてもっと知りたいですか？これなら大丈夫です。
ソーシャルメディアからのトラフィックを最大化したいとお考えですか？オープングラフのメタタグについてお読みください。
この記事で見逃しているものがあれば、Twitterでお声がけください。
著者プロフィール
Joshua Hardwick
Ahrefs のコンテンツ責任者（わかりやすく言うと、私たちが公開するすべてのブログ記事が壮大であることを保証する責任者です）。
