【6日でできるHTML＆CSS入門】SEO対策

　SEO（検索エンジン最適化）は、Webサイトやページが Google や Yahoo! などの検索結果でできるだけ上位に表示されるように工夫する技術・施策のことです。どんなに良いサイトを作っても、検索で見つけてもらえなければ、多くの人に見てもらうことはできません。SEO対策は、Webサイト運用で欠かせない重要な取り組みです。
　ここでは、HTMLでできるSEO対策の基礎を中心に、具体的なタグや設定例、正しい使い方について解説します。

１．SEO対策の基本とタグの使い方

1.1. タイトルとメタ情報の最適化

SEO対策の第一歩は、「ページのタイトル」や「メタ情報」を正しく設定することです。

サンプルHTML

ファイル名： lesson46_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>大阪カフェガイド｜こだわりのコーヒーと落ち着く空間</title>
  <meta name="keywords" content="大阪,カフェ,コーヒー,喫茶店,おすすめ,カフェ巡り">
  <meta name="description" content="大阪の人気カフェを厳選紹介！おしゃれな空間や美味しいコーヒーを楽しめる店舗情報が満載。">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body { font-family: sans-serif; margin: 36px; }
    h1 { color: #20404b; font-size: 2em; }
    ul { margin-top: 14px; }
  </style>
</head>
<body>
  <h1>大阪で人気のカフェ特集</h1>
  <h2>おすすめカフェリスト</h2>
  <ul>
    <li>珈琲館イチロウ</li>
    <li>カフェ森の音</li>
    <li>レトロ喫茶ソラリス</li>
  </ul>
  <p>カフェ好きなら必見！大阪のこだわりカフェ情報を毎週更新中です。</p>
</body>
</html>

サンプルの表示結果

ページ上部に「大阪で人気のカフェ特集」という大きな見出し
その下に「おすすめカフェリスト」とサブ見出し
カフェ名をリスト形式で掲載

1.2. 各タグのSEO効果とポイント

タグ・属性	役割・使い方例
<title>	ページタイトル（検索結果やブラウザタブに表示）
<meta name="keywords">	検索キーワードの目安。キーワードはカンマ区切りで指定
<meta name="description">	ページ紹介文。検索結果の説明文として使われることが多い。
<h1>, <h2>	見出し。h1はページのメインタイトルとして1つだけ使う。
<ul>, <li>	リスト構造。ナビゲーションや重要キーワードの整理にも有効
<meta name="viewport">	モバイル対応（SEOにも影響する）

２．HTMLレベルでのSEO対策の具体例

2.1. タイトル・メタ設定のコツ

タイトルは30〜35文字を目安に、ページの要点やキーワードを盛り込む。
キーワードはページ内容と関連性の高い単語を並べる。
descriptionは120文字前後で、ページの特徴・魅力が伝わる内容に

2.2. 見出しやリストの活用

h1タグは1ページに1つだけ。ページのテーマや最重要キーワードを含める。
h2やh3タグは、ページ内で情報を整理・階層化するのに使う。
リストタグ（ul/li）は、単なる装飾目的でdivやpを使うよりSEOに有利な場合がある。

３．よく使うSEO向けタグ一覧

タグ・属性	説明・ポイント
<title>	検索順位やクリック率に強く影響。必ずページ内容に合わせて記述
<meta name="keywords">	現在は重要度が下がったが、念のため適切に設定
<meta name="description">	検索結果に表示される紹介文として利用
<h1>〜<h6>	ページの構造化・情報整理に必須。順番を守って使う。
<ul>, <ol>, <li>	ナビゲーションや要点整理に有効。SEO的にも適切な構造として認識されやすい。
<meta name="viewport">	モバイル対応の基本。レスポンシブ対応はSEOにも影響する。

まとめ

SEO対策は、検索エンジンとユーザー双方にとってページ内容を分かりやすく伝えるための工夫です。
　まずはタイトル、メタ情報、見出しやリストといったHTMLの基本タグを正しく使い、構造を整理しましょう。こうした「HTMLレベルの最適化」だけでも検索順位やクリック率の向上が期待できます。
　さらに発展的なSEO施策について学びたい場合は、構造化データ・モバイル最適化・コンテンツ強化などにも取り組んでみてください。