大阪市でWebサイト作成を行うセブンデザイン 大阪にある成果重視のホームページ制作会社

  • 公開日: 最終更新日:

メタタグ(meta tag)とは?SEOに役立つタグや書き方、確認法を解説

メタタグ(meta tag)は、ブラウザでホームページを閲覧していても表示されませんが、検索エンジンがページの内容を把握するために利用できるタグのことを言います。

適切なメタタグの設定は、検索順位や検索結果でのクリック率を高めることができるので、SEOにおいて重要なタグになっています。

当ページでは、メタタグとは何か、SEOで重要な理由、書き方、SEO効果のある種類、Googleがサポートを終了したタグ、作成の注意点を解説します。

メタタグ(meta tag)とは

メタタグ(meta tag)とは、ページの情報を記載するタグのことを言います。

メタタグは、ブラウザでホームページを閲覧しても表示されることはありませんが、検索エンジンやブラウザそのものに対して、ページの情報を紹介することができます。

つまり、適切にホームページを表示させたり、検索エンジンがより深くページの内容を把握することができるので、SEO効果が高くユーザーフレンドリーなホームページには必須のタグとなります。

このページはSEOに特化していますので、ホームページ制作で利用されることが多いメタタグの一覧はこちらをご覧ください。

メタタグがSEOで重要な理由

メタタグがSEOで重要な理由を解説します。

検索エンジンがより深くホームページを理解できる

メタタグの中には、検索結果に表示される内容や、インデックスを拒否するタグなどがあります。

検索結果に表示される内容に、適切にページの要約文を入れることによって、検索エンジンがより深くページを理解することを助けます。

さらに、インデックスが必要ないページにメタタグを入れることで、サイト全体のクロール効率が高まり、検索エンジンから読みやすいホームページと認識されます。

適切なメタタグの利用を行うことで、検索エンジンがより深くホームページを理解することができるようになるので、高いSEO効果を発揮できる可能性があります。

検索結果でのクリック率が高まる

メタタグの中には、検索結果に表示される内容が含まれています。

検索エンジンは、検索結果でのクリック率を確認して、SEO評価を行っています。

検索結果でクリックされることが多いページは、多くのユーザーに人気があるページと言えるので、検索順位を高めているのです。

ただし、検索結果でのクリック率が高いけれども、大半のユーザーが、ブラウザバックなどで検索結果に戻ってしまうと、SEO評価を落とすだけなので、良質なコンテンツを作成することの重要性は高いです。

ページの表示を最適化できる

メタタグはブラウザにホームページの情報を伝える役割もあります。

例えば、ビューポートタグを設定していれば、スマホ対応のレスポンシブWebデザインに対応しているので、ユーザーがアクセスした媒体ごとに適切なレイアウトを表示してくれます。

さらに、文字コードを設定していれば文字化けを防ぐことが可能です。

このようにページの表示を最適化することで、ユーザー行動が最適化され、その結果SEO効果を高めることができます。

また、Googleはメタタグの確認を行っているので、適切に設置されていればSEO効果も見込めます。

Googleが認識しているメタタグはこちらのページで紹介されています。

メタタグの書き方

メタタグの書き方を解説します。

メタタグの設置場所は、<head>・・・</head>内でなくてはならず、<body>・・・</body>に記述してしまうと、検索エンジンとブラウザから無視されてしまうので注意しましょう。

基本的な書き方

メタタグの基本的な書き方は以下です。

<meta name="属性名" content="値">

属性名は1つですが、値はいくつでも設定ができ、2つ以上利用する場合には、「,(カンマ)」で区切ります。

WordPressの場合

WordPressでメタタグを記述する方法は、「All in One SEO」や「Yoast SEO」などの専用のプラグインをインストールして有効化します。

そうすると、OGP設定ページが生成されます。

WordPressのOGP設定ページ

さらに、各投稿画面の下部にmeta要素の記述欄が表示されるようになります。

WordPressでメタ要素を記述する箇所

記述したmeta要素は、headタグ内に自動で記述されます。

HTMLの場合

HTMLに直接メタタグを記述する場合は、HTMLファイルをテキストエディターなどのソフトで開きましょう。

開かれたHTMLファイルの<head>・・・</head>内に希望のメタタグを記述して、FTPを使ってアップロードすれば完了です。

ただし、すべてのページで同じメタタグが必要な場合は、1ページだけではなく、全ページに導入しなくてはなりません。

SEOに役立つメタタグの種類

SEOに役立つメタタグの種類を解説します。

meta description

<meta name="description" content="・・・・" />

meta descriptionとは、Googleの検索結果に表示される2行ほどのテキストで、meta descriptionとは?のページで詳しく解説しています。

検索結果に表示されるmeta description

meta descriptionを作成することで、検索結果でのクリック率を高める効果があり、さらにはGoogleはmeta descriptionとページの関連性を判断しています。

Googleはmeta descriptionを見ている

そのため、メタタグの中でも重要性が高いと言え、適切なmeta descriptionを作成することで高いSEO効果を発揮します。

また、SEOに特化したmeta descriptionの作成法はこちらで紹介しています。

文字コード

<meta charset="UTF-8″>

文字コードとは、HTML内で利用されている文字のエンコーディング法を指定するメタタグです。

文字コードが適切に設定されていないと、ホームページの文章が文字化けを起こしたり、正常に表示されないことがあります。

一般的に日本のホームページであれば、UTF-8を指定しておけば問題ありません。

OGPタグ

OGPタグでは複数のメタタグを記述します。

一般的に利用される内容は以下です。

<meta property="og:title" content="(ページタイトル)" />
<meta property="og:description" content="(meta description)" />
<meta property="og:url" content="(ページのURL)"/>
<meta property="og:image" content="(SNSで表示させる画像のURL)" />
<meta property="og:type" content="(記事の種類)" />
<meta property="og:site_name" content="(サイト名)" />

OGPタグは、XやFacebookなどのSNSにURLが投稿されたときに、リンクを大きく表示させるメタタグです。

昨今では、検索エンジンからの訪問者と遜色がないくらいSNSからアクセスするユーザーも増えているので、必ず実装したいメタタグと言えます。

ビューポートタグ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ビューポートタグは、スマートフォンとタブレットなどのデバイスで画面領域に合わせたレイアウトに変更させるメタタグです。

ビューポートタグが利用されるシーンは、レスポンシブWebデザイン作成の実装時になり、モバイルフレンドリーなホームページを制作する際には必須のメタタグになっています。

noindex

<meta name="robots" content="noindex">

noindexとは、検索エンジンにインデックスしなくても良いページに記述するメタタグです。

ホームページを運営していると、サイト内の内部リンクを使った訪問者はアクセスして欲しいけれども、検索結果には表示されたくないページが存在することがあります。

例えば、問い合わせフォームの確認画面やサンクスページなどは、検索結果に表示させる必要がないので、noindexを設定することが一般的です。

また、検索エンジンにインデックスさせないためには、robots.txtでクローラーのアクセスを拒否すれば、該当ページが検索結果に表示されることはありません。

noindexとrobots.txtの違いは、noindexはクローラーがアクセスしたうえでインデックスをしない、robots.txtはクローラーがアクセスできないという違いがあります。

robots.txtについて詳しくはこちらをご確認ください。

nofollow

<meta name="robots" content="nofollow">

nofollowとは、そのページで利用しているリンクを検索エンジンが辿らないようにするメタタグです。

検索エンジンは、リンク元と先ページの関連性がある場合に、リンク先ページのSEO評価を高めていて、リンク先ページのSEO評価を高めたくない場合に、nofollowが利用されます。

ただし、メタタグのnofollowは、実装されたページにあるすべてのリンクに適応されるので、メタタグではなく以下のようにリンクごとに設定することが一般的です。

<a href="https://・・・.jp/" rel="nofollow">アンカーテキスト</a>

(番外)タイトルタグ

タイトルタグはメタタグではありませんが、一緒に知っておくべきタグなので紹介します。

<title>・・・</title>

タイトルタグはSEOで重要なタグです。

検索結果に表示されるタイトルタグ

タイトルタグで使われたキーワードは、直接的に検索順位を高める効果があり、さらには適切なタイトルタグを利用することで、検索結果でのクリック率を高める役割もあります。

SEOに多くの時間がかけられないWebマスターであれば、ページの内容の要約文をタイトルタグに設定して、魅力的な文章とするだけでも効果が発揮できる可能性があります。

また、タイトルタグについて詳しくはこちらで、SEOに強いページタイトルの作成法はこちらで解説しているので、興味があればご覧ください。

Googleがサポートを終了したメタタグ

Googleがサポートを終了したメタタグを紹介します。

メタキーワード

<meta name="keywords" content="・・・">

メタキーワードとは、従来は検索エンジンに対して、各ページで重要なキーワードを伝えることができたメタタグです。

しかし、現在の検索エンジンはメタキーワードに頼らなくても、適切にコンテンツ内容が把握できるようになったので、廃止されたメタタグになります。

Googleはメタキーワードを廃止していますが、現在でも利用しているホームページも見られ、もしかしたら何かしらの効果があるかも知れないので、判断はWebマスター自身で行いましょう。

クローラーの再訪を指定

<meta name="revisit-after" content="10 days" />

クローラーの再訪を指定するメタタグでは、何日おきに各ページに検索エンジンのクローラーに訪問して欲しいかを記述できるメタタグです。

現在の検索エンジンは、アルゴリズムによって、ページの重要性からクローラーの訪問頻度を自動的に最適化することができるようになったので廃止されています。

メタタグの確認法

ホームページに実装したメタタグの確認法を解説します。

ソースコードから確認

メタタグを確認したいページ上で右クリックを行い、「ページのソースを表示」をクリックしましょう。

そうすると、以下のようにソースコードが表示されるので、そこから記述したメタタグを確認できます。

ソースコードからメタタグを確認

また、メタタグは必ず「meta」と記述があるので、ブラウザの検索機能を利用すると分かりやすいです。

Google Chromeの拡張機能で確認

Google Chromeの拡張機能になるMETA SEO Inspectorを利用すれば、効率よくメタタグの確認が行えます。

インストール後に、ページをリロードしてから拡張機能を開き、<HEAD>をクリックすると以下のようにさまざまなタグが表示されます。

META SEO Inspector

METAと書かれている箇所がメタタグになるので、効率よく確認することができます。

メタタグを作成するときの注意点

メタタグを作成する際の注意点を解説します。

キーワードの詰め込みや辞める

メタタグにキーワードを詰め込んでもSEO効果はありません。

さらに、過剰にキーワードを詰め込んでいる場合は、キーワードスタッフィングと認識され、検索結果から除外されるリスクがあります。

そのため、ユーザー目線に立ってメタタグを作成することが重要で、魅力的な文章を作成していれば、SEO効果を発揮することができるでしょう。

検索順位を上げるためだけに設置をしても意味がない

検索順位を上げるために多くのメタタグを実装したり、不要かもしれないと思うものを削ったりしても、期待通りの効果を得ることはできません。

検索順位を上げるために実装したとしても効果が見られないので、ユーザーに価値あるメタタグだけを実装しましょう。

メタタグのまとめ

メタタグについて解説しました。

適切なメタタグの実装は、SEO効果や、ホームページの訪問者の利便性を高めることができます。

メタタグって何を入れればいいの?とお悩みのWebマスターの参考になれば幸いです。

関連ページ

Web作成会社
適切なメタタグを実装するWeb作成会社
SEOサービス
ホームページに最適なメタタグを提案するSEOサービスを紹介
記事一覧に戻る