メタタグって何？わかりやすく解説

Webサイトのことを調べていて、検索結果の画面で「青い文字が出てきて、その下に説明が書いてある」ってことありますよね。実はあの「青い文字」と「説明文」は、Webサイトの作られ方に大きく関係しているんです。今日は、その秘密を担当している「メタタグ」について、一緒に学んでいこう。この記事を読めば、Webサイトの見えない部分がどう動いているのか、スッキリわかるようになりますよ。

メタタグというのはね、Webページを作るHTMLという言葉の中に隠れている、特別な情報のこと。Googleなどの検索エンジンに「このページはこんなサイトですよ」って教える役割をしてるんだ。

そう。Webサイトを見ているときに、あなたが目で見てる部分ってほんの一部なんだ。裏側には、そのページをどう表示するか、検索結果にどう載せるか、みたいな「指示書」が隠れてるんだよ。その指示書の一部がメタタグというわけ。

いい質問だね。自分でWebサイトを作ったりするなら、メタタグを正しく設定することで、検索結果に素敵に表示させることができるんだ。だから、Webサイトを作る人なら知ってると得しますよ。

もうちょっと詳しく

メタタグが活躍する場所は「検索結果画面」です。Googleで何か検索したときに、画面に青い文字で「Webサイトのタイトル」が出ますよね。その下に灰色の文字で説明文が出ます。実はその「タイトル」と「説明文」は、Webサイトの作り手がメタタグで指定しているんです。つまり、メタタグはWebサイト作成者が「検索結果に自分たちのサイトを『こんな風に見せたいな』」という想いを形にするための道具なんですよ。

⚠️ よくある勘違い

[toc]

「メタタグ」ってどういう意味？

メタタグの「メタ」という言葉を聞いたことありますか。ちょっと難しい単語ですが、説明しますね。「メタ」というのは、つまり「データについてのデータ」という意味なんです。ちょっと頭がこんがらがるかもしれませんが、簡単に言うと「情報についての情報」ってことですよ。

具体的な例を出してみましょう。あなたが図書館で本を借りるときを考えてください。本の表紙には、本のタイトルや作者の名前、どんな内容か説明する文章が書いてありますよね。その表紙に書いてある情報って、本そのものではなく「この本についての説明」です。つまり、本の内容についての情報。これが「メタ」の概念に近いんです。

Webの世界でも同じ。Webページの実際の内容（あなたが画面で見てる文章や写真）とは別に、「このWebページはどんなページか」という情報があるわけです。その情報が「メタデータ」で、メタデータを記入する場所が「メタタグ」というHTMLのタグなんです。だから、メタタグの役割は「このWebページについての説明を書き込む場所」と言えるんですよ。

メタタグはWebページのHTMLコードの中でも、見えない部分に配置されています。あなたがブラウザで見てるWebページって、実は見えない指示書みたいなコードがたくさん隠れてるんですよ。その隠れてるコードの一部が、メタタグです。ページを右クリックして「ページのソースを表示」とか選ぶと、その隠れてるコードが見えちゃいます。一度やってみると「あ、こんなコード書いてあるんだ」って驚きますよ。

メタタグにはどんな種類がある？

メタタグって言っても、実はいくつか種類があるんです。中でも特に大事なものを紹介しますね。

まず「タイトルタグ」。これはWebページの題名みたいなもので、ブラウザのタブの部分に表示されます。そして何より、Googleで検索したときの検索結果画面に、大きく青い文字で表示されるんです。例えば「メタタグって何？」で検索したときに、一番上に表示されるサイトのタイトルってありますよね。あれがタイトルタグで設定されたものなんです。タイトルタグはとても重要で、ユーザーが「このサイト見てみようかな」って思うかどうかを大きく左右します。だから30～60字くらいの、分かりやすくて、クリックしたくなるようなタイトルを付けるのが大事なんです。

次が「ディスクリプション」。これは、つまり「ページの説明文」のことですね。検索結果画面でタイトルの下に灰色で出てくる、あの説明文です。「このサイトに行ったら、こんなことが書いてるよ」という情報を書き込む場所なんです。120～160字くらいで、ページの内容をちゃんと説明する文を書くのが大事。間違った説明を書いちゃうと、ユーザーがサイトに来たときに「あ、何か違う」ってなっちゃいますからね。

「キーワード」も昔はめっちゃ重要なメタタグだったんです。Webページに関連する単語をここに書き込んでたんですよ。でも今は、Googleがそんなに重視してないので、あんまり意識しなくてもいいかもしれません。でも、万一のために書いておくのは損じゃないですよね。

「Viewport（ビューポート）」っていうメタタグもあります。これは、つまり「スマートフォンやタブレットでどう表示させるか」という指示を書き込む場所なんです。スマートフォンで見るときにうまく表示されるようにするために、使われるメタタグですね。今はスマートフォンでWebサイトを見る人がほとんどなので、このメタタグの役割は本当に大事なんですよ。

なんでメタタグが大事なの？

メタタグが大事な理由は、主に３つあります。

１つ目は「検索エンジンへの情報提供」。Googleなどの検索エンジンは、毎日何十億というWebページを巡回していて、それぞれのページが「どんなページなのか」を判断しなきゃいけません。そのときに、メタタグに書かれた情報が大きな手がかりになるんです。タイトルやディスクリプションを読むことで「あ、このページはダイエットについてのサイトなんだな」とか「このページは料理レシピを紹介してるんだ」とか判断するわけですよ。正確で分かりやすいメタタグが書いてあれば、検索エンジンも「このページはどういう内容なのか」って正しく理解しやすくなります。

２つ目は「ユーザーの行動に影響する」。検索結果の画面で、あなたが「このサイト見てみよう」って判断するときって、タイトルと説明文を見てますよね。タイトルと説明文が分かりやすくて、「おお、これ読みたい」って思えれば、クリックする。そしたら、そのサイトへのアクセスが増えるわけです。だから、メタタグはWebサイト作成者にとって、とても大事な「営業ツール」みたいなものなんですよ。

３つ目は「Webサイトの評価に関わる」。検索エンジンって、実はWebサイト自体の質も見てるんです。つまり「ユーザーが満足するようなサイトか」ってことですね。もし、メタタグに書いてあることと、実際のページの内容が違ってたら、ユーザーは「あ、何か違う」って思ってすぐ別のサイトに行っちゃいます。そしたらGoogleは「あ、このサイトは質が低いのか」って判断しちゃう。だから、正確でユーザーの期待に応えるメタタグを書くことが大事なんですよ。

メタタグを実際に書いてみよう

では、実際のメタタグはどんな風に書くのか。例を見てみましょう。

<title>メタタグとは｜あーそういうことか</title>
<meta name="description" content="メタタグの意味と役割を中学生でも分かるように説明します。検索結果に表示されるタイトルや説明文はここで指定される。">
<meta name="keywords" content="メタタグ, SEO, Webサイト">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

見た感じ、ちょっと難しそう？でも、それぞれの部分を説明しますね。

title タグの部分は「このページのタイトル」。ページを見るとき、ブラウザのタブに表示される部分ですよ。タイトルは分かりやすくて、ページの内容を正確に表したものにするのが大事。だから「〇〇とは」とか「〇〇のやり方」みたいに、ユーザーの知りたいことを正面から答えるようなタイトルが良いですね。

name=”description” の部分が「ページの説明文」。ここに書いたテキストが、検索結果画面でタイトルの下に表示されるんです。だから、ページの内容をちゃんと説明する文を書く必要があります。「このページ読んだら、こんなことが分かる」って言葉で説明するのが、ユーザーにクリックしてもらいやすくなるコツですね。

name=”keywords” の部分が「関連キーワード」。ページに関連する単語を書き込む場所。「メタタグ」「SEO」「Webサイト」みたいに、ページの内容に関連する言葉を3～5個書き込むのが目安です。

name=”viewport” の部分が「表示設定」。スマートフォンで見たときに、うまく表示されるようにするための指示を書き込む場所なんです。「width=device-width」っていうのは「スマートフォンの幅に合わせて表示してね」という指示ですね。

メタタグで気をつけるポイント

最後に、メタタグを書くときに気をつけるポイントを紹介します。

「ページの内容と一致させる」。これが一番大事。タイトルやディスクリプションに書いた内容と、実際のページの内容が違ってたら、ユーザーがキレちゃいますよ。タイトルに「無料で学べる！」って書いてあるのに、実際に入ってみたら金を払わないと見られないとか、そういうことありますよね。あれは信頼失いますし、検索エンジンからの評価も落ちちゃいます。

「短すぎず、長すぎず」。タイトルやディスクリプションって、ちょうどいい長さがあるんですよ。短すぎると、ユーザーにページの内容が伝わりません。逆に長すぎると、検索結果画面で切れちゃいます。だから、ちょうどいい長さ（タイトルは30～60字、ディスクリプションは120～160字）を意識することが大事ですね。

「キーワードを自然に入れる」。「SEO対策だ」って意識しすぎて、無理やりキーワードを詰め込んでる人もいます。でも、それって読みづらいし、Googleも「あ、これはスパムだ」って判断しちゃいますよ。だから、自然な文体で、ユーザーにとって読みやすい文を心がけることが大事なんです。

これらのポイントを押さえれば、メタタグをちゃんと書くことができますよ。Webサイトの見えない部分に目を向けることで、サイトの魅力を最大限に引き出すことができるんですね。メタタグって、本当に大事な存在なんですよ。