メタ要素とは?今さら聞けないデジタルマーケティングの基本

2021/10/19
BtoBマーケティング デジタルマーケティング メタ要素 メタ要素とは?今さら聞けないデジタルマーケティングの基本

本記事は、「今さらだけど、メタ要素ってなに?」という方のために作成しました。

SEO対策やWebサイト運営に関わっていると、必ず「メタ要素」を見聞きします。しかし、メタ要素について正しく理解している方は案外少ないものです。1年以上活動しているマーケターの中にも、メタ要素を理解できておらず、正しく扱えていないケースがあります。

今回はそんなメタ要素について徹底解説しているので、その概要や重要性を理解し、是非とも日頃のSEO対策やWebサイト運営に取り入れてください。それでは、メタ要素の基本からご紹介します。

メタ要素とは?

「メタ(meta)」には「ある事柄の内容や性質を説明するデータ」という意味があります。また「さまざまな観点から説明されたデータ」という意味合いもあるため、メタ要素は1つのデータだけを指しているワードではありません。

例えば「Basketball」という事柄に対するメタ情報には、次のようなデータがあります。

メタ情報

「Basketball」は、スポーツでありアメリカの人気スポーツであり、本場はNBAです。さらに「Basketball」そのものはアルファベットというメタ情報もあります。このように1つの事柄に対して、無数のメタ情報が存在すると言ってよいでしょう。

Webサイトやコンテンツのメタ要素

上記のメタ要素の考え方を、Webサイトやコンテンツに置き換えてみましょう。後述するいくつかのメタ要素は、Webサイトやコンテンツの内容・性質を表しています。では、何のためにメタ要素が存在するのでしょうか。

それは「Googleなどの検索エンジンに対して、Webサイトやコンテンツの内容を示したり、指示したりするため」です。以下のHTMLソースは『BtoB企業が行うべきマーケティング分析とは?今さら聞けない基本的分析手法をわかりやすく解説』のものです。

メタ要素コンテンツ

黄色に表示されている部分がメタ要素です。それらは検索エンジンに対して、コンテンツの内容を表したり指示したりしています。こうしたメタ要素は、単に内容を表すだけでなく、SEO対策上で重要な役割を持っています。

メタ要素が重要な理由とその目的

Googleなどの検索エンジンは、世界中のWebサイトやコンテンツを評価しています。しかし評価するのは人ではなく、「クローラー」と呼ばれるロボットです。

クローラーは世界中のWebサイトを回遊して、コンテンツの内容等を評価しています。ただ、人が文章を読むようにコンテンツの質を判断しているのではありません。キーワードの種類やその数、HTMLで構造化された文章などを判断軸にしており、ここでメタ要素が大きな役割果たしています。

例えば「タイトルタグ」で囲まれたテキストは、当該コンテンツのタイトルとして認識され、そこに挿入されているキーワードがまず重視されます。「no indexタグ」を挿入すれば、検索エンジンに対して「このコンテンツはインデックス(登録)するな」と指示を出せます。

メタ要素はそれぞれ意味を持ち、検索エンジンに対して内容を表したり指示を出したりしているのです。それによって検索エンジンからの評価が変化し、SEO効果が生まれることもあれば生まれないこともあります。

Webサイトやコンテンツに対して、メタ要素を正しく設定できているか否かは、SEO対策の生命線と言ってもよいでしょう。

知っておくべき代表的なメタ要素とは?

SEO初心者でも最低限知っておくべきメタ要素が6つあります。それらのメタ要素を正しく設定することは、Webサイトやコンテンツが検索エンジンに正しく評価されるためのSEO対策の第一歩です。では、代表的なメタ要素を1つずつ解説します。

ちなみにいずれのメタ要素も<head></head>タグ内に入れるのがルールなので、忘れないようにしましょう。

タイトル

Webサイトやコンテンツのタイトルを表すメタ要素です。例えば「株式会社LEAPT」と検索すると、次のような検索結果が表示されます。

メタ要素タイトル

赤枠で囲まれた部分がタイトルです。これはメタ要素によって設定されているため、「株式会社LEAPT(レプト)| BtoB SaaS マーケティング 支援 …」がタイトルとして表示されています。ちなみにタイトルタグは次のように使用します。

<title>ここにWebサイト名やコンテンツ名を入れる</title>

<title></title>で囲った部分がタイトルとして認識され、検索結果に表示されるようになります。タイトルにキーワードが含まれていなかったり、重複したタイトルがいくつもあったりするとSEO効果が低くなる可能性があるため、タイトル決めは慎重かつ体系的に行いましょう。

ちなみにキーワード選定では「トピッククラスター」の考え方が役立ちます。トピッククラスターは以下の記事で解説しているので参考にしてください。

関連記事:サジェストキーワードとは?コンテンツのSEO対策で理解すべきこと

ディスクリプション

ディスクリプションは、Webサイトやコンテンツの紹介文のようなものです。先程と同じように「株式会社LEAPT」で検索し、表示された検索結果の赤枠部分がディスクリプションです。

メタ要素ディスクリプション

ディスクリプション設定の有無、キーワード挿入の有無によって、検索エンジンからの評価が変わることはありません。

しかしディスクリプションを正しく設定していると、ユーザーの目を引きやすく、結果として自然検索からの流入数増加に繋がります。ちなみにWebサイトやコンテンツのディスクリプションは次のように設定します。

<meta name="description" content="ここにWebサイトやコンテンツの紹介文を入れる">

また、コンテンツごとに設置したディスクリプションは必ずしも表示されるわけではありません。あくまで検索エンジンの判断によるので、設定した紹介文ではなく記事中の文章が引用されるケースもあります。

さらに「強調スニペット」と呼ばれる形式でコンテンツが表示された場合、ディスクリプション部分は紹介文ではなく「検索に対する答え」が必ず表示されます。

メタ要素ディスクリプション2

キーワード

次のメタ要素はキーワードです。一見重要そうなメタ要素ですが、実は検索エンジンの評価には全く影響ないとGoogleが公言しています。

ちなみにYahoo!の検索エンジンはGoogleをベースにしているので「Yahoo!向けに設定する」という行為も不要です。ちなみに記述方法は次のようになります。

<meta name="keywords" content="ここにキーワードを入れる">

キーワードはカンマで区切り、複数設定できます。ただし、前述のようにSEO効果は無いので設定せずとも大丈夫です。検索エンジンはタイトルや文章中のキーワードを拾ってコンテンツのテーマなどを判断しています。

Webサイト制作やSEO対策を他社に依頼した方は、キーワードが設定されているか否かを一度確認してみてください。Googleはキーワードのメタ要素を無視しているようですが、キーワードが詰め込まれているとSEO効果が薄れる可能性も考えられます。

悪質なWebサイト制作・SEO対策の会社にあたってしまった方は、キーワードが無意味に詰められている可能性もあるので確認してみましょう。

ロボット(robots)

ロボットのメタ要素は、検索エンジンに具体的な指示を出すためのもの。キーワードと違ってロボットの設定は重要です。

例えば「no indexタグ」なら、検索エンジンへのインデックス(登録)を拒否し、「nofollowタグ」ならリンク先へSEO評価を渡さないと指示できます。

  • 「no indexタグ」の設定方法

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

  • 「nofollowタグ」の設定方法

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

ちなみに「nofollowタグ」は、コンテンツ全体だけでなくコンテンツ内のリンクごとに設定するのも可能です。その場合は上記のタグは使用せず、以下のようにリンクごとに設定します。

<a href="リンク先のURL" rel="nofollow">アンカーテキスト</a>

ロボットのメタ要素は、インデックス不要のコンテンツを知らせたり複数コンテンツのSEO評価を1つのコンテンツに統合したり、正しい使い方をするとSEO効果を高められる可能性があります。

OGP

OGPというメタ要素は、FacebookやTwitterといったSNS上でWebサイトやコンテンツがシェアされた際に、SNS上で表示されるタイトルやサムネイル画像、詳細情報を設定するためのものです。

例えば以下のHubSpot社のツイートは、同社Webサイトのコンテンツ『HubSpot日本法人の代表に元Googleの廣田 達樹が就任』をTwitterでシェアしたものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【ニュースリリース】<br>HubSpot Japanのカントリーマネージャーとして廣田 達樹(ひろた たつき)が就任し、日本法人の代表となりました。日本企業のニーズを一層確実に製品・サービスに反映する体制を整え、日本市場への貢献と事業の拡大を目指してまいります。

<a href="https://t.co/UnpxybxNRQ">https://t.co/UnpxybxNRQ</a></p>&mdash; HubSpot Japan (@HubSpotJapan)
<a href="https://twitter.com/HubSpotJapan/status/1442629192957538307?ref_src=twsrc%5Etfw">September 27, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コンテンツのメタ要素としてOGPが設定されているため、SNSでシェアした際に上記のように表示されるようになっています。OGPをメタ要素として設定する際は、次のように記述します。

<meta property="og:url" content="コンテンツのURL"/>

<meta property="og:title" content=" コンテンツのタイトル"/>

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

<meta property="og:site_name" content="Webサイト名"/>

<meta property="og:image" content="サムネイル画像のURL"/>

直接的なSEO効果はありませんが、SNS上でWebサイトやコンテンツがシェアされた際の見栄えが決まります。

viewport

viewportは、スマートフォンやタブレットでWebサイトやコンテンツを表示した際のサイズを最適化するための、極めて重要なメタ要素です。

viewportを設定すると、Webサイト全体が「レスポンシブデザイン対応」に変化し、使用端末のディスプレイサイズに合わせて自動で最適化されます。

Googleは数年前からレスポンシブデザインを推奨しており、今やSEO対策において対応は必須です。viewportが設定されていないと、使用端末によってはレイアウトが崩れてしまい、ユーザビリティを下げる原因にもなります。基本的な記述方法は以下のようになります。

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

ちなみにviewportではレイアウトサイズを固定幅に設定することも可能です。以下は最終更新から3年経過していますが、viewportを概念から簡潔に説明してくれているので一読してみてください。

もう逃げない。HTMLのviewportをちゃんと理解する』Qiita

(分かりやすくて良い記事なのですが、最終更新から時間が立っているのでnofollow設定がよいかもしれません)

コーディングができない人がメタ要素の設定を行うには

メタ要素が何かは理解できたが「<head></head>タグ内に入れる」とか「記述するとか」はよくわからない、という方も多いでしょう。SEO対策やWebサイト運営に慣れてくるまで、HTMLを理解するのはなかなか難しいものです。

しかしご安心を。コーディング(HTMLを記述すること)ができない方でも、メタ要素を設定できます。それを実現するのが「CMS(コンテンツ管理システム)」と呼ばれるツールです。

コーディング不要でメタ要素設定可能なCMSの活用

SEO対策やWebサイト運営に、CMSは欠かせません。世界で最も使われているCMSとは、皆さんご存知「WordPress(ワードプレス)」です。

WordPressなどのCMSは、単にWebサイト全体を管理するだけでなく、プラグイン(拡張機能プログラム)を入れることでメタ要素の設定もできます。しかも簡単な操作で設定可能です。

ここではWordPressのSEO対策で人気のプラグインと、有料CMSとして人気の「HubSpot(ハブスポット)」をご紹介します。

WordPressのAll in One SEO

コーディング不要でメタ要素を設定できるツールとして有名なのが、WordPressのプラグインである「All in One SEO」です。200万以上のWebサイトにインストールされており、更新頻度が高いのでセキュリティ面でも比較的安心して利用できます。

WordPressのAll in One SEO1

(出典:All in One SEO)

旧インターフェースでの解説記事は多いのですが、新しいインターフェースでの使い方を解説している記事が少ないので、本記事で具体的にご紹介します。まずはWordPressにAll in One SEOをインストールしましょう。

WordPressの管理画面にアクセスし、左側メニューの「プラグイン」にカーソルを合わせたら「新規追加」をクリックしてください。検索窓に「All in One SEO」と入力し、Enterを押下すればAll in One SEOがトップに表示されるので、続けて「今すぐインストール」をクリックしましょう。

WordPressのAll in One SEO2

※上記ではインストール済みなので「有効」と表示されています

インストールが完了したらプラグイン一覧を表示し、「有効化」をクリックしてください。これでAll in One SEOがWordPressに追加されました。すると左側メニューにAll in One SEOが追加されるので、カーソルを合わせて「検索の外観」をクリックし、さっそくメタ要素の設定を進めましょう。

まずは「Global Setting」から。ここではWebサイト名で検索された際に表示されるメタ要素を設定できます。①ではWebサイトのタイトルを設定でき、②ではWebサイトのディスクリプションが設定可能です。

WordPressのAll in One SEO3

出力されたHTMLを確認してみますと、しっかりとタイトルとWebサイトのディスクリプションが設定されていますね。

WordPressのAll in One SEO4

同じ要領で「Content Type(投稿・固定ページの設定)」も行いましょう。それ以外の「Taxonomies」「Image SEO」「Archives」「Advanced」の設定はデフォルトのままでOKです。

投稿記事ごとのメタ要素設定は投稿ページにて行えます。デフォルトでは投稿画面の下部に表示されているので、画面をスクロールしてみましょう。投稿記事のタイトルと、ディスクリプションを設定できます。

WordPressのAll in One SEO5

「Social」タブに移動すると、同じようにSNS上でのタイトルとディスクリプションが設定可能です。投稿記事ごとのロボット設定は「Advanced」タブに移動し「Use Default Setting」をオフにしましょう。これで「no index」や「no follow」といったタグを簡単に設定できます。

WordPressのAll in One SEO6

以上のようにAll in One SEOを使えば、コーディングが出来ない方でもごく簡単にメタ要素を設定できます。

有料のプロ版も提供されていますが、ひとまず無料版で十分です。プロ版には高度な機能とサポートが含まれていますが、それが無くても十分なSEO対策が可能なので、まずは無料版を使い倒しましょう。

HubSpotのCMS Hub

続いてご紹介するCMSは、統合的なマーケティングツールを展開するHubSpot(ハブスポット)から提供されている「CMS Hub」です。こちらは無料ではなく、月額2,700円~で利用できます。

HubSpotのCMS Hub1

(出典:CMS Hub)

All in One SEOと大きく異なる点は、メタ要素の設定に加えてWebサイトテーマを使用したカスタマイズやドラッグ&ドロップのカスタムコード作成、CRMとの連携などWebサイト運営に欠かせないツールまでカバーしている点です。

HubSpotのCMS Hub2

まずは月額2,700円のスタータープランから始めて、管理を適用するWebサイトが増えるにつれて上位プランを検討しましょう。

まとめ

メタ要素の知識があるか否か、メタ要素の大切さを理解しているか否かでSEO効果は大きく変わります。今回6つのメタ要素をご紹介しましたが、キーワード以外は全て重要なメタ要素です。

これまでSEO対策やWebサイト運営に取り入れていなかったという方は、この機会にメタ要素の知識と技術を深め、ぜひ今日から取り入れてください。

Webサイトやコンテンツに設定するメタ要素は、検索エンジンにとってガイドのような存在です。検索エンジンを正しく導き、正しい評価を受けられるよう努めましょう。

戸栗 頌平(とぐりしょうへい)

著者情報 戸栗 頌平(とぐりしょうへい)

株式会社LEAPT(レプト)の代表。BtoB専業のマーケティング支援会社でのコンサルティング業務、自社マーケティング業務、営業業務などを経て、HubSpot日本法人の立ち上げを一人で行い、後に日本法人第1号社員マーケティング責任者として創業期を牽引。B2Bの中小規模企業のマーケティングに精通。趣味で国外のマーケティングイベント、スポーツイベント、ボランティアなどに参加している。

サービスを詳しく知りたい方はこちら

資料請求