レッスン9: ページの情報を正しく伝える！HTMLメタタグとSEOの基礎
ページの情報を正しく伝える！HTMLメタタグとSEOの基礎について学びましょう。
🎯 学習目標
<head>内に記述する「メタ情報」の役割を理解する<meta>,<title>,<link>,<script>などの基本タグを学ぶ- SEOにおいて重要な要素を把握し、簡単な対策ができるようになる
📘 目次
📚 レッスン
1. <head> とは？
ブラウザには直接表示されないが、以下のような重要情報が含まれる。
- ページのタイトル（検索結果にも表示）
- 文字コード（日本語表示のために必要）
- CSSやJavaScriptの読み込み
- SEOやSNS向け情報の設定
2. よく使う<head>内のタグ
| タグ | 用途 |
|---|---|
<meta charset="UTF-8"> |
ページの文字コード（UTF-8推奨） |
<title> |
ページタイトル（タブ名や検索結果に表示） |
<meta name="description"> |
ページ概要（検索結果の説明欄に使われる） |
<meta name="viewport"> |
モバイル端末での表示調整 |
<link rel="stylesheet"> |
CSSファイルの読み込み |
<script src="..."> |
JavaScriptの読み込み |
3. サンプルコード：基本的な<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="初心者向けHTML入門講座の第8日目。">
<title>HTML入門 第8日目</title>
<link rel="stylesheet" href="style.css">
</head>4. SEOってなに？
Search Engine Optimization（検索エンジン最適化）の略。検索結果に表示されやすくするための工夫。
初心者でもできる基本SEO対策
- 適切なタイトル（
<title>）を設定する - ページの説明（
<meta name="description">）を明記 - 見出し（
<h1>〜<h3>）を意味に沿って使う - 意味のあるURLやファイル名にする（例：
/lesson8.html） - 画像には代替テキスト（
alt属性）を設定する
5. SNS向けメタ情報
FacebookやTwitterなどのSNSでURLをシェアする際に、タイトル、説明文、画像などが自動的に表示されるようにするための設定です。
Open Graph Protocol（OGP）
Facebook、LINEなど多くのSNSで使用される共通規格です。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">Twitter Cards
TwitterでのシェアでX（旧Twitter）のタイムラインに表示される情報を設定します。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="https://example.com/image.jpg">SNSシェアで表示される情報の確認方法
- Facebook共有デバッガー - FacebookでのOGP表示をテスト
- Twitterカードバリデーター - X（旧Twitter）での表示をテスト
6. 文字コード（Character Encoding）とは？
文字コードの基本
- 文字コードとは、「文字」と「コンピュータが理解できる数値（ビット列）」を対応させるルールのことです。
- コンピュータは数字しか扱えないため、「A」や「あ」などの文字もすべて数値に変換して保存・表示します。
- その変換ルールが「文字コード」です。
主な文字コードの種類
| 文字コード | 特徴 | 備考 |
|---|---|---|
| UTF-8 | 世界中の文字を扱える | 現在の標準 |
| Shift_JIS | 日本語に特化 | 昔の日本語サイトやメールで使われていた |
| EUC-JP | 日本語向け | Linux系で使われることもあった |
なぜ文字コードを指定する必要があるの？
文字コードを指定しないと、以下のような文字化けが起こる可能性があります。
- 「こんにちは」→「ããã«ã¡ã¯」のように変な記号が表示される
- 特に日本語を含むWebページではUTF-8を明示的に指定しておくと安心
💡 HTMLでの指定方法
HTMLの<head>タグの中で、以下のように書くことで文字コードをUTF-8に指定します。
<meta charset="UTF-8">UTF-8を指定すると、英語も日本語も多言語も安心して扱えます。<head>内の最上部に書くのがベストプラクティス。
今日のまとめ
<head>内はユーザーに直接見えないが、とても重要な部分- メタ情報の設定はSEOやスマホ対応、SNSでの表示にも関わる
- HTMLの「表面」と「裏側」の両方を意識できるようにしよう
📚 リファレンス
このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
1. メタ情報を追加しよう！
以下の条件を満たす<head>部分をHTMLで記述してください。
- 文字コードはUTF-8
- タイトルは「私のポートフォリオ」
- ページの説明文は「私の制作実績サイト」
- スマホ対応（
viewport）<meta name="viewport" content="width=device-width, initial-scale=1.0">を設定すればOK
- CSSファイル
style.cssを読み込む<link rel="stylesheet" href="style.css">というタグを設定してみよう
- SNS向けに下記のOGPタグを追加
<meta property="og:title" content="私のポートフォリオ"><meta property="og:description" content="私の制作実績サイト">
右側のエディタでやってみよう！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="私の制作実績サイト">
<title>私のポートフォリオ</title>
<link rel="stylesheet" href="style.css">
<meta property="og:title" content="私のポートフォリオ">
<meta property="og:description" content="私の制作実績サイト">
</head>
<body>
<h1>私のポートフォリオ</h1>
<p>Web制作の実績を紹介します。</p>
</body>
</html>解説：
必要なメタ情報をすべて追加しました。特にmeta charset="UTF-8"は最初に記述するのがベストプラクティスです。
OGPタグは他にもog:imageやog:urlなどもありますが、今回は基本的な2つのみ設定しています。
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
HTML全体の復習とミニサイト制作！今まで学んだ内容を1つのページにまとめて実践します。