WebサイトのSEO対策において、見落とせない重要な要素の一つが「メタタグ」だ。
メタタグを活用することで、検索エンジンに対してページの内容を伝えられ、適切かつスピーディなSEO評価につながる。
一方で、
「メタタグの実装の仕方がわからない」
「コードの理解がなければ難しそう」
というお悩みはないだろうか。
本記事では、代表的なメタタグの種類や効果的な記述方法、設定時の注意点を、具体例を挙げながら詳しく解説していく。
技術的なSEOに苦手意識がある方も、ぜひ参考にしていただきたい。
1.メタタグとは
メタタグとは、WebページのHTMLコード内（head内）に記述されるタグの一種で、検索エンジンやブラウザに対して、ページに関する特定の情報を提供するための要素だ。
「特定の情報」とは簡単にいうと、タイトルや概要（どんな内容か）に関する情報を指す。
ただし、内容に関する項目以外に「検索エンジンに該当ページをインデックスさせるかどうか」「重複するページがあった場合にどうするか」など「クローラーへの指示」も含まれる。
メタタグの種類とそれぞれの特徴は後述するため、ここでは大まかな理解で問題ない。
ちなみに、メタタグが直接ユーザーに表示されることはないが、検索エンジンがメタタグを読み込み、検索結果に反映されれば、ユーザーの利便性向上にもつながる。
検索エンジンがコンテンツ（ページ）を評価する仕組み（クロール、インデックス）については、以下の記事で詳しく解説しているため、参考にしていただきたい。
2.メタタグの確認方法
ページごとにどのようなメタタグが設定されているかは、以下の手順で確認できる。
STEP1.ウェブブラウザを開く
メタタグはウェブページのHTMLソースコード内に記述されているため、ブラウザを使ってページのソースを確認する。
STEP2.ウェブページを開く
メタタグを確認したいウェブページを開く。
STEP3.ページのソースを表示する
次の方法でページのHTMLソースを表示させることができる。
<Windowsの場合>
任意の場所で右クリックし、表示されたメニューから「ページのソースを表示」または「ソースを表示」を選択する。
または、キーボードの Ctrl + U を押しても同じ結果が得られる。
<Macの場合>
任意の場所で右クリックし、表示されたメニューから「ページのソースを表示」を選択する。
または、キーボードの Command + Option + U を押す。
STEP4.メタタグを探す
表示されたHTMLソースコード内で、メタタグを確認する。
メタタグは通常、<head> タグの中に含まれている。
metaで始まる行を探すか、 Ctrl + F（Macの場合は Command + F）で「meta」というキーワードを検索するとすぐに見つかる。
※titleタグは「title」、canonicalタグは「canonical」で検索
3.メタタグの種類
SEO対策において押さえておくべきメタタグの種類は、以下のとおりだ。
- titleタグ
- meta description
- meta charset
- meta viewport
- meta robots
- meta noindex
- meta nofollow
- ogp（Open Graph Protocol）タグ
- canonicalタグ
| 種類 | 概要／目的（効果） |
| titleタグ | ページのタイトルを検索エンジンに伝えるタグ。
検索結果のタイトル部分に表示され、ユーザーがページの内容を理解するための最初の手がかりとなる。 |
| meta description | ページの概要や説明文を検索エンジンに伝えるメタタグ。
ユーザーにページの内容を簡潔に伝え、クリックを促すために活用される。 |
| meta charset | ページの文字コード（例：UTF-8）を指定するメタタグ。
文字化けを防ぎ、ユーザーに正しい文字を表示するために重要である。 |
| meta viewport | モバイルデバイスでの表示を調整するためのメタタグ。
スマートフォンやタブレットなど、さまざまな画面サイズのデバイスに対応するため、ページが最適な表示状態となるようにする。 |
| meta robots | 検索エンジンのクローラーに対して、ページのクロールやインデックスの可否を指示するメタタグ。
主にSEOの観点から、ページをクロールしてほしくなかったり、インデックスをしてほしくない（検索結果に表示してほしくない）場合に使用する。 noindexタグ プライバシーポリシーページや一時的なキャンペーンページなど、SEOの対象にしたくないコンテンツに使われる。これにより、無駄なインデックス化を避け、サイト全体のSEOパフォーマンスを最適化できる。 nofollowタグ リンク先のページがSEOに悪影響を与えるおそれがある場合や、信頼性が不明な外部リンクに対して用いられる。これにより、意図しないSEOリスクを回避できる。 |
| ogp（Open Graph Protocol）タグ | SNS上でページが共有された際に、タイトル、説明文、画像などがどのように表示されるかをカスタマイズするメタタグ。
共有された際の見栄えをコントロールし、クリック率を向上させる。 |
| canonicalタグ | 重複コンテンツがある場合に、検索エンジンに対して「正規のページ」を示すためのタグ。
同じ内容を持つ複数のURLが存在する際に、検索エンジンがどのページを主要なページとして認識すべきかを指定することで、SEO評価の分散を防ぎ、正規ページのランキングを向上させる。 |
4. メタタグの効果的な記述方法
実際に、メタタグをどのように記述するのが効果的か、種類ごとに解説していく。
4.1. titleタグ
ページのタイトルを検索エンジンに伝えるタグ。
titleタグ記述のポイント
ページの内容を端的に示し、検索結果でユーザーにクリックを促すようなタイトルを作成する。
SEO効果を高めるには、必ず対策キーワードを含め、簡潔かつ魅力的な文にすることが重要だ。
一般的には30文字前後が理想的とされている。
具体例
| <title>BtoB向けITソリューション | 業務効率化とコスト削減 | 当社のサービス</title> |
ページ内容（BtoB向けITソリューション）と訪問者が得られるメリット（業務効率化、コスト削減）を含め、簡潔にまとめている。
検索エンジンへのキーワード提示と、ユーザーにとってわかりやすい構成により、クリック率向上やSEO効果が期待できる。
4.2. meta description
ページの概要や説明文を検索エンジンに伝えるメタタグ。
meta description 記述のポイント
ページの内容を的確に要約し、クリックしたくなるような魅力的な文章を作成する。
検索結果に表示されるため、ユーザーに対して直接的な影響を与える。
80〜160文字程度で簡潔にまとめよう。
具体例
| <meta name=”description” content=”当社はBtoB向けITソリューションを提供し、業務効率化とコスト削減をサポートします。詳しくは当社のソリューションページをご覧ください。”> |
ページの内容（BtoB向けITソリューション）を簡潔に伝えつつ、訪問者が得られるメリット（業務効率化、コスト削減）を具体的に記述している。
これにより、検索結果でクリック率が向上する。
4.3. meta charset
ページの文字コード（例：UTF-8）を指定するメタタグ。
meta charset 記述のポイント
ウェブページの文字エンコーディングを指定する。通常は「UTF-8」を使い、全世界の文字が正しく表示されるようにする。
具体例
| <meta charset=”UTF-8″> |
これを設定することで、ページが文字化けすることなく、すべてのデバイスで適切に表示される。
特に、多言語対応サイトやグローバル展開を行っている企業にとって重要なメタタグだ。
4.4. meta viewport
モバイルデバイスでの表示を調整するためのメタタグ。
meta viewport 記述のポイント
モバイル端末での表示を最適化するために使用する。
特に、レスポンシブデザインを採用している場合、このタグを正しく設定することが重要だ。
具体例
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
スマートフォンやタブレットなど、異なる画面サイズのデバイスでの見え方を最適化している。
- width=device-width
デバイスの画面幅に合わせてページの幅を設定する。これにより、デバイスごとに異なる画面幅に応じて、ページが自動でスケーリングされる。
- initial-scale=1.0
ページが読み込まれた際の初期拡大率を1倍に設定する。つまり、ズームされていない状態で表示する。
4.5. meta robots
検索エンジンのクローラーに対して、ページのクロールやインデックスの可否を指示するメタタグ。
meta robots 記述のポイント
検索エンジンのクローラーに対して、ページをインデックスするかどうか、リンクをたどるか（クロールするか）どうかを指示する。
robotsタグで使用できる主要なタグは、以下のとおりだ。
- index：ウェブページをインデックスに含めるよう指定する。
- noindex：ウェブページをインデックスしないよう指定する。
- follow：ウェブページからリンクされているページをクロールするように指定する。
- nofollow：ウェブページからリンクされているページをクロールしないように指定する。
- noarchive：ウェブページのキャッシュを作成しないように指定する。指定しない場合、ユーザーがウェブページに再度訪問した際にキャッシュページが表示される可能性がある。
具体例1：通常ページ
| <meta name=”robots” content=”index, follow”> |
ページをインデックスさせ、内部リンクをたどらせる設定だ。
通常の公開ページにはこの設定が推奨される。
逆に、重要でないページやインデックスさせたくないページには、後述のnoindexやnofollowを使用しよう。
具体例2：インデックスしたくない（検索結果に表示させたくない）ページ
| <meta name=”robots” content=”noindex”> |
インデックスする必要のないページとは、以下が考えられる。
- ホワイトペーパーなどのダウンロードPDF資料
- プライバシーポリシー／利用規約
- 顧客ログインページ
- Thank youページ
- 内部検索結果ページ（サイト内検索機能を持つ場合）
- キャンペーンページ、期間限定ページ
- 404エラーページ
具体例3：ページ内のリンクをたどってほしくないページ
| <meta name=”robots” content=”nofollow”> |
ページ内の外部リンクが信頼できない場合や、SEO的に評価されないようにしたいリンクがある場合に使う。
例えば、外部リンクが多いページや、広告ページなどに適している。
4.6. ogp（Open Graph Protocol）タグ
SNS上でページが共有された際に、タイトル、説明文、画像などがどのように表示されるかをカスタマイズするメタタグ。
ogpタグ 記述のポイント
特にタイトル、説明文、画像が重要。
具体例
| <meta property=”og:title” content=”BtoB向けITソリューション”>
<meta property=”og:description” content=”当社のITソリューションで業務効率を最大化し、コスト削減を実現します。”> <meta property=”og:image” content=”https://example.com/image.jpg”> <meta property=”og:url” content=”https://example.com/solution”> |
SNSでシェアされた際に、画像で見栄えを良く、テキストでページの内容を簡潔に伝える。
BtoB企業でもSNSが活用されるケースは増えている。
シェアされるページが魅力的に見えると、リード獲得のチャンスを増やせるだろう。
4.7. canonicalタグ
重複する可能性のある複数のページに対して、検索エンジンに「正規のページ」を指定することで、SEO評価の分散を防ぐ。
canonicalタグ 記述のポイント
設定が有効となるのは、以下のようなケースだ。
具体例
| <link rel=”canonical” href=”https://example.com/original-page/”> |
この設定により、指定したURL（https://example.com/original-page/）を「正規のページ」として検索エンジンに認識させる。
重複する内容を持つページが複数存在する場合でも、評価が正規ページに集まり、検索結果での順位低下や重複コンテンツのペナルティを回避できる。
5. メタタグを設定する際の注意点
メタタグを設定する際には、以下の2つの点に注意してほしい。
注意点1.キーワードを詰め込みすぎない
メタタグにキーワードを詰め込みすぎることは逆効果だ。
Googleをはじめとした検索エンジンは、単純なキーワードの多用ではなく、コンテンツの質やユーザーの検索意図に基づいて評価を行う。
特にmeta description において、キーワードの乱用や過剰な使用は「スパム行為」と見なされるおそれがある。
また、ユーザビリティの面でも、キーワードを詰め込みすぎた説明文が検索結果に表示されると読みづらくなり、クリック率の低下や信頼性の棄損を招きかねない。
1〜2の重要なキーワードを、自然な文章の中で使用することが望ましい。
注意点2.meta keywordsの設定は不要
かつてmetaタグの一つとしてmeta keywordsがあったが、現在このタグは検索エンジンのランキングには影響しないため、設定する必要はない。
実際にGoogleは2009年に、meta keywords タグをランキング要因としては使用しないと発表している。
これは、過去にキーワードの詰め込みやスパム行為が横行したためだ。
6. メタタグの実装方法
メタタグの設定方法には「HTMLに直接記述する方法」と「CMSを活用する方法」の2種類がある。
それぞれのメリット・デメリットを考慮し、自社に合った方法を選択してほしい。
6.1. HTMLに直接記述する方法
「メタタグの確認方法」で述べたような形で、ページのソースコードの<head>タグ内を編集する。
メリット
- カスタマイズ性が高い
直接HTMLに記述するため、自由にタグを追加・編集でき、細かい調整が可能。特に開発者やHTMLに精通しているユーザーに適している。 - 即時反映が可能
HTMLに記述すると、サーバーにアップロードした瞬間に変更が反映される。設定内容をすぐに確認できるため、リアルタイムでの調整がしやすい。
デメリット
- 専門知識が必要
HTMLやWeb開発に関する知識がないと、メタタグの記述や管理が難しい。コードを直接編集するため、誤った記述をするとページが正しく表示されないリスクもある。 - 管理に手間がかかる
ページが増えるごとにメタタグの管理が煩雑となり、サイト全体でメタタグを統一するのが難しくなる。特に大規模サイトの場合、全ページで一貫した設定を行うのは時間がかかる。
6.2. CMSを活用する方法
WordPressなどのCMS（コンテンツ管理システム）を使い、プラグインを通じてメタタグを簡単に設定・管理する。
WordPressのプラグインとしては「Yoast SEO」や「All in One SEO Pack」が代表的だ。
- Yoast SEO：https://ja.wordpress.org/plugins/wordpress-seo/
- All in One SEO Pack：https://ja.wordpress.org/plugins/all-in-one-seo-pack/
メリット
- 使いやすいインターフェース
プラグインを通じてメタタグを設定するため、HTMLやコーディングの知識がなくても、管理画面から簡単に設定できる。特にWordPressを使っている場合、プラグインが豊富で手軽に導入できる。 - 一貫した管理が可能
複数のページや投稿にわたって、一貫したメタタグの設定が行える。また、全体の設定を簡単に変更できるため、規模の大きなサイトでも効率的にメタタグを管理可能。 - SEO関連機能が充実
多くのSEOプラグインは、メタタグの設定以外にも、SEO対策やサイトのパフォーマンスを最適化する機能を提供しており、総合的なWebサイト運営に役立つ。
デメリット
- プラグイン依存のリスク
プラグインに依存するため、プラグイン自体のサポートが終了した場合や、バージョンに対応していない場合などに、メタタグの設定が崩れるおそれがある。また、プラグイン同士の競合や不具合が生じるリスクもある。 - ページごとの微調整が難しい
プラグインによっては、細かいカスタマイズや複雑なタグ設定が難しい。高度なSEO戦略やカスタマイズが必要な場合には、HTMLに直接記述する方法のほうが適していることもある。
7. AIを活用したメタタグ設定の最適化と効率化
昨今、SEOやWebマーケティングにおいてAIの活用が進んでいる。
メタタグについてもAIを活用することで、作業の最適化と効率化が実現し、SEO対策を加速させられるだろう。
例えば、以下のような活用方法が考えられる。
- キーワード抽出と分析: 大量のデータを解析し、SEOに最適なキーワードを自動で抽出する。
- メタタグの自動生成: ページ内容に基づき、最適なタイトルやmeta descriptionを自動生成できる。
- 競合サイトの分析: 競合のメタタグをAIが解析し、差別化されたメタタグ戦略を立てられる。
- A/Bテストの自動化: 複数のメタタグパターンをテストし、最適なパターンを選定・適用する。
- 効果検証と改善: リアルタイムでパフォーマンスを監視し、効果の低いメタタグを自動的に改善する。
- クリック率（CTR）の最適化: ユーザーの行動データをもとに、より魅力的でクリックされやすいメタタグを提供する。
8. まとめ
メタタグの基礎知識や具体的な記述方法を理解いただけただろうか。
メタタグはユーザーには直接見えない要素だが、SEOにおいて重要な役割を果たすため、Webサイトの流入を増やしたい場合には、必ず正しく効果的な方法で設定を行ってほしい。
弊社では、IT企業やSaaS企業のマーケティング全般の支援を行っている。
メタタグの設定を含むSEOコンサルティングも提供しているため、わからないことがあれば、お気軽にお問い合わせいただきたい。
