メタタグとSEOの基本

このレッスンでは、メタタグを使ったSEOの基本を学び、検索結果でクリックされやすいページを作れるようになることを目標にします。「HTML meta description」「SEO 基本タグ」で調べている方向けです。

<head>の中に書く<title>や<meta name="description">は、検索結果に表示されるページの「見出し」と「説明文」になります。SEO(検索エンジン最適化)の基本の一歩です。

サンプルコードでは、本来<head>の中に書く<title>と<meta name="description">のイメージを、内容が分かるようにテキストとして表示しています。実際のページでは、これらのタグは画面には表示されず、ブラウザのタブや検索結果にのみ現れる点に注意しましょう。

初心者がよくつまずくのが、<title>やdescriptionを空のままにしてしまうことです。これらが未設定だと、検索結果にページの内容と関係のない表示がされたり、そもそも検索に引っかかりにくくなったりすることがあります。ページごとに内容を反映した固有の文言を設定することが大切です。

タイトルや説明文が分かりやすいページほど、Google検索の結果でクリックされやすくなります。制作したページを多くの人に見てもらうためには、デザインだけでなくこうしたメタ情報の設定も欠かせない知識です。

<!-- 本来は<head>の中に書きますが、ここでは内容を確認するために表示します -->
<h1>ページタイトルの例</h1>
<p>&lt;title&gt;ページタイトル - サイト名&lt;/title&gt;</p>
<p>&lt;meta name="description" content="このページの説明文。検索結果に表示されます。"&gt;</p>

OUTPUT / 実行結果

💡 プレビューはこのページ内だけで動作し、外部には送信されません。

🎯

ここまでできればゴール達成!
検索結果やSNSでの見え方を整える、基本的なメタタグが書けるようになります。