メタタグは、Webサイトの情報を検索エンジンに伝えるためのHTMLタグです。多くの種類があり、中にはSEOに間接的な影響を与えるものも存在します。
しかし、Webサイト運営者の中には、メタタグの概要や設定するメリットを深く理解していない方もいるでしょう。
そこで本記事では、メタタグの役割とSEO効果について解説します。
記述方法や注意点も取り上げるので、ぜひ参考にしてください。
関連記事：SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
メタタグ（metaタグ）とは？SEO効果と主な役割
メタタグは、Webサイトの情報を記述するHTMLタグの一種です。ページの構造を検索エンジンやユーザーにわかりやすく伝える役割を担います。
適切に設定すれば、クリック率の上昇やクローリングの効率化など、間接的なSEO効果を得られます。
検索エンジンのクローラーにサイトの情報を伝える
メタタグの中には、検索エンジンに対して指示を与える役割を持つものがあります。
例えば、noindexタグは検索エンジンによるインデックスを制御できます。低品質なページや重複コンテンツのインデックスを避け、検索結果に表示させなくします。
設定すればクローリングを効率よく実施できるため、検索結果に望んだ形で表示される可能性が高まるでしょう。
クローラーに指示が出せる
メタタグを使えば、クローラーに対してWebサイトの文字コードや表示形式を指定できます。例えば、文字コードでWebサイトにメインで使用されている言語を伝える、ビューポートでデバイスに合わせたレイアウトの調整を行うなどです。
ページの内容をどのように読み取ればいいかをクローラーに伝えられるため、必ず設定しましょう。
関連記事：Googleインデックス登録とは？登録方法やリクエスト方法を徹底解説
ユーザーにページの内容をわかりやすく伝える
メタタグは検索エンジンに向けのHTMLコードなので、ユーザーには表示されません。
しかし、タイトルタグやメタディスクリプションは、検索結果やSNSシェア画面で確認可能です。
タイトルタグは検索結果のタイトル部分やタブブラウザに反映。メタディスクリプションは、検索結果のタイトル下部に表示されます。加えてOGPを設定すれば、ページがSNSなどでリンクされた際に画像やタイトルをカード形式で表示可能です。
それぞれ適切に設定することで、ユーザーにページの内容をわかりやすく伝えられます。
また、ニーズや検索意図に沿った文章を記載すれば、クリック率を高める効果も期待できるでしょう。
関連記事：SEO効果を高めるタイトルの付け方とポイントを解説
メタタグの重要性と入れる場所について
メタタグはSEOと深い関係を持っているため、重要性や役割を理解した上で、正しく設定する必要があります。
以下で、メタタグが必要な理由や記述する場所を詳しく解説していきます。
メタタグの重要性と役割
メタタグはブラウザやサーバー、検索エンジンなどに対して、以下のような情報を伝える役割を担っています。
- ブラウザのタブや検索結果に表示するタイトル
- ページの検索結果やリンクカードとして表示されるサイトの説明文
- ブラウザに表示される際の表示領域
- Googleのクローラーに向けたページの扱い方
- SNSにリンクが貼られた際に表示する情報
- ページが対応している文字コード
つまりメタタグがないと、コンピューターがページの情報を正しく把握できません。SEOに不利になるのはもちろん、文字化けが起きたり、レイアウトが崩れたりなどWebサイトそのものにエラーが出る可能性もあります。
ページが正しく表示されない、ユーザーが離脱するなどの原因になるため、必ず設定しましょう。
メタタグを入れる場所
メタタグは、HTMLファイルの<head>タグ内に記述します。
|
<html lang=”ja”> <head> <!– ここにメタタグを記入 –> </head> <body> </body> </html> |
HTMLは、大きく<head>と<body>の2つのセクションにわかれており、それぞれ以下のような使い分けをします。
|
<head> |
コンピューターに見せたい情報を記載する |
|
<body> |
人間に見せたい情報を記載する |
記載場所を誤ると正しく機能しないため注意しましょう。また、WordPressを使っていてプラグインで設定する際は、管理画面の各設定項目から追加可能です。
その場合HTMLファイルを編集する必要はありませんが、システムが<head>タグ内にメタタグを追加してくれています。
メタタグの種類とそれぞれの役割
メタタグには、設定が必須のものから、場合によっては設定不要のものまであります。
SEOと関連性が高い8つのメタタグと、重要度を下表にまとめました。
|
メタタグ |
重要度 |
|
タイトルタグ |
設定必須 |
|
メタディスクリプション |
設定必須 |
|
メタキーワード |
必須ではない |
|
文字エンコーディング |
設定必須 |
|
ビューポートタグ |
設定必須 |
|
OGPタグ |
必要に応じて |
|
noindex |
必要に応じて |
|
nofollow |
必要に応じて |
ここからは、SEOと関連性の高いメタタグをいくつか紹介するので、それぞれ見ていきましょう。
タイトルタグ
タイトルタグは、検索結果のタイトルリンクやタブブラウザに反映されるテキストを指定するHTMLタグです。
ユーザーのニーズや検索意図に沿った文章を記述することでクリック率が高ます。間接的なSEO効果が期待できるため、自然な文脈でユーザーの興味を惹けるキャッチコピーを考えましょう。
基本的には各ページに対して1つだけ、以下の形式でHTMLのhead要素内に記述します。
| <title>タイトル</title> |
メタディスクリプション
メタディスクリプションは、検索結果のタイトル下部に表示される説明文です。SEOに直接的な影響はありませんが、ユーザーの興味を引くような文章を設定することで、クリック率の向上が期待できます。
なお検索キーワードと一致するテキストは、検索結果に太字で表示されるため、文章内に狙っているキーワードを適度に含めるのも大切です。
PC・モバイル共に半角で140〜160文字程度で表示されるため、日本語の場合は70文字程度で作成するのがおすすめです。文字数に規定はないので設定しても問題はありませんが、省略されて検索結果に表示されないため注意しましょう。記述は、以下のように行います。
| <meta name=”description” content=”メタディスクリプション”> |
メタキーワード
メタキーワードは、検索エンジンに対してページのメインテーマを伝えるためのタグです。
例えば、東京でSEO対策を外注したい人に向けたコンテンツであれば、「東京,SEO対策,外注」などの単語をカンマ区切りで設定します。
しかしメタキーワードは現在、Googleの順位決定の指標には含まれていないと公言されています。そのため、記述しなくても問題はありませんが、使用する場合は以下のように設定しましょう。
|
<meta name=”keywords” content=”キーワード1,キーワード2”> |
なお、設定する単語が多すぎるとコンテンツのテーマがわかりにくくなるため、多くとも3~5つ程度に収めましょう。
関連記事：メタキーワードはSEO対策に不要！かつての効果や設定方法を解説
文字エンコーディング
HTMLで文字エンコーディングを指定する際も、メタタグを活用します。文字エンコーディング未設定の場合、異なる言語のブラウザから日本語版のサイトにアクセスする際に文字化けを起こす可能性があります。
ユーザーの利便性が低下する、検索エンジンのクローラーが正しい情報を収集できなくなるなどの恐れがあるため、忘れずに設定しましょう。なお一般的には、全世界共通のユニコードである「UTF-8」が使用されます。
なお、文字化けを防げるのは文字エンコーディングよりも記述の下に記載されているコードのみです。そのため、必ず<head>タグ内の最初に記述しましょう。以下のコードを貼り付ければ、設定完了です。
| <meta charset=”utf-8″> |
ビューポートタグ
ビューポートタグは、PCやモバイルなど、端末ごとにコンテンツの表示領域を設定するためのHTMLタグです。
viewport内のcontent属性に、以下の2つの値を設定することで、PCやスマホなどユーザーの閲覧デバイスに合わせた表示領域でページが表示されます。
|
width=device-width |
表示領域の幅を、閲覧デバイスのディスプレイに合わせる |
|
initial-scale=1 |
初期のズーム倍率を1に設定し、最初に表示された時の違和感をなくす |
なお、CSSでレスポンシブデザインを実装しても、ビューポートタグを設定しなければ正しく表示されないため注意が必要です。
近年は、モバイル端末でWebサイトを閲覧するユーザーが増加しています。利便性を下げないためにも、ビューポートタグを設置してレスポンシブデザインに対応しましょう。なお、記述内容は次のとおりです。
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
OGPタグ
OGPタグは、SNSでコンテンツがシェアされた際に、ユーザーに内容を詳しく伝えるためのメタタグです。具体的にはタイトルや概要、アイキャッチ画像がそれぞれのSNSに合わせて最適表示されます。
OGPタグは、property属性に設定する値によって意味が変わります。それぞれの意味を下表にまとめました。
|
propertyの値 |
設定する項目 |
|
og:url |
リンクとして表示するページのURL |
|
og:site_name |
ページの親となるWebサイトのタイトル |
|
og:type |
ページの種類により異なり、トップページには「website」それ以外には「article」指定 |
|
og:title |
リンクとして表示するページのタイトル |
|
og:description |
リンクとして表示するページの説明文 |
|
og:image |
リンクとして表示するアイキャッチ画像 |
SNSを集客ツールとして活用する企業はクリック率に影響するため、設定しておきましょう。シェア画面で表示したい項目をHTMLのhead要素内に記述します。
|
<meta property=”og:url” content=”ページURL”/> <meta property=”og:site_name” content=”サイト名”/> <meta property=”og:type” content=”ページタイプ”/> <meta property=”og:title” content=”ページタイトル”/> <meta property=”og:description” content=”サイトディスクリプション”/> <meta property=”og:image” content=”画像URL”/> |
関連記事：SNSがSEOに与える影響とは？注意点や効果を得る方法を解説
noindex
noindexは、検索エンジンによるインデックスを制御するメタタグです。重複コンテンツや、Webサイトの評価を下げる恐れがある低品質なページを、インデックスさせないために使用されます。
noindexを設定すると、Googleのデータベースからページが除外され、検索に表示されなくなります。そのため、基本的には設定せずよく理解せずに無闇に記述するのは避けましょう。記述内容は以下のとおりです。
| <meta name=”robots” content=”noindex”> |
関連記事：noindexタグとは？設定する時の注意点やSEOへの影響を解説
nofollow
nofollowはページ上のリンクを辿らないよう、検索エンジンのクローラーに対して指示を出すメタタグです。
リンク先のWebサイトが低品質だったり、自社サイトと関連性が低かったりする場合に使用されます。設定する際は以下のように記述します。
| <meta name=”robots” content=”nofollow”> |
ただし、nofollwをメタタグで指定すると、ページ内のすべての外部リンクをクローラーが辿ろうとしなくなります。
引用や参考文献に関するリンクなど、辿らせた方が良い外部リンクがある場合はSEOに不利になる可能性も否めません。そのため、扱いには注意が必要です。
特定のリンクだけを辿らせたくない場合は、以下のように該当するリンクの<a>タグ内に、個別でnofollowを追加しましょう。
| <a rel=”nofollow” href=”リンク先のURL”> |
関連記事：nofollowとは？使用すべきケースSEOとの関係性を解説
メタタグの書き方
メタタグを記述する方法は以下の2つです。
- HTMLに直接記述する
- WordPressで設定する
一般的にはHTMLに直接記述することが多いですが、WordpressでWebサイトを運用している場合は、プラグインを活用することも可能です。
それぞれ見ていきましょう。
HTMLに直接記述する
HTMLファイルを作成している場合は、head要素内にメタタグを記載します。
なお、文字化けを防ぐために文字エンコーディングは必ず先頭に記述しましょう。
|
<html> <head> <!– ここからメタタグ –> </head> |
WordPressで設定する
WordPressでWebサイトを運営している場合は、以下のプラグインからメタタグを設置できます。
メタタグだけでなくSEOに関する設定もできるので、Wordpressを使用する方は導入しておくと便利です。
メタタグの確認方法とおすすめツール
メタタグを記述した後は、適切に設定できているか以下の方法で確認しましょう。
- HTMLソース
- Chrome拡張機能
- SEOチェキ！
それぞれ解説します。
HTMLソース
HTMLのソースでメタタグを確認する手順は、以下のとおりです。
- ブラウザを開き、確認したいページで右クリック
- 「ページのソースを表示」を選択または「Ctrl+U」でページを表示
- 表示されたHTMLコードのhead要素内に、<meta name=”〇〇”>のタグがあるか確認
Chrome拡張機能
GoogleChromeを使用している場合は、拡張機能「META SEO Inspector」でも確認できます。
インストールするだけで、閲覧ページのメタタグを一目で調査可能です。一つのページ内に複数のメタタグを設定する場合は、手間が少なく済むのでおすすめです。
SEOチェキ
SEOチェキ！は、無料で利用できるSEOツールです。調査したいページのURLを入力するだけで、メタタグが確認できます。
調査結果は以下のように表で表示されるため、ソースコードを読めない方でも簡単に調査可能です。
メタタグを設定する際の注意点
メタタグを設定する際は、以下の2点に注意してください。
- メタキーワードにSEO効果はない
- 設定後は必ず見直す
- キーワードの乱用には注意
使用方法を誤ると、SEOに悪影響を及ぼす恐れがあります。それぞれ見ていきましょう。
メタキーワードにSEO効果はない
メタキーワードは、特定のページがどのようなキーワードと関連するかを示すタグです。以前はページと関連性の高いキーワードを検索エンジンに伝える役割を担っていました。
しかし、現在はその効果がなくなったため、未設定でもSEOに影響はないとされています。
参照：Google 検索セントラル ブログ |Google はウェブ ランキングにキーワード メタタグを使用しません
効果がなくなった理由として、検索エンジンがページの情報を読み取れるようになったことが挙げられます。関連があるキーワードの検索結果に自動で反映されるようになったため、運営者側からキーワードを伝える必要がなくなりました。
設定後は必ず見直す
メタタグはクローラーの挙動を制御するため、設定を誤るとSEOに悪影響を与える可能性があります。
例えば、WordPressのプラグインを使って設定する場合、すべてのページに一括でnoindexを設定することも可能です。
その場合、サイト内のページがすべて検索エンジンにインデックスされなくなるため、大きな被害をもたらします。また、タイトルやディスクリプションのテキストを間違えると、ユーザーにコンテンツの内容が正しく伝わらなくなることもあります。
間接的にも悪影響が出る可能性があるため、実装後は必ず見直しましょう。
キーワードの乱用には注意
タイトルタグやメタディスクリプションで注意したいのが、キーワードの乱用です。上位表示を狙いたいからといって、対策キーワードを羅列するのは逆効果です。
検索エンジンがページの内容を正確に理解できなくなるだけでなく、ユーザビリティを下げる原因にもつながります。最悪の場合、低品質なコンテンツだと判断されてペナルティを受ける可能性も。
キーワードは乱用せず、検索エンジンやユーザーがページの内容を理解できるように、自然な形で入れましょう。
関連記事：コンテンツSEOとは？現役SEOコンサルタントが徹底解説
まとめ：メタタグを最適化して内部SEO対策を強化しよう
メタタグは、Webページの情報を検索エンジンやユーザーに伝える役割を担います。SEOへの直接的な影響はありませんが、適切に設定することでクリック数の上昇やクロールの効率を高められます。
本記事を参考に、自社サイトのメタタグを最適化して内部SEOを強化しましょう。
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。
