6日でできる 新HTML&CSS入門｜SEOに強いHTMLの書き方
検索エンジンにも、読者にも伝わるHTMLへ。
title、description、見出し、リストを正しく使って、内容が分かりやすいWebページを作ろう。
Webサイトは、作って公開しただけで多くの人に見てもらえるとは限りません。ユーザーが検索したときにページを見つけてもらいやすくするには、検索エンジンにページの内容を正しく理解してもらう工夫が必要です。この工夫をSEO、つまり検索エンジン最適化と呼びます。
SEOというと、特別な専門知識や難しい分析をイメージするかもしれません。しかし、HTMLの基本を正しく書くことも、とても大切なSEO対策のひとつです。ページのタイトルを分かりやすく書く、descriptionでページ内容を簡潔に説明する、h1やh2で情報の階層を整理する、ulやliで要点をリスト化する、といった基本的な積み重ねが、検索エンジンにもユーザーにも伝わりやすいページにつながります。
大切なのは、検索エンジンだけを意識してキーワードを詰め込むことではありません。GoogleのSEOスターターガイドでも、検索エンジンがクロール、インデックス、内容理解をしやすくすることが基本として説明されており、キーワードの過剰な繰り返しはユーザーにとって読みにくく、スパムポリシーにも関係します。
この記事では、HTMLでできるSEO対策の基礎として、title、meta description、見出し、リスト、viewportなどの役割を整理しながら、検索エンジンとユーザーの両方に分かりやすいページの作り方を解説します。
SEOとは何か
SEOは、Search Engine Optimizationの略で、日本語では検索エンジン最適化と呼ばれます。Webページの内容を検索エンジンに正しく伝え、検索したユーザーに見つけてもらいやすくするための取り組みです。
たとえば、カフェ紹介ページを作る場合、検索エンジンに「このページは大阪のカフェ情報を紹介している」と伝わるように、title、見出し、本文、リストなどを整理して書くことが大切です。
| SEOで意識すること | 内容 |
|---|---|
| ページ内容を明確にする | 何について書かれたページなのかを分かりやすくする |
| titleを適切に書く | 検索結果やブラウザタブで内容が伝わるようにする |
| descriptionを書く | ページの紹介文として内容を簡潔に伝える |
| 見出しを整理する | h1、h2、h3で情報の階層を分かりやすくする |
| 本文を充実させる | ユーザーの知りたい情報を自然な文章で書く |
| モバイル対応を行う | スマートフォンでも読みやすく表示する |
SEOに強いHTMLとは、検索エンジン向けに不自然なコードを書くことではありません。ページの意味が伝わりやすく、ユーザーが読みやすいHTMLを書くことが基本です。
図1：SEOに強いHTMLは検索エンジンとユーザーの両方に伝わる
この図から分かること
SEOに強いHTMLは、検索エンジンだけでなくユーザーにも分かりやすい構造になっています。title、description、見出し、リストを適切に使うことで、ページの内容や重要な情報が伝わりやすくなります。SEOの基本は、情報を整理して分かりやすく書くことです。
titleはページ内容を伝える重要なタグ
<title>は、HTMLのhead内に書くページタイトルです。ブラウザのタブに表示されたり、検索結果のタイトル候補として使われたりします。Googleは検索結果のタイトルリンクを自動生成する際に複数の情報を利用しますが、title要素は重要な手がかりのひとつです。
titleを書くときは、ページの内容がひと目で分かるようにします。ページと関係の薄いキーワードを詰め込むのではなく、ページのテーマと魅力が自然に伝わるタイトルにすることが大切です。
<title>京都カフェ案内｜静かに過ごせる町家カフェ特集</title>このように、地域名、テーマ、ページの特徴を自然に入れると、検索したユーザーにも内容が伝わりやすくなります。
| titleで意識すること | ポイント |
|---|---|
| ページ内容と一致させる | 実際の本文と違うタイトルにしない |
| 重要なキーワードを自然に含める | 地域名、サービス名、テーマなど |
| 長すぎないようにする | 検索結果で途中までしか表示されない場合がある |
| キーワードを詰め込みすぎない | 不自然なタイトルは読みにくくなる |
| ページごとに変える | すべてのページで同じtitleにしない |
titleは、検索エンジンにもユーザーにもページ内容を伝える入口です。ページを開く前に内容を判断する材料になるため、分かりやすく丁寧に書きましょう。
meta descriptionはページの紹介文
meta descriptionは、ページの内容を短く説明するためのmetaタグです。検索結果のスニペット、つまり説明文として使われることがあります。ただし、検索エンジンが必ずそのまま表示するとは限らず、検索語やページ内容に応じて別の文章が使われる場合もあります。Googleのドキュメントでは、descriptionはページの短い説明を提供するタグとして説明されています。
<meta name="description" content="京都で静かに過ごせる町家カフェを紹介します。
読書や作業に向いた落ち着いた空間、こだわりのコーヒー、アクセス情報を分かりやすく掲載しています。">descriptionは、検索順位を直接上げる魔法のタグではありません。しかし、検索結果でページの内容や魅力を伝える文章として使われる可能性があるため、クリックしたくなる自然な説明文にすることが大切です。
| descriptionで意識すること | ポイント |
|---|---|
| ページ内容を正確に説明する | 誇張しすぎず、本文と合う内容にする |
| ユーザーの関心に答える | 何が分かるページなのかを伝える |
| 文章として自然に書く | キーワードの羅列にしない |
| ページごとに変える | 同じ説明文を使い回さない |
| 長すぎないようにする | 重要な情報を前半に入れる |
descriptionは、検索したユーザーに「このページを読むと何が分かるのか」を伝える紹介文です。短い文章の中で、内容と魅力を分かりやすくまとめましょう。
meta keywordsの扱いに注意する
古いSEO教材や古いCMSでは、meta name="keywords"を設定する例が出てくることがあります。keywordsは、ページに関連するキーワードを指定するmetaタグです。
<meta name="keywords" content="京都,カフェ,町家カフェ,コーヒー,観光">ただし、現在のGoogle検索では、meta keywordsタグはランキングやインデックスには使われないと公式に説明されています。そのため、SEO対策としてkeywordsを重視するよりも、title、description、見出し、本文、内部リンク、モバイル対応、ページ品質などを整えるほうが大切です。
| meta keywordsについて | 考え方 |
|---|---|
| 昔のHTMLや教材で見かける | 存在は知っておくとよい |
| Google検索では使われない | ランキング目的で重視しない |
| キーワード羅列は避ける | 不自然な記述はユーザーにも役立たない |
| 本文の充実を優先する | 実際に読む内容を分かりやすく書く |
学習では、keywordsというmetaタグがあることを知っておけば十分です。実践では、検索エンジンとユーザーに役立つ本文や構造を整えることを優先しましょう。
見出しはページ構造を分かりやすくする
見出しタグは、ページ内の情報を階層的に整理するために使います。h1はページ全体の主題、h2は大きな区切り、h3はさらに細かい項目というように使うと、内容の流れが分かりやすくなります。
<h1>京都で静かに過ごせる町家カフェ特集</h1>
<h2>おすすめの町家カフェ</h2>
<h3>読書に向いた落ち着いたカフェ</h3>見出しは、文字を大きくするためだけに使うものではありません。ページの構造を示すためのタグです。見た目だけを変えたい場合はCSSを使い、見出しとして意味がある部分にh1からh6を使います。
| 見出しタグ | 役割 |
|---|---|
| h1 | ページ全体のメインテーマ |
| h2 | ページ内の大きな項目 |
| h3 | h2の中の詳細項目 |
| h4〜h6 | さらに細かい階層 |
h1はページの主題を示す大切な見出しです。一般的な記事ページでは、h1を1つにして、その下にh2やh3を使って情報を整理すると分かりやすくなります。
図2：見出しタグでページの階層を整理する
この図から分かること
見出しタグを正しく使うと、ページの構造が分かりやすくなります。h1でページ全体の主題を示し、h2やh3で内容を段階的に整理します。見出しはデザイン目的だけで使うのではなく、情報の階層を伝えるために使うことが大切です。
リストは情報を整理して見せるのに役立つ
<ul>、<ol>、<li>は、情報をリストとして整理するためのタグです。おすすめ項目、手順、特徴、メニュー、チェックポイントなどを並べるときに便利です。
<ul>
<li>静かに過ごせる町家カフェ</li>
<li>駅から歩きやすいカフェ</li>
<li>コーヒーにこだわったカフェ</li>
</ul>リストを使うと、文章の中に埋もれやすい情報を整理して見せられます。ユーザーにとって読みやすくなり、検索エンジンにも項目のまとまりとして伝わりやすくなります。
| リストタグ | 用途 |
|---|---|
| ul | 順番に意味がない箇条書き |
| ol | 手順やランキングなど順番に意味があるリスト |
| li | リストの各項目 |
重要な情報をすべて長い文章で書くよりも、リストで整理したほうが分かりやすい場合があります。ただし、キーワードを無理に並べるためだけのリストは避け、ユーザーに役立つ形で使いましょう。
viewportはモバイル対応の基本
現在のWebページは、スマートフォンで閲覧されることも多くあります。モバイル対応を行うためには、HTMLのhead内にviewportの指定を入れます。
<meta name="viewport" content="width=device-width, initial-scale=1">この指定により、スマートフォンでも端末幅に合わせてページを表示しやすくなります。モバイル対応はユーザー体験に大きく関係し、SEOを考えるうえでも重要です。
| 指定 | 意味 |
|---|---|
| width=device-width | ページ幅を端末の画面幅に合わせる |
| initial-scale=1 | 初期表示倍率を1にする |
viewportを指定しても、それだけでレスポンシブ対応が完成するわけではありません。CSSで横幅、画像、余白、メニューなどを調整し、スマートフォンでも読みやすいページにする必要があります。
SEOを意識したサンプルHTML
ここでは、title、description、viewport、見出し、リストを使ったHTML例を作成します。テーマは、京都の町家カフェを紹介するページです。meta keywordsは学習上よく話題になりますが、現在のGoogle検索ではランキングに使われないため、このサンプルでは重視せず、title、description、本文構造を中心に作ります。
ファイル名： lesson46_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>京都町家カフェ案内｜静かに過ごせるおすすめ店</title>
<meta name="description" content="京都で静かに過ごせる町家カフェを紹介します。読書や作業に向いた落ち着いた空間、こだわりのコーヒー、アクセスしやすい店舗情報を掲載しています。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
margin: 36px;
line-height: 1.7;
color: #333333;
}
h1 {
color: #20404b;
font-size: 2em;
margin-bottom: 0.5em;
}
h2 {
color: #315a67;
margin-top: 1.5em;
}
ul {
margin-top: 14px;
padding-left: 1.4em;
}
li {
margin-bottom: 0.4em;
}
.lead {
background-color: #f3f7f4;
padding: 14px;
border-left: 5px solid #6fa37a;
}
</style>
</head>
<body>
<h1>京都で静かに過ごせる町家カフェ特集</h1>
<p class="lead">京都らしい落ち着いた空間で、読書や作業をしながらゆっくり過ごせる町家カフェを紹介します。</p>
<h2>おすすめ町家カフェリスト</h2>
<ul>
<li>町家珈琲こもれび</li>
<li>路地裏カフェ青葉</li>
<li>古都のテーブル珈琲店</li>
</ul>
<h2>このページで分かること</h2>
<ul>
<li>静かに過ごしやすいカフェの特徴</li>
<li>読書や作業に向いた席の雰囲気</li>
<li>京都観光の合間に立ち寄りやすい店舗情報</li>
</ul>
<p>カフェ選びで迷ったときに役立つよう、空間の雰囲気、過ごしやすさ、コーヒーの特徴を分かりやすく整理して掲載しています。</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ上部に「京都で静かに過ごせる町家カフェ特集」という大きなh1が表示されます。その下にページの概要を伝えるリード文があり、さらにおすすめ町家カフェリストと、このページで分かることがリスト形式で表示されます。
head内には、文字コードを指定するmeta charset、ページタイトルを指定するtitle、ページ説明文を指定するmeta description、モバイル表示に対応するmeta viewportが入っています。
このサンプルでは、SEOのためにキーワードを無理に羅列するのではなく、ページの内容に合ったtitle、description、h1、h2、ul、liを使って、情報を分かりやすく整理しています。
サンプルHTMLのSEOポイント
サンプルHTMLで使っている主なSEO関連タグを確認してみましょう。
| タグ・属性 | 役割 |
|---|---|
| title | ページのタイトルを指定する |
| meta name="description" | ページの紹介文を指定する |
| meta name="viewport" | スマートフォンなどの表示幅に対応する |
| h1 | ページの主題を示す |
| h2 | ページ内の大きな項目を示す |
| ul、li | 要点やリスト情報を整理する |
| lang="ja" | ページの主な言語が日本語であることを示す |
| meta charset="UTF-8" | 文字コードを指定し、日本語の文字化けを防ぐ |
SEOに強いHTMLを書くには、検索エンジン向けのタグを入れるだけでなく、本文の内容とHTML構造を一致させることが大切です。titleに書いた内容、h1に書いた内容、本文で説明している内容が自然につながっていると、ページのテーマが伝わりやすくなります。
図3：title、description、見出し、本文を同じテーマでそろえる
この図から分かること
SEOに強いHTMLでは、title、description、h1、h2、本文のテーマが自然につながっていることが大切です。ページタイトルだけにキーワードを入れるのではなく、本文でもその内容を分かりやすく説明します。検索エンジンにも読者にも、ページの主題が伝わる構造を作りましょう。
titleとh1の違い
titleとh1はどちらもページのテーマを伝える重要な要素ですが、表示される場所が違います。
| 要素 | 表示される場所 | 役割 |
|---|---|---|
| title | ブラウザタブや検索結果のタイトル候補 | ページ全体のタイトルを外部に伝える |
| h1 | ページ本文の中 | ユーザーにページの主題を伝える |
titleとh1は、まったく同じ文章にする必要はありません。ただし、内容が大きくずれていると、ページのテーマが分かりにくくなります。
たとえば、titleでは「京都町家カフェ案内｜静かに過ごせるおすすめ店」と書き、h1では「京都で静かに過ごせる町家カフェ特集」と書くように、同じテーマを少し違う表現で示すと自然です。
descriptionを書くときのコツ
descriptionは、ページの内容と魅力を短く伝える文章です。検索結果に表示される可能性があるため、ユーザーがクリックするかどうかを判断する材料になることがあります。
良いdescriptionは、次のような特徴を持っています。
| ポイント | 説明 |
|---|---|
| 内容が具体的 | 何についてのページかが分かる |
| 読者の目的に合っている | 読者が知りたい情報に触れている |
| 不自然なキーワード羅列ではない | 文章として読みやすい |
| 本文と一致している | ページにない内容を書かない |
| ページごとに固有 | ほかのページと同じ説明文にしない |
descriptionでは、検索エンジン向けに単語を並べるよりも、ユーザーに向けてページの価値を短く伝える意識が大切です。
SEO向けHTMLで避けたい書き方
SEOを意識すると、ついキーワードをたくさん入れたくなることがあります。しかし、不自然なキーワードの詰め込みは、読みにくくなるだけでなく、検索エンジンにも好まれません。
| 避けたい書き方 | 理由 |
|---|---|
| titleにキーワードを羅列する | 不自然でクリックされにくい |
| descriptionに同じ単語を何度も入れる | 読みにくく、内容が伝わりにくい |
| h1を大量に使う | ページの主題が分かりにくくなる |
| 見た目目的だけで見出しタグを使う | 情報構造が崩れる |
| 本文と関係ないキーワードを入れる | ユーザーの期待と内容がずれる |
| meta keywordsを重視しすぎる | 現在のGoogle検索ではランキングに使われない |
SEOでは、検索エンジンをだますような書き方ではなく、ユーザーが読みやすく、ページの内容が正しく伝わる書き方を目指します。
よく使うSEO向けタグ一覧
HTMLでSEOを意識するときによく使うタグや属性を整理しておきます。
| タグ・属性 | 説明・ポイント |
|---|---|
| title | ページタイトル。内容に合った分かりやすい文言にする |
| meta name="description" | ページ紹介文。検索結果の説明文として使われることがある |
| meta name="keywords" | 現在のGoogle検索ではランキングに使われないため重視しない |
| h1〜h6 | ページの構造化と情報整理に使う |
| ul、ol、li | 要点、手順、一覧を整理する |
| meta name="viewport" | モバイル対応の基本 |
| img alt | 画像の内容を説明する代替テキスト |
| a href | 関連ページへのリンクを作る |
| lang | ページの言語を示す |
SEO向けのHTMLでは、head内の設定だけでなく、body内の本文構造も重要です。見出し、段落、リスト、画像のalt、リンクなどを適切に使うことで、ページ内容がより分かりやすくなります。
画像のaltも内容理解に役立つ
画像を使うページでは、imgのalt属性も大切です。altは、画像が表示されない場合の代替テキストであり、スクリーンリーダーにも利用されます。
<img src="img/kyoto-cafe.jpg" alt="京都の町家カフェでコーヒーを楽しむ店内風景">altには、画像の内容を簡潔に書きます。SEOを意識してキーワードを詰め込むのではなく、画像を見られない人にも内容が伝わる説明にすることが大切です。
| altを書くときのポイント | 内容 |
|---|---|
| 画像の内容を説明する | 何が写っているかを自然に書く |
| 本文と関係する内容にする | ページの文脈に合う説明にする |
| キーワードを詰め込まない | 読み上げても不自然でない文章にする |
| 装飾画像は空にする場合もある | 意味を持たない画像ではalt=""を使うこともある |
画像もWebページの情報の一部です。本文と同じように、ユーザーに伝わる説明を意識しましょう。
SEOに強いHTMLを書くときの確認ポイント
HTMLを書き終えたら、次の点を確認すると、SEOの基本を押さえやすくなります。
| 確認すること | チェック内容 |
|---|---|
| titleはページ内容に合っているか | 検索結果で見ても内容が分かるか |
| descriptionは自然な紹介文か | ページの魅力が短く伝わるか |
| h1はページ主題を示しているか | 本文の内容と一致しているか |
| h2やh3で情報を整理しているか | 読みやすい階層になっているか |
| リストを適切に使っているか | 要点や項目が整理されているか |
| viewportが入っているか | スマートフォン対応の基本ができているか |
| 画像に適切なaltがあるか | 画像の意味が伝わるか |
| キーワードを詰め込みすぎていないか | 自然な文章になっているか |
| ページごとに固有の内容になっているか | titleやdescriptionを使い回していないか |
SEOは、ひとつのタグだけで決まるものではありません。ページ全体の構造、内容の分かりやすさ、ユーザー体験、モバイル対応などが組み合わさって評価されます。HTMLでは、その土台となる情報整理を丁寧に行うことが大切です。
SEOに強いHTMLを書くための考え方
SEOに強いHTMLを書くときは、検索エンジンのためだけに書くのではなく、ユーザーが読みやすいページを作ることを意識します。
titleではページの内容を端的に伝え、descriptionではページの魅力を短く説明します。h1でページの主題を示し、h2やh3で内容を整理します。要点や一覧はul、ol、liで分かりやすくまとめます。スマートフォンでも読みやすくするためにviewportを指定し、画像には適切なaltを付けます。
meta keywordsのように、現在のGoogle検索ではランキングに使われないタグもあります。古いSEO情報をそのまま信じるのではなく、現在でも役立つ基本を押さえることが大切です。
HTMLレベルのSEO対策は、特別な裏技ではありません。ページのテーマを明確にし、情報を整理し、検索エンジンにも読者にも伝わるように書くことです。正しいHTML構造を意識することで、読みやすく、見つけてもらいやすいWebページの土台を作れます。