WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

メタタグとは?初心者でも分かる基礎知識とSEO対策の重要性

このエントリーをはてなブックマークに追加

メタタグとは?初心者でも分かる基礎知識とSEO対策の重要性

この記事では、メタタグについて詳しく説明します。メタタグとは、HTMLの一部に書かれる記述のことで、検索エンジンにWebサイトの情報を伝える役割を果たします。Webページを閲覧しているユーザーには見えないため、あまり重要視したことがない担当者もいるかもしれません。

しかし、適切にメタタグを設定することは、SEO対策としても重要な作業です。メタタグとSEOの関係や、設定しておくべき主要なメタタグの種類、メタタグの設定方法について解説します。

メタタグとは?

メタタグ(metaタグ)とは、設置する文書(ページ)に関する情報を指定する時に使用します。メタ要素とも呼ばれ、HTML文書で<head>~</head>要素内に記載し、検索エンジンにWebサイトの情報を伝える役割を果たします。

メタタグで記述された内容は、コンテンツ上では表示されないので、設定内容を確認したい時はHTMLソースを除く必要があります。

メタタグの指定内容は「コンテンツ上では表示されない」と書きましたが、titleやdescriptionというメタ要素で指定された内容は、検索エンジンの検索結果に表示されたり、記事がSNSでシェアされたときに表示されたりします。

ユーザーのクリック率を高めるためにも、メタタグの意義を理解して適切に設定しておきたい項目です。

メタタグとSEOの関係

メタタグは、直接的にSEO効果(検索順位を上げる効果)があるケース、ないケースどちらもあります。

つまり、いくらメタタグ内にキーワードを詰め込んでも、そのキーワードで上位表示できるわけではないということはあらかじめ理解しておきましょう。

ただし、多くのキーワードで上位表示を軒並み勝ち取っている競争力があるサイトは、総じてタイトルタグは最適化されています。SEO集客において、設定を疎かにすることは許されないのが、メタタグなのです。

メタタグのメリットをまとめると、以下の2点に集約されます。

検索エンジンの効率的なクロールを助ける

メタタグの中には、検索エンジンの巡回を拒否したり許可したりする役割を果たすタグがあります。
巡回必要なページかどうかを伝えることで、結果、検索エンジンから適切にクロールされ、検索結果へ望んだ状況で表示される可能性が高くなります。

また、逆に検索エンジンに登録させたくない(検索結果画面には表示させたくない)ページについて、検索エンジンに表示されないようにするための指示も記載できます。

ユーザーにサイトの内容を分かりやすく伝える

メタタグには、記事のタイトルを指定するタグ(titleタグ)、記事の要約を指定するタグ(descriptionタグ)などがあります。これらで指定したテキストは、検索結果画面やSNSのシェア情報として自動で表示されます。

Webサイトを訪問する前のユーザーにサイトの内容を伝える役割を果たすので、ここでユーザーのニーズを含めた内容を記載することで、クリック率を高めることができます。どんなにいい内容のコンテンツを準備できていても、タイトルや要約を見てクリックされなければアクセスにはつながらないので、メタタグの設定がアクセス数の肝を握っているとも言えます。

SEO対策で知って欲しい7つのメタタグ

では、具体的にはどんなメタタグを設定しておく必要があるのか、SEO対策に必要としておさえておきたい7つのメタタグを説明します。

title(タイトル)タグ

titleタグは文書にタイトルを付ける際に使用します。検索結果に表示される大事なタグなので、必ず最適化して設置しておきたいタグです。1つのページに1つだけ<title>記事のタイトル</title>という形で<head>~</head>内に記述します。厳密にはメタタグの中には入らないのですが、メタタグと一緒に設定しておくべきタグ要素なので、一緒に覚えておきましょう。

titleタグの中に、SEOで効果的なキーワードを含めることで順位向上を見込みことができる大事なタグです。最低限のSEO対策としてtitleタグは最適化するのをおススメします。

titleタグ(タイトルタグ)とは?SEOを意識した最適な文字数と記述方法

meta description(メタ ディスクリプション)

meta description(メタ ディスクリプション)タグには、ページの概要を120字程度で設定します。メタディスクリプションの設定によってSEO順位が変わることはありませんが、検索結果に表示される文章次第でクリック率に影響します。

メタディスクリプションは、好きな様に設定するものではなく、あくまでもページの概要を反映したものであるべきです。もし、ページの概要とは逸脱した設定内容だと検索エンジンが理解した場合、検索エンジン側が要約した文章をもって検索結果に反映されます。検索エンジン側が要約した文章は日本語の文法がおかしいので、検索エンジン側が要約した文章は良いわけではありません。

詳細なメタディスクリプションの設定内容は、下記記事を参考にしてください。

メタディスクリプションとは?SEOを意識した文字数と記述方法やよくある質問

文字エンコーディングの指定

HTML文書がどの文字コードでエンコーディングされているかは、charset属性を使用します。日本語の場合は、「utf-8」「shift_jis」「euc-jp」が該当します。日本語に対応されていない文字コードを使用すると、文字化けしたコンテンツが表示されることになります。charset属性は1つの文書に1つとなっています。

例えば「utf-8」を指定する場合、以下の記述を必ず入れます。

<meta charset="utf-8">

OGPタグ

SNSでのシェアを意識するなら、必須なのがOGPに関連するタグです。これはOpen Graph Protocolの略語で、SNSでシェアされた時にページのタイトル、アイキャッチ画像、URL、ディスクリプションを正しく表示させるための仕組みです。正しく設定されていないと、シェアされていたときのクリック率が低くなってしまいます。

OGPタグには複数の種類があります。基本的なコンテンツには、以下のタグを適宜設定してください。

ページURL

OGPを設定するWebページのURLを指定するためのタグです。

<meta property="og:url" content=" WebページのURL" />

ページタイプ

SNSでの表示方法にも関わる、ページの種類を指定します。TOPページならwebsite、それ以外の投稿記事などにはarticleと書きます。

<meta property="og:type" content=" ページタイプ" />

ページタイトル

シェア時に表示されるページタイトル。一般的にはtitleタグと同じでいいですが、サイト名などの共通項を除いてよりシンプルな内容で指定するとわかりやすいです。

<meta property="og:title" content="タイトル" />

description

シェア時に表示されるよう、短めの文字数でまとめたdescriptionを記述します。

<meta property="og:description" content="ディスクリプション" />

サイトタイトル

title属性から省いたサイトタイトルやブランド名などを、ここに設定します。

<meta property="og:site_name" content="サイトタイトル・ブランド名" />

画像URL

シェアされた時に表示されるサムネイル画像URLを指定します

<meta property="og:image" content="画像URL" />

ビューポートタグ

ビューポートタグは、モバイル端末での表示をブラウザに指示するためのメタタグです。レスポンシブデザインに必須のタグです。今はモバイルファーストであることが求められるので、忘れずに指定しましょう。

Google推奨のレスポンシブな記述は以下のとおりです。

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

noindex/nofollow

検索エンジンにインデックスされたくないページに記述しておきたいメタタグ要素です。インデックスやクロール不要なページを検索結果から除外することで、質の高いページのみがインデックスされるようになることで、サイト全体の評価が高まるようなSEOに良い影響があります。
Webフォーム回答後のサンクスページや、URLを知っているユーザーだけがアクセスできるページなど、検索エンジンのインデックス不要な場合によく使います。

以下のように記述することで、クローラーにページをインデックスさせないこと、リンクしているページをクロールしないようにすることを指示できます。

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

「メタキーワード」について

メタタグの中で、重要性が低いものにメタキーワード(meta keywords)タグがあります。
これは、以下の通りページに関連するキーワードを記述するためのタグです。

<meta name="keywords" content="キーワード1,キーワード2,キーワード3">

メタキーワードは従来、SEO対策で有効とされていましたが、今はSEO効果を見込むタグではありません。Googleの公式な言及でもSEO効果はないとされています。

メタタグを確認するには?

コンテンツを表示している分ではメタタグを見ることはないので、メタタグを確認したいなら意図的な操作が必要です。

HTMLのソースで確認する

メタタグを確認するためには、該当ページを開き、右クリックを行います。するとメニューが表示されるので、「ページのソース表示」をクリックしてください。すると、以下のようにソースコードが表示されます。

また、該当ページを開いた上で、「Ctrl + U」をクリックしてもソース閲覧画面が開きます。この画面内で、メタタグの表示を確認してください。

ソース閲覧画面のスクリーンショット

Chromeの拡張機能「META SEO Inspector」で確認する

ブラウザのChromeを使っている場合は、拡張機能を使うことでより簡単に確認可能です。

「META SEO Inspector」をインストールすると、閲覧中の画面のメタタグをすぐに確認できるようになります。分析作業を効率化できるので、たくさんのページのメタタグを確認する場合などはぜひ活用してみてください。

以下のURLからインストールできます。

https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef

メタタグの作成方法

メタタグを作成するには、HTMLファイルに直接書き込む、Wordpressの場合はプラグインもしくはテーマで既に用意された記述ボックスを活用する、という方法があります。

HTMLで直接書き込む

HTMLファイルを作成している場合は、<head>要素内に必要なメタタグを記述します。各メタタグの記述方法は、本記事を参考にしてください。

WordPressを使う

WordPressの場合、プラグインを活用することでメタタグを記述することができます。いちいちFTPでアップロードする必要もなく、手軽です。

よく使われているプラグインは、「Yoast SEO」や「All in one SEO Pack」です。メタタグの設定のほか、WordpressのSEO効果を高めるための設定を一度にできるので、導入することをおすすめします。インストールすると入力画面が表示されるようになり、フォームを埋めるようにすれば設定が完了するので楽です。

知っておくと便利なYoast SEOの使い方、活用方法

初心者でもわかるAll in One SEO Packの設定・使い方

ただしwordpressのテーマの中には、プラグイン追加せずにメタタグを設定できる記述ボックスが最初からついている場合もあります。

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

最後に、メタタグを作成する際の注意点を2つお伝えします。

メタタグは<head></head>に囲まれた中に記述する

まずは、HTMLファイルに直接記述する際の注意点です。気をつけるのは、メタタグを記述する場所です。HTMLファイルは大きく<head>部分と<body>部分に分かれます。このうち、メタタグを記述するのは<head>部分です。<body>内はWebサイトの中身部分を各場所なので、ここにメタタグを記載しても意味がありません。

簡略化すると、

<html>
 <head>
 head部はブラウザや検索エンジンについての情報を記載する場所。ブラウザ上は表示されない。メタタグはここに書く
 </head>
 <body>
 ブラウザ上で表示される場所。コンテンツはここに書く
 </body>
</html>

となります。記載する場所を間違えると、ページデザインもおかしくなり、検索エンジンに指示ができないので、くれぐれも注意しましょう。

キーワードを詰め込みすぎない

ついつい関連するキーワードをたくさん盛り込んでしまいたくなりますが、あくまでもコンテンツの内容に関連するキーワードだけに絞って記載しましょう。たくさん詰め込みすぎると、何が大事なキーワードかが逆に分からなくなります。あくまでも、「内容をわかりやすく伝える」ことを意識しながら、シンプルな記述を心がけてください。

おわりに

メタタグは、検索エンジンやユーザーに記事の内容を伝える重要な役割を果たします。今まであまり意識したことがなかった方は、メタタグの意義を理解して、適切に設定するようにしてください。クリック率向上など、Webサイトの効果改善につながるはずです。

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード

問い合わせCTA

セルマーケ

SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2021 DM SOLUTIONS Co.,Ltd. All rights reserved.