【HTML5】見出し要素(h1〜h6)の使い方とSEO対策に効果的な設定方法

見出しとは、文章がどんな内容であるかを簡潔に伝える主題のことをいいます。

HTMLには1〜6までの見出し要素があり、h1h6までの要素を、開始タグ終了タグで設定します。
内容には見出しのテキストを記述します


<h1>こどものえほん</h1>
    <h2>楽しいお散歩</h2>
        <h3>パパとおさんぽ</h3>
        <h3>わたしのワンピース</h3>
    <h2>まねっこあそび</h2>
        <h3>ふうせんねこ</h3>
            <h4>ねこのミイ</h4>
            <h4>わたしとミイ</h4>
        
こどものえほん
 楽しいお散歩
  パパとおさんぽ
  わたしのワンピース
 まねっこあそび
  ふうせんねこ
   ねこのミイ
   わたしとミイ

分かりやすいように見出し要素のみで記述していますが、本来は見出しが指す内容をそれぞれの見出しの次に記述するようになります。
また、結果にある左側の段落も本来はありません。

理解度チェック

  • HTMLの見出しにはいくつ種類がありますか?
  • 見出し要素に終了タグは必要ですか?不要ですか?

使い方についての注意事項

順番に使うようにする

h1h6要素はそれぞれ順番に使用するように意識する必要があります

例えば、h2要素の次にh4要素を使う(h3要素をとばす)ようなことは避けましょう。
そのため、最初の見出しは常にh1要素となります。

h1要素はページ内に必ず一つだけ設定する

h1要素にはページ全体の内容を簡潔にまとめたテキストを記述します

h1要素が複数存在することでエラーになることはありませんが、ページ全体の内容を示すものが2つも必要ありません。1つだけ設定することで、後述するSEO対策や読み上げソフトで有利になります。

また、GoogleのSEOに関してはh1要素が複数存在しても問題ないとの記事を見かけることがありますが、Google以外のSEOを意識する場合はその限りではないので、一つだけ設定する方が無難です。

文字のサイズや太さを変えるために見出し要素を使用しない

文字のサイズや太さを変える場合は、HTMLの装飾を行うCSSを使用してください

見出し要素はブラウザや検索エンジンにとって重要な意味のある要素です。
もし文字のデザインを変更したい場合は、CSSを用いるようにしましょう。

理解度チェック

  • h1要素にはどのような内容を設定しますか?
  • 文字の太さや大きさを変える場合は、何を使用しますか?

すべての見出し(1〜6)


<h1>PROGRABI</h1>
<h2>PROGRABI</h2>
<h3>PROGRABI</h3>
<h4>PROGRABI</h4>
<h5>PROGRABI</h5>
<h6>PROGRABI</h6>
        
PROGRABI
PROGRABI
PROGRABI
PROGRABI
PROGRABI
PROGRABI

理解度チェック

  • すべての見出しを記述してブラウザで表示してみましょう!

見出しの書き方

見出しには、内容について簡略に伝える言葉を設定しなければなりません。

内容を分かりやすく記述する

例えば、ブログ記事の見出しが今日の日記」だと内容は伝わるでしょうか?

突然聞こえてきた大声援!近所で何が起こった?!」のような見出しを付ける場合と比較してみてください。

前者に比べ後者の方が内容に興味がわくと思います。

また、内容についてもっと具体的に想像させる場合は「突然聞こえてきた大声援!近所で何が起こった?!〇〇町の■■祭り」の様にキーワードを含めるように意識します。

SEO(エス・イー・オー)を意識する

アクセス数を伸ばす一つの方法にSEO対策があります。これはGoogleなどの検索エンジンで特定のキーワードで検索した際に、検索結果の最初の方に自分のWebサイトが表示されることを目的とする対策です。

このSEO対策では、title要素や見出し要素(特にh1要素)が重要になり、検索に繋がりやすいキーワードなどを意図的に含めるなどの考慮が必要です。

理解度チェック

  • SEO対策とは何を目的としたものですか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。