metaタグとは？その種類とSEOに効果的な書き方を解説！|動画で覚える無料ホームページ制作講座

「metaタグって何だろう？」や「metaタグの正しい書き方がわからない」と悩んでいませんか？

ここでは、metaタグの基本から種類、SEOに効果的な書き方について、初心者向けに分かりやすく解説します。

ホームページを作るときに、とても大切なタグが「metaタグ」です。

ここでは、正しい metaタグの書き方をご紹介するので、ぜひ最後までご覧ください。

■ 【目次】このページを読んで分かること

metaタグの基本知識
metaタグの種類と一覧
SEO対策に効果的な metaタグの書き方
metaタグに関するよくある質問（FAQ）
【まとめ】metaタグとは

metaタグの基本知識

まずは、metaタグの基本知識からお伝えします。

metaタグ（メタタグ）とは何か？

metaタグは、ホームページの情報を検索エンジンやブラウザに伝えるためのタグです。

たとえば、ホームページの文字コードや説明文、キーワードなどを指定します。

metaタグの役割とは

metaタグは、ホームページの情報を簡単にまとめて伝えるために使います。たとえば、ページの説明やキーワードなどです。

これにより、検索エンジンがページの内容を理解しやすくなります。

metaタグはどこに書くのか？

metaタグは、HTMLのソースの、<head>タグの中に書きます。

なお、<head>タグは、ホームページのヘッダー情報を書くためのタグであるため、ホームページ上には表示されません。

metaタグの種類と一覧

ここでは、metaタグの種類と一覧を、お伝えします。

meta description（メタディスクリプション）

「meta description」は、ホームページの説明文を書くためのタグです。このタグは、検索結果に表示される説明文として使われます。

良い説明を書くと、検索結果で目立ちやすくなり、たくさんの人にクリックしてもらえます。

meta keywords（メタキーワード）

「meta keywords」は、ホームページの重要なキーワードをまとめて書くためのタグです。

ただ、昔はSEOに役立ちましたが、今ではあまり使われません。

meta charset（メタキャラセット）

「meta charset」は、ホームページの文字のコードを指定するためのタグです。これを使うことで、ページが正しく表示されます。

たとえば、日本語のページなら「UTF-8」を使います。

meta viewport（メタビューポート）

「meta viewport」は、スマートフォンやタブレットなどの画面サイズに合わせてページを表示するためのタグです。

ホームページを見る人の画面サイズに合わせて、ホームページが最適化されます。

meta robots（メタロボット）

「meta robots」は、検索エンジンにページをどう扱ってほしいかを伝えるためのタグです。

たとえば、ページを検索結果に表示したくないときは、下記のソースを使います。

SEO対策に効果的な metaタグの書き方

ここでは、SEO対策に効果的な metaタグの書き方について、お伝えします。

基本的な metaタグの書き方

以下は、基本的なHTMLページの例です。
この中で、metaタグがどのように使われているかを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="metaタグについて紹介しています。">
  <meta name="keywords" content="metaタグ, サンプルコード, HTML">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>metaタグの実例</title>
</head>
<body>
  <h1>metaタグの実例</h1>
  <p>このページでは、metaタグの使い方について学びます。</p>
</body>
</html>

1. meta description の書き方

「meta description」は、ページの内容を簡単に説明するためのタグです。この説明は、検索結果に表示されます。

良い説明を書くと、検索結果で目立ちやすくなり、たくさんの人にクリックしてもらえます。

クリックしてもらえると、ページの評価が上がり、もっと多くの人に見てもらえるようになります。

現在の検索エンジンは、ページの内容に合ったmeta descriptionをとても重視します。そこで、以下のポイントに気をつけて書きましょう。

- 短く簡潔に: 150文字くらいで、ページの内容をわかりやすく伝えます。
- キーワードを含める: ページの内容に関連するキーワードを自然に含めます。
- 読みやすさ: 読む人が理解しやすい言葉で書きます。

2. meta keywords の書き方

「meta keywords」は、ページの重要なキーワードをまとめて書くタグです。現在ではあまり使われませんが、次のように書きます。

なお、キーワードの数は、10個くらいまでにするようにしましょう。

3. meta charset の書き方

「meta charset」は、ページの文字コードを指定するタグです。
日本語のページなら「UTF-8」を使います。

4. meta viewport の書き方

「meta viewport」は、ページをスマートフォンやタブレットに合わせて表示するためのタグです。

これにより、どんな画面サイズでもページが正しく表示されます。

metaタグに関するよくある質問（FAQ）

最後に、metaタグに関するよくある質問（FAQ）をご紹介します。

Q1: metaタグって何ですか？

metaタグは、ホームページの情報を検索エンジンやブラウザに伝えるためのタグです。ページの説明や文字コードの設定などに使います。

Q2: meta descriptionって何ですか？

meta descriptionは、ページの内容を簡単に説明するためのタグです。検索結果に表示されるので、わかりやすく書くことが大切です。

Q3: meta keywordsはまだ使えますか？

今では検索エンジンはmeta keywordsをあまり使いません。ただ、ページの内容に合ったキーワードを書いておくようにしましょう。

Q4: meta charsetって何のために使いますか？

meta charsetは、ページの文字コードを指定するためのタグです。日本語のページなら「UTF-8」を使います。これで文字化けを防げます。

Q5: meta viewportはなぜ必要ですか？

meta viewportは、スマートフォンやタブレットなどの画面サイズに合わせてページを表示するためのタグです。これにより、どんなデバイスでもページが見やすくなります。

Q6: meta robotsって何ですか？

meta robotsは、検索エンジンにページをどう扱ってほしいかを伝えるタグです。たとえば、ページを検索結果に表示したくないときに使います。

Q7: metaタグが正しく動作しないときはどうすればいいですか？

まず、HTMLの構文が正しいかを確認しましょう。タグが正しく書かれているか、属性名が正しいか、ダブルクオートで囲まれているかをチェックします。

Q8: metaタグを使うとホームページの評価が上がりますか？

はい、正しく使うと検索エンジンがページの内容をよく理解できるので、評価が上がることがあります。特に、meta descriptionは重要です。

Q9: 検索エンジンに meta descriptionで指定した内容が表示されません

検索結果に、meta descriptionで指定した内容が表示されないことはあります。これは、検索エンジンがページの内容に合った説明文を自動で選ぶことがあるからです。

【まとめ】metaタグとは

metaタグとは？その種類とSEOに効果的な書き方を解説！の内容は、いかがでしたでしょうか？

metaタグは、ホームページの情報を検索エンジンやブラウザに伝えるためのタグです。たとえば、ホームページの文字コードや説明文、キーワードなどを指定します。

そして、このmetaタグは、SEO対策を行ううえで、とても大切なタグになります。

特に、description（ホームページの説明文）は、検索エンジン上に表示されるため、とても重要です。

descriptionの内容は必ずページごとに変えるようにして、そのページの説明文を分かりやすく書くようにしましょうね。