メタタグは、検索エンジンにWebページの情報を正しく伝え、ユーザー体験を向上させるための重要な要素です。ただ、適切な設定方法や設定することで得られる効果を知らないと、効果が出ない上に無駄な知識を身につけることになります。
そもそも、メタ（meta）タグとはWebページに関する情報を検索エンジンやブラウザに伝えるためのHTMLタグです。いわば、Webページの「裏方」として、ページの内容や表示方法などを伝達するする役割を担っています。具体的な種類としては以下のような種類があります。
| タグ | SEO への影響 |
|---|---|
| meta descriptionタグ | クリック率向上に繋がり、間接的にSEOに影響。 |
| titleタグ | 適切なキーワードを含めることで、検索順位やクリック率に影響。 |
| meta robotsタグ | ページのインデックスやリンクの評価方法を制御し、SEOに大きく影響。 |
| canonicalタグ | 重複コンテンツの問題を回避し、SEO評価を集中させる。 |
| nofollowタグ | リンク先のページへの評価の受け渡しを制御し、SEOに影響。 |
| noindexタグ | 検索結果に表示させたくないページに設定し、SEOに影響。 |
| Open Graphタグ (og:) | SNSでの拡散を促進し、間接的にSEOに影響。 |
| meta viewportタグ | モバイルフレンドリー性を高め、SEOに影響。 |
| meta charsetタグ | 文字化けを防ぎ、ユーザー体験を向上させ、間接的にSEOに影響。 |
| 構造化データ | リッチスニペット表示の可能性を高め、クリック率向上に繋がる |
メタタグにはさまざまな種類があり、SEOへ与える影響もさまざまです。この記事では、メタタグの基本的な知識から、SEO効果を高めるための具体的な設定方法、さらには設定後の確認方法までを網羅的に解説します。
- メタタグの基本的な概念とSEOにおける重要性を理解する
- SEO対策に効果的な主要なメタタグの種類と具体的な設定方法を学ぶ
- HTMLファイルへの直接記述とCMSを利用した設定方法を比較検討する
- 設定したメタタグが正しく反映されているかを確認する方法を習得する
これを読めば、メタタグの役割と重要性を理解し、効果的なSEO対策を実践できるようになるでしょう。この記事を通してメタタグの知識を深め、WebサイトのSEO対策を成功に導きましょう。
SEO記事発注にお悩みの方は、
一度弊社の「SEO記事の品質」を見てから発注してみてはいかがでしょうか？
クオリティーに自信があるからこその、身を削ったご提案になります。
※法人様限定のキャンペーンです
メタ（meta）タグの前提知識
メタ（meta）タグとは？
メタ（meta）タグとは、Webページに関する情報を検索エンジンやブラウザに伝えるためのHTMLタグです。いわば、Webページの「裏方」として、ページの内容や表示方法などを指示する役割を担っています。メタタグのイメージとしては以下の通りです。
SEOの中でも有名なものには、以下のようなものがあります。
- titleタグ
- meta descriptionタグ
- noindexタグ
- nofollowタグ
例えば、検索結果に表示されるページタイトルや説明文、検索結果への表示をさせないようにするタグなどさまざまです。これらの情報は、ユーザーのクリック率やWebサイトへの訪問者数に大きく影響するため、SEO対策において非常に重要です。
メタタグは、Webページのソースコード内に記述され、直接コンテンツとして表示されることはありません。しかし、検索エンジンやブラウザはメタタグの情報を読み取り、Webページの評価や表示方法を決定します。
メタタグを設置する場所
メタタグは、HTML文書の <head> タグ内に設置します。 <head> タグは、Webページのタイトル、文字コード、外部ファイルの読み込みなど、Webページに関する様々な情報を記述するセクションです。
<head> タグは <body> タグの前に記述します。メタタグの種類によっては、記述する順番が重要になる場合があり、正しく記述しないと、検索エンジンやブラウザがWebページの内容を正しく理解できなくなる可能性があります。
SEO対策で押さえるべきメタタグ一覧
メタタグは多岐に渡りますが、SEO対策において特に重要なものを紹介します。それぞれのタグの役割と効果的な活用方法を理解し、Webサイトの最適化に役立てましょう。
| タグ | SEO への影響 |
|---|---|
| meta descriptionタグ | クリック率向上に繋がり、間接的にSEOに影響。 |
| titleタグ | 適切なキーワードを含めることで、検索順位やクリック率に影響。 |
| meta robotsタグ | ページのインデックスやリンクの評価方法を制御し、SEOに大きく影響。 |
| canonicalタグ | 重複コンテンツの問題を回避し、SEO評価を集中させる。 |
| nofollowタグ | リンク先のページへの評価の受け渡しを制御し、SEOに影響。 |
| noindexタグ | 検索結果に表示させたくないページに設定し、SEOに影響。 |
| Open Graphタグ (og:) | SNSでの拡散を促進し、間接的にSEOに影響。 |
| meta viewportタグ | モバイルフレンドリー性を高め、SEOに影響。 |
| meta charsetタグ | 文字化けを防ぎ、ユーザー体験を向上させ、間接的にSEOに影響。 |
| 構造化データ | リッチスニペット表示の可能性を高め、クリック率向上に繋がる |
タグ①｜meta descriptionタグ
meta descriptionタグは、検索結果のスニペットに表示されるページの概要を記述するためのタグです。適切なdescriptionを設定することで、ユーザーのクリック率向上に繋がります。
meta descriptionタグの効果的な書き方としては以下のとおりです。
- ページの内容を簡潔に要約する
- 検索キーワードを含める
- ユーザーの興味を引くような表現を使う
- 文字数は120〜156文字程度に収める
記載例としては以下の通りです。
<meta name="description" content="メタ（meta）タグとは？SEO対策に効果的な書き方や設定方法を解説。メタタグにはさまざまな種類があり、SEOへ与える影響もさまざまです。この記事では、メタタグの基本的な知識から、SEO効果を高めるための具体的な設定方法、さらには設定後の確認方法までを網羅的に解説します。">▼関連記事
【例文付き】Meta discription（メタディスクリプション）とは？SEOへの効果や文字数や書き方を解説。
タグ②｜titleタグ
titleタグは、Webページのタイトルを指定するタグです。検索結果のタイトルやブラウザのタブに表示され、SEOにおいて非常に重要な要素です。
titleタグの効果的な書き方として押さえるべきポイントは以下の通りです。
- ページの内容を的確に表す
- 検索キーワードを含める
- 魅力的なタイトルにする
- 文字数は30〜60文字程度に収める
記載例としては以下の通りです。
<title>メタ（meta）タグとは？SEO対策に効果的な書き方や設定方法を解説。</title>▼関連記事
SEO記事のtitle(タイトル)タグの文字数は32文字｜効果的タイトルの付け方は？
タグ③｜meta robotsタグ
meta robotsタグは、検索エンジンのクローラーに対する指示を記述するタグです。クローラーの挙動を制御し、Webページのインデックスやリンクの追跡を管理できます。似たような用語にrobots.txtがありますが、こちらはサイト全体に対して指示を与えるのに対してmeta robotsタグはページ単位でクローラーに指示を与えるタグです。
| 設定値 | 説明 |
|---|---|
| index | ページをインデックスに登録する（デフォルト） |
| noindex | ページをインデックスに登録しない |
| follow | ページ内のリンクを辿る（デフォルト） |
| nofollow | ページ内のリンクを辿らない |
| all | index, followと同じ |
| none | noindex, nofollowと同じ |
| noarchive | ページをキャッシュに保存しない |
| nosnippet | 検索結果にスニペットを表示しない |
| noimageindex | ページ内の画像を画像検索にインデックスしない |
| unavailable_after | 指定した日時以降、ページをインデックスから削除する |
<meta name="robots" content="noindex, nofollow"> ▼関連記事
robots.txtとは？基本的な書き方と確認方法について解説。
タグ④｜canonicalタグ
canonicalタグは、重複コンテンツの問題を解消するために、正規URLを指定するタグです。複数のURLで同じコンテンツにアクセスできる場合、検索エンジンはどのURLを優先的に表示すべきか判断に迷うことがあります。
重複ページまたは非常に類似したページの正規 URL を指定する場合、いくつかの方法で Google 検索に優先事項を伝えられます。正規化に対する効果が高い順に、以下の方法があります。
- リダイレクト: リダイレクト先が正規ページになるべきことを強く示すシグナルです。
linkアノテーション: 指定された URL が正規ページになるべきことを強く示すシグナルです。- サイトマップに含める: サイトマップに含まれる URL が正規ページになることを示しますが、シグナルとしては弱いものです。
これらの方法を組み合わせて使用するとより効果的です。 2 つ以上の方法を使用すると、希望する正規 URL が検索結果に表示される可能性が高くなるということです。
引用元：rel=”canonical” などを利用して正規ページを指定する方法 | Google 検索セントラル
canonicalタグを使用することで、正規URLを明示し、検索エンジンによる評価の分散を防ぎます。
<link rel="canonical" href="https://www.example.com/canonical-page/"> タグ⑤｜nofollowタグ
nofollowタグは、リンク先のページに対する評価の受け渡しを拒否する指示を検索エンジンに伝えるためのタグです。
リンクにその他の適切な値がなく、そのリンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合は、nofollow の値を使用します。
引用元：Google検索セントラル『Google に外部リンクの関係性を伝える』
もう少し砕いて伝えると検索エンジンのクローラーに対して特定のリンクを辿らないよう指示するタグです。
<a href="https://www.example.com/" rel="nofollow">nofollowリンク</a> ▼関連記事
nofollow属性とは？SEO上の効果や設定方法と確認方法について解説。
タグ⑥｜noindexタグ
noindexタグは、検索エンジンに対して、該当ページをインデックスしないように指示するためのメタタグです。
ページやその他のリソースが Google 検索に表示されないようにするには、
引用元：noindex を使用してコンテンツをインデックスから除外する | Google 検索セントラルnoindex（ノーインデックス）ディレクティブを活用します。noindexディレクティブは、<meta>タグまたは HTTP レスポンス ヘッダーで設定されるルールで、サポートしている検索エンジン（Google など）に対してコンテンツをインデックスから除外してもらうために使用されます。
検索結果に表示させたくないページや、重複コンテンツなどを管理する際に利用します。
<meta name="robots" content="noindex">▼関連記事
noindexタグとは｜SEOでの効果と書き方、確認方法について解説。
タグ⑦｜Open Graphタグ (og:)
Open Graphタグは、SNSでWebページをシェアした際に、タイトルや画像、説明文などを適切に表示するためのタグです。SNSでの拡散を促進し、Webサイトへの流入増加に貢献します。
| タグ名 | 説明 |
|---|---|
| og:title | ページのタイトル |
| og:description | ページの説明文 |
| og:image | ページの代表画像 |
| og:url | ページのURL |
| og:type | ページの種類（ウェブサイト、記事、動画など） |
| og:site_name | Webサイト名 |
<meta property="og:title" content="SEO対策の基本と最新情報｜初心者から上級者まで">
<meta property="og:description" content="SEO対策の基本から応用、最新情報まで網羅した解説記事。初心者から上級者まで役立つ情報が満載です。">
<meta property="og:image" content="https://www.example.com/images/seo.jpg">
<meta property="og:url" content="https://www.example.com/seo-guide/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="SEO情報サイト">タグ⑧｜meta viewportタグ
meta viewportタグは、Webページをスマートフォンなどの様々なデバイスで適切に表示するための設定を指定するタグです。レスポンシブWebデザインの実装に必須であり、ユーザー体験の向上に貢献します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">タグ⑨｜meta charsetタグ
meta charsetタグは、Webページの文字コードを指定するタグです。文字化けを防ぎ、ユーザーがWebページを正しく閲覧できるようにします。
<meta charset="UTF-8">タグ⑩｜構造化データ
構造化データは、Webページの情報を検索エンジンが理解しやすい形式で記述するためのマークアップです。検索結果にリッチスニペットを表示させたり、音声検索に対応したりするなど、SEO効果を高めることができます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEO対策の基本と最新情報",
"author": {
"@type": "Person",
"name": "SEO太郎"
},
"datePublished": "2023-11-20",
"image": "https://www.example.com/images/seo.jpg"
}
</script>メタ（meta）タグを設置することで得られるSEO効果
メタタグは、SEO対策において2つの主要な効果を発揮します。
- 効果①｜クローラーへの情報伝達
- 効果②｜ユーザーエクスペリエンスの向上
効果①｜クローラーへの情報伝達
検索エンジンのクローラーは、Webページを巡回し、その内容を理解しようとします。メタタグは、クローラーに対してWebページの情報を伝える役割を果たします。
例えば、titleタグはページのタイトルを、descriptionタグはページの概要をクローラーに伝えます。これらの情報は、検索結果に表示されるタイトルやスニペットに利用されるため、適切に設定することでクリック率の向上に繋がります。
効果②｜ユーザーエクスペリエンスの向上
メタタグは、ユーザーがWebページを快適に利用するための情報も提供します。例えば、viewportタグは、Webページをスマートフォンなどの様々なデバイスで適切に表示するための設定を指定します。charsetタグは、Webページの文字コードを指定し、文字化けを防ぎます。
これらの設定は、ユーザーの利便性を高め、結果としてWebサイトへの滞在時間増加や直帰率の低下に繋がり、SEO評価の向上に貢献します。
メタ（meta）タグの設定方法と書き方
メタタグは、Webページの<head>タグ内に記述します。設定方法には、主に2つの方法があります。
- 効果①｜クローラーへの情報伝達
- 効果②｜ユーザーエクスペリエンスの向上
それぞれ詳しく見ていきましょう。
方法①｜HTMLファイルに直接記述
HTMLファイルに直接メタタグを記述する場合は、<head>タグ内に記述します。<head>タグは、Webページに関する情報や設定を記述する場所です。
<head>
<meta name="description" content="これはページの説明文です。">
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">
<title>ページタイトル</title>
</head>メタタグは、<head>タグ内に記述する必要があります。メタタグの種類によって、必要な属性や属性値が異なります。メタタグの設定が正しくない場合、検索エンジンに正しく情報を伝えられない可能性があります。
方法②｜CMS（コンテンツ管理システム）を利用
WordPressなどのCMSを利用している場合は、管理画面からメタタグを設定できます。CMSの種類によって設定方法が異なるため、それぞれのCMSのマニュアルなどを参照してください。
- HTMLの知識がなくても、簡単にメタタグを設定できる
- プラグインなどを利用することで、より高度なメタタグ設定が可能になる
CMSの種類やテーマによっては、メタタグの設定項目が限られている場合があります。また、もしご自身のサイトのCMSにメタタグの設定ができない場合は、プラグインを利用をしましょう。SEOに悪影響を与える可能性があるため、信頼できるプラグインを選びましょう。SEOをするならばおすすめなのが以下の二つです。
| 機能 | All in One SEO | RankMath SEO |
|---|---|---|
 |  | |
| 主な機能 | ・SEO分析と改善提案 ・メタタグの編集 ・XMLサイトマップ生成 ・ソーシャルメディア連携 ・リダイレクト設定 | ・SEO分析と改善提案 ・メタタグの編集 ・XMLサイトマップ生成 ・ソーシャルメディア連携 ・リダイレクト設定 ・ローカルSEO設定 ・キーワード追跡 |
| 特徴 | ・初心者向けの分かりやすいインターフェース ・豊富な機能と設定項目 ・有料版ではさらに高度な機能を利用可能 | ・軽量で高速な動作 ・無料版でも豊富な機能を提供 ・モジュール式の構成で必要な機能のみ有効化可能 |
| メリット | ・オールインワンでSEO対策に必要な機能が揃っている ・詳細な設定が可能 ・日本語対応が充実している | ・無料版でも十分な機能を利用できる ・サイトの表示速度に影響を与えにくい ・カスタマイズ性が高い |
| デメリット | ・無料版では一部機能が制限される ・設定項目が多く、初心者には複雑に感じる場合がある | ・日本語対応が一部不足している場合がある ・設定項目が多く、慣れるまで時間がかかる場合がある |
SEOに従事している担当者であればどちらかを入れてみてはいかがでしょうか？ただ、逆にどちらか一つにしないと
メタ（meta）タグの確認方法
メタタグは、Webページのソースコード内に記述されています。設定したメタタグが正しく反映されているかを確認することは、SEO対策において非常に重要です。ここでは、3つの主要な確認方法を紹介します。
- ブラウザのソースコードを表示する方法
- ブラウザの開発者ツールを使用する方法
- ブラウザ拡張機能を使用する方法
確認法①｜ブラウザのソースコードを表示
最も基本的な確認方法は、ブラウザでWebページを表示し、ソースコードを表示することです。ソースコード内を検索することで、設定したメタタグの内容を確認できます。具体的な確認手順としては以下の通りです。
- 確認したいWebページをブラウザで開く
- ページ上で右クリックし、「ページのソースを表示」または同様の項目を選択する
- ソースコードが表示されるので、「Ctrl + F」または「Command + F」で検索窓を開き、確認したいメタタグ名（例：description、keywords）を入力して検索する
- 検索結果に該当するメタタグが表示されるので、内容を確認する
特別なツールや知識が不要で、誰でも簡単に確認できる点がメリットです。
ただ、ソースコード全体を表示するため、目的のメタタグを探すのに手間がかかる場合があります。複雑なWebページでは、ソースコードが読みにくく、確認が難しい場合もあります。
確認法②｜ブラウザの開発者ツールを使用
ブラウザの開発者ツールを使用すると、Webページの構造や要素を詳しく解析できます。メタタグも開発者ツール上で確認できます。具体的な手順としては以下の通りです。
- 確認したいWebページをブラウザで開く
- ページ上で右クリックし、「検証」または同様の項目を選択する（または、ブラウザのメニューから開発者ツールを開く）
- 開発者ツールが表示されるので、「Elements」タブを選択する
<head>タグ内を確認し、設定したメタタグの内容を確認する
メリットとしては、ソースコード全体を表示する必要がなく、目的のメタタグを効率的に確認できます。さらに、メタタグ以外のWebページの要素も同時に確認できます。
ただ、デメリットとしては、開発者ツールの基本的な操作方法を理解している必要があります。
確認法③｜ブラウザ拡張機能を使用
SEOチェックツールなどのブラウザ拡張機能を使用すると、メタタグをはじめとするWebページのSEO関連情報を簡単に確認できます。基本的に、ソースコードを確認するのに便利な拡張機能として「Chrome Extension Source Viewer」が挙げられます。
こちら一択で使っておけば、問題ないでしょう。
まとめ
この記事では、Webページの情報を検索エンジンやブラウザに伝えるHTMLタグであるメタタグについて解説しました。メタタグは、SEO対策において、クローラーへの情報伝達とユーザーエクスペリエンス向上という2つの重要な役割を果たします。
SEO対策で特に重要なメタタグとして、meta descriptionタグ、titleタグ、meta robotsタグ、canonicalタグ、nofollowタグ、noindexタグ、Open Graphタグ、meta viewportタグ、meta charsetタグなどを紹介しました。これらのタグを適切に設定することで、検索エンジンからの評価を高め、ユーザーにとってより使いやすいWebサイトを実現できます。
メタタグの設定方法には、HTMLファイルに直接記述する方法とCMSを利用する方法があり、それぞれメリット・デメリットがあります。また、設定したメタタグが正しく反映されているかを確認することも重要で、ブラウザのソースコード表示、開発者ツール、ブラウザ拡張機能など、様々な確認方法があります。
メタタグはSEO対策の基礎となる重要な要素ですが、Webサイト全体の最適化には、さらに専門的な知識と技術が必要です。もし、自社のWebサイトのSEO対策にお悩みでしたら、ぜひSEOコンサルティング会社「検索順位の海賊」へお気軽にご相談ください。専門家がお客様のWebサイトを分析し、最適なSEO戦略をご提案いたします。
