【第7回】HTMLでSEO対策！メタタグの基本と書き方をやさしく解説🔍

みかおば

📘 HTML初心者のみかおばです！今回も「ノート代わりに」記録しながら、ゆっくり覚えていきましょう〜😊
第7回は、Webページに検索エンジン向けの情報（メタタグ）を追加する方法を解説します🔍

💡 メタタグってなに？
🧩 よく使うメタタグの種類
📝 実際の書き方（コード例）
🔍 よくあるミスと注意点
✅ 覚えておきたいポイントまとめ
📌 次回のテーマ

💡 メタタグってなに？

メタタグは、Webページの「裏側」に書いておく情報です。検索エンジンやSNS、ブラウザに向けて「このページはどんな内容です」と伝えるためのタグです。

HTMLの<head>タグの中に書きます。

💡 補足メモ：
「メタタグは <head> の中に書きます」って聞くと、
「headって何？ divとは違うの？ h1って何？」って思った人もいるかも（←みかおばだけ？😅）

簡単に言うと──

<head> はページの“見えない設定情報”を書く場所（HTMLの上の方にある）

<h1> は見出し。ページ内で「ここが一番大事なタイトルですよ」と伝える役割

<div> は見える部分の“箱”で、ページのデザインやレイアウト用に使います。意味は「division（区切り）」で、本文（<body>の中）で使います。たとえば、ヘッダー、フッター、サイドバー、記事などを区切るために使われます。

🔍 つまり：

<head> はページの外側設定（SEOなど）

<h1> はページ内の見出し

<div> は見た目の構造や配置を整えるためのグループ分け

同じHTMLタグだけど、それぞれ役割がまったく違うので混ざらないように注意です🌱

🧩 よく使うメタタグの種類

<title>：ページのタイトル（検索結果やブラウザのタブに表示）
<meta name="description">：ページの説明（検索結果の下に表示）
<meta name="keywords">：関連キーワード（SEO効果は低め）
<meta charset="UTF-8">：文字コードの指定（ほぼ必須。日本語や記号を正しく表示するために使います）

💡 もう少し詳しく！

<title>：ページの「名前」のようなものです。検索結果の青いタイトル部分や、ブラウザのタブに表示されます。読者が「このページを開こう」と思う最初のきっかけになります。

<meta name="description">：検索結果に表示される「説明文」です。ページを開く前に「どんな内容か」を伝える役割があり、クリック率に大きく関わります。

<meta name="keywords">：ページに関連するキーワードをカンマ区切りで指定します。かつてはSEO対策として重要視されていましたが、現在の検索エンジンではほとんど評価対象にならないため、あくまで補助的な情報と考えておきましょう。

<meta charset="UTF-8">：文字コード（日本語や記号など）を正しく表示するための設定です。これがないと文字化けの原因になるので、必ず書いておきましょう！
文字コードには他にも種類がありますが、日本語を使うWebページでは「UTF-8」が最も一般的です。

※メタタグには他にもたくさん種類がありますが、ここではよく使う基本的なものだけを紹介しています。まずはこの4つをしっかり覚えればOKです！

📝 実際の書き方（コード例）

html
<head>
  <title>HTML入門｜初心者向け講座</title>
  <meta name="description" content="HTMLの基本を初心者向けにやさしく解説します。">
  <meta name="keywords" content="HTML, 初心者, Web制作">
  <meta charset="UTF-8">
</head>