メタタグは、Webページの情報を検索エンジンやブラウザなどに伝えるためのタグです。
タイトルやメタディスクリプション、robotsメタタグ、OGPタグなどさまざまな種類があり、それぞれ役割が異なります。適切に設定することで、検索エンジンにページの情報を正しく伝えたり、検索結果からのクリック率向上につなげたりできます。
本記事では、メタタグの意味やSEOで重要とされる理由、代表的な種類と書き方、確認・設定方法をわかりやすく解説します。設定時の注意点も紹介するので、メタタグを正しく理解したい方はぜひ参考にしてください。
メタタグとは
メタタグは、HTMLの<head>要素内に記述し、Webページに関する情報を検索エンジンやブラウザなどに伝える役割を持つタグです。ページのタイトルや説明文、文字コード、検索エンジンのクロール（検索エンジンがWebページを巡回する仕組み）やインデックス（検索エンジンのデータベースへの登録）に関する指示など、さまざまな情報を指定できます。
メタタグには複数の種類があり、それぞれ役割や記述方法が異なります。ここでは、メタタグの基本的な書き方と、HTMLのどこに記述するのかについて解説します。
メタタグの書き方
メタタグは、HTMLの<meta>タグを使って記述します。たとえば、ページの概要を検索エンジンなどに伝える「メタディスクリプション」は、以下のように書きます。
<meta name=”description” content=”Webページの説明文”>
name属性ではメタタグの種類を指定し、content属性にはその内容を記載します。
ただし、メタタグは種類によって記述方法が異なります。たとえば、文字コードを指定する場合はcharset属性を使います。
目的に応じて適切なメタタグを選び、それぞれに合った形式で記述しましょう。代表的なメタタグの種類や具体的な書き方については、後ほど詳しく解説します。
メタタグを記述する場所
メタタグは、基本的にHTMLの<head>要素内に記述します。<head>要素はページに直接表示するコンテンツではなく、ページに関する情報（メタデータ）を記述する部分です。
たとえば、メタディスクリプションや文字コードなどは、以下のように書きます。
メタタグを正しく記述することで、ページに関する情報を検索エンジンやブラウザなどへ適切に伝えられます。SEOに関係するものだけでなく、ページの表示やSNSでの共有時に利用されるものもあるため、それぞれの役割を理解したうえで設定しましょう。
メタタグがSEOで重要な理由
メタタグを設定するだけで検索順位が上がるわけではありません。しかし、SEOに取り組むうえで適切な設定は欠かせない要素です。
検索エンジンにページの内容を正しく伝えられる
メタタグを適切に設定すると、検索エンジンにページの内容や属性情報を伝えられます。
たとえば、タイトルタグではページのタイトルを指定できます。また、robotsメタタグを使えば、検索エンジンに対してインデックスやリンクの扱いに関する指示を伝えられます。
メタタグには、検索エンジンがページを理解・処理するために必要な情報を伝える役割があります。ページの内容や目的に合わせ、正しく設定していきましょう。
検索結果からのクリック率向上につながる
検索結果に表示されるタイトルや説明文は、ユーザーがページをクリックするかどうかを判断する材料のひとつです。
検索目的に合ったタイトルや説明文が表示されれば、ユーザーは「自分が知りたい情報がありそう」と判断しやすくなります。ページの内容をわかりやすく伝え、ユーザーの興味を引くタイトルやメタディスクリプションを設定すれば、検索結果からのクリック率向上が期待できます。
ページの表示やSNSでの見え方を最適化できる
メタタグのなかには、検索結果だけでなく、Webページの表示やSNSでシェアされた際の見え方に関係するものもあります。
たとえば、viewportを適切に設定すると、スマートフォンやタブレットなど端末の画面幅に合わせたページ表示が実現しやすくなります。また、OGPタグを設定すれば、SNSでページがシェアされた際のタイトルや説明文、画像などを指定できます。
Webページをユーザーにとって見やすい状態にしたり、SNS上でページの内容や魅力をわかりやすく伝えたりするためにも、目的に応じたメタタグを適切に設定しましょう。
SEOで押さえておきたいメタタグの種類と書き方
メタタグにはさまざまな種類があり、それぞれ役割や書き方が異なります。ここでは、SEOに取り組むうえで押さえておきたい代表的なタグについて、役割と書き方を解説します。
タイトルタグ（title）
タイトルタグは、Webページのタイトルを指定するためのタグです。検索結果やブラウザのタブなどに表示され、検索エンジンやユーザーにページの内容を伝える重要な役割を担います。
以下のように<title>タグを使って記述します。
<title>Webページのタイトル</title>
タイトルを作成する際は、ページの内容がひと目でわかるようにしましょう。検索結果を見たユーザーがクリックするかどうかを判断する材料にもなるため、ページの内容と一致したわかりやすい表現を心がけることが大切です。
メタディスクリプション（meta description）
メタディスクリプションは、Webページの内容を説明するためのメタタグです。設定した説明文は、検索結果でページタイトルの下に表示されることがあります。
以下のように記述します。
<meta name=”description” content=”Webページの説明文”>
メタディスクリプション自体が検索順位を直接上げるわけではありませんが、検索結果でページの内容をユーザーに伝える役割を果たします。
なお、設定した文章が必ずそのまま検索結果に表示されるとは限りません。検索クエリなどに応じて、検索エンジンがページ内の文章から説明文を自動生成する場合もあります。
メタロボットタグ（noindex・nofollow）
メタロボットタグは、検索エンジンのクローラーに対して、ページのインデックスやリンクの扱いに関する指示を伝えるためのメタタグです。
代表的な指定として、検索結果へのインデックスを拒否するnoindexや、ページ内のリンクをたどらないよう指示するnofollowがあります。
インデックスとリンクのクロールの両方を制限する場合は、以下のように記述します。
<meta name=”robots” content=”noindex, nofollow”>
会員限定ページやサンクスページなど検索結果に表示させたくないページで、目的に応じて使い分けましょう。
文字コード（charset）
文字コードを指定するメタタグは、Webページのテキストを正しく表示するために使用します。
適切な文字コードが指定されていない場合、閲覧環境によっては文字化けが発生し、テキストが正しく表示されない可能性があります。
UTF-8を指定する場合は、以下のように記述します。
UTF-8は、日本語をはじめ多くの言語を扱える文字コードです。Webページを正しく表示するためにも、適切な文字コードを設定しましょう。
ビューポート（viewport）
ビューポートは、スマートフォンやタブレットなどの端末で、Webページをどのように表示するかを指定するためのメタタグです。
たとえば、以下のように記述します。
「width=device-width」ではページの表示幅を端末の画面幅に合わせ、「initial-scale=1.0」ではページを最初に表示する際の拡大率を指定します。
スマートフォンでもページを見やすく表示するためには、画面サイズに応じてレイアウトが変化するレスポンシブデザインとあわせて、ビューポートを適切に設定することが欠かせません。
OGPタグ
OGPタグは、WebページがSNSなどでシェアされた際に表示されるタイトルや説明文、画像などを指定するためのタグです。
代表的なOGP（Open Graph Protocol）タグは、以下のように記述します。
<meta property=”og:title” content=”Webページのタイトル”>
<meta property=”og:description” content=”Webページの説明文がここに入ります。”>
<meta property=”og:image” content=”画像のURL”>
<meta property=”og:url” content=”WebページのURL”>
「og:title」ではタイトル、「og:description」では説明文、「og:image」では表示する画像、og:urlではページのURLをそれぞれ指定します。
OGPタグを適切に設定しておけば、SNSでシェアされた際にページの内容や魅力をわかりやすく伝えられます。
メタタグの確認方法
Webページに設定されているメタタグは、HTMLのソースコードを直接確認する方法と、SEOツールを使う方法の2つで確認できます。
HTMLのソースコードで確認する
メタタグは、ページのHTMLソースコードから確認できます。
確認したいページをブラウザで開き、右クリックして「ページのソースを表示」を選択しましょう。ショートカットキーを使う場合は、Windowsでは「Ctrl+U」、Macでは「Command+Option+U」で表示できます。
ソースコードを開いたら、<head>要素内を確認します。メタディスクリプションやrobotsメタタグ、文字コード、ビューポートなど、ページに設定されているメタタグを確認可能です。
目的のタグが見つからない場合は、ページ内検索機能（Windowsは「Ctrl+F」、Macは「Command+F」）を使い、descriptionやrobots、viewportなどの文字列で絞り込むと見つけやすくなります。
SEOツールで確認する
SEOツールを使えば、ページに設定されているメタタグを簡単に確認できます。
ツールによって確認できる項目は異なりますが、タイトルやメタディスクリプション、robotsメタタグなどを一覧で表示できるものもあります。
ソースコードから一つずつ探す必要がないため、複数のページをまとめて確認したい場合や、HTMLに詳しくない場合にも便利です。効率よくメタタグの設定状況を把握したい場合は、SEOツールを活用しましょう。
メタタグの設定方法
メタタグは、WordPressなどのWebサイト制作・管理ツールを利用する方法と、HTMLを直接編集する方法で設定できます。
WordPressで設定する
WordPressを使用している場合は、テーマの機能やSEO関連のプラグインなどを利用してメタタグを設定できます。
基本的な手順は、以下のとおりです。
- WordPressの管理画面を開く
- メタタグを設定したい投稿や固定ページの編集画面を開く
- タイトルやメタディスクリプションなどを入力する
- ページを保存・更新する
使用しているテーマやプラグインによって設定画面や設定できる項目は異なります。タイトルやメタディスクリプションを入力する際は、ページの内容を正確に表しましょう。
HTMLを直接編集して設定する
HTMLを編集できるWebサイトでは、対象ページの<head>要素内にメタタグを直接記述します。
基本的な手順は、以下のとおりです。
- WebサイトのHTMLファイルをHTMLエディタなどで開く
- 対象ページの<head>要素内にメタタグを記述する
- タイトルや説明文など、必要な内容を設定する
- HTMLファイルを保存し、FTPやホスティングサービスのファイルマネージャーなどを使ってWebサーバーへアップロードし、Webサイトに反映する
たとえば、タイトル・メタディスクリプション・文字コード・ビューポートを設定する場合、以下のように記述します。
設定内容に誤りがあると意図したとおりに反映されない場合があるため、保存・公開したあとは実際のページやソースコードで表示状態を確認しましょう。
メタタグを設定する際の注意点
メタタグは、種類ごとの役割を理解したうえで適切に設定することが欠かせません。誤った方法で設定すると、ユーザーにページの内容が伝わりにくくなったり、検索結果への表示に影響したりする可能性があります。
キーワードを不自然に詰め込まない
タイトルやメタディスクリプションには、対策したいキーワードを不自然に詰め込まないようにしましょう。
SEOを意識するあまり同じキーワードを何度も使用すると、文章が不自然になり、ユーザーにページの内容が伝わりにくくなります。
キーワードを入れることだけを目的にせず、ページの内容を正確かつわかりやすく表現することを優先しましょう。ユーザーが検索結果を見たときに内容を理解できるよう、自然なタイトルや説明文を作成することが大切です。
meta keywordsはSEO目的では設定不要
meta keywordsは、ページに関連するキーワードを検索エンジンへ伝えるために使用されていたメタタグです。
以前はSEO対策として利用されていましたが、現在Googleはmeta keywordsをWeb検索のランキングに使用していません。そのため、GoogleのSEOを目的としてmeta keywordsを設定する必要はないといえます。
新しくページを作成したりメタタグを見直したりする際は、meta keywordsを追加するよりも、タイトルやメタディスクリプションなど現在のSEOやユーザー利便性に関わる項目を適切に設定することを優先しましょう。
参考：Google Search Central「Google はウェブ ランキングにキーワード メタタグを使用しません」
noindex・nofollowの誤設定に注意する
noindexやnofollowを使用する場合は、設定するページや内容を十分に確認しましょう。
noindexは検索エンジンに対してページを検索結果に表示しないよう指示するために使用します。検索結果に表示させたいページへ誤って設定すると、そのページがインデックスされなくなるおそれがあります。
一方、nofollowはページ内のリンクをたどらないよう検索エンジンに指示するための指定です。意図せず設定すると、検索エンジンによるリンクの扱いに影響が出る可能性があります。
noindex・nofollowは目的に応じて活用できる便利な指定ですが、SEOに影響を及ぼすため、設定後はソースコードなどを確認し、意図したページに正しく反映されているかチェックしましょう。
まとめ
本記事では、メタタグの役割やSEOで重要とされる理由、代表的な種類と書き方、確認・設定方法を解説しました。メタタグにはタイトルやメタディスクリプション、robotsメタタグ、ビューポート、OGPタグなどさまざまな種類があり、それぞれ異なる役割を担っています。
メタタグを設定するだけで検索順位が上がるわけではありませんが、検索エンジンにページの情報を適切に伝えたり、検索結果でページの内容をわかりやすく示したりするためには欠かせません。タイトルやメタディスクリプションを工夫することで、検索結果からのクリック率向上も期待できます。
メタタグは種類によって書き方や設定時の注意点が異なります。本記事を参考にそれぞれの役割を理解し、Webページの目的に合わせて適切に設定していきましょう。
関連記事
見出しタグについても詳しく知りたい方は、こちらの記事もぜひ参考にしてください。
リスティング広告【最適化】に必須のチェックリストを”無料”配布中！
リスティング広告を運用する上で必要なチェックリストをPDF形式で無料でダウンロードいただけます。
【広告代理店の運用者】が教えるリスティング広告の基礎を使ってあなたのビジネスの集客アップにご活用ください。
