-
h1~h6 タグとは
- SEOへの影響
-
h1～h6 タグの使い方
- h1～h6 タグの使い方（イメージ）
- h1～h6 タグの使い方（HTML）
-
まとめと補足
- 順番通り使用する
- hタグを見た目を理由に使用しない
- h1は1ページに1つが好ましい
- alt属性を利用すれば画像を見出しにしてもよい
h1～h6 タグとは
h1～h6の各要素は、セクションの見出しを意味します。数字は見出しの重要度を6段階で定義されています。
SEOへの影響
hタグは、適切に使用されることで、ウェブページのコンテンツの構造を明確にし、検索エンジンがコンテンツを理解しやすくなるのでSEO（Search Engine Optimization：検索エンジン最適化）への大きな効果が見込まれます。また、hタグは見出しの階層を示すため、スクリーンリーダーや支援技術を使用するユーザーにとってコンテンツの構造を理解しやすくします。これにより、サイトの評価が上がりSEO対策へと繋がります。
h1～h6 タグの使い方
実際の使い方を画像とHTMLで簡単にご紹介していきます。
h1～h6 タグの使い方（イメージ）
このページは下記の様な構成でできています。
①はこのページのタイトルをh1としています。
②～④はh2をそのセクションの見出しとしその中でさらに細かく分けたい場合はh3を使用します。
h1～h6 タグの使い方（HTML）
HTMLだと下記の様な感じです。
※サイドバーや細かい部分は省略しています。
<!-- ① -->
<h1>SEOにとって重要な見出し（h1～h6）タグとは？
</h1>
<!-- ② -->
<h2>h1～h6 タグとは
</h2>
<h3>SEOへの影響
</h3>
<p>hタグは…
</p>
<!-- ③ -->
<h2>h1～h6 タグの使い方
</h2>
<h3>h1～h6 タグの使い方（イメージ）
</h3>
<h3>h1～h6 タグの使い方（code）
</h3>
<!-- ④ -->
<h2>まとめと補足
</h2>
<p>最後に…
</p>
<h3>順番通り使用する
</h3>
<p>hタグ…
</p>
<h3>hタグを見た目を理由に使用しない
</h3>
<p>hタグは…
</p>
<h3>h1は1ページに1つが好ましい
</h3>
<p>h1を…
</p>
<h3>alt属性を利用すれば画像を見出しにしてもよい
</h3>
<p>h1タグは…
</p>
まとめと補足
最後にhタグの細かい詳細についてまとめていきます。
順番通り使用する
hタグh1～h6の順に使用するようにしてください。
hタグは文章の構造を示す重要な要素なので見出しの意味を正しく表現するために使われます。なので、h タグを順番に使用することでページの構造が明確になります。
hタグを見た目を理由に使用しない
hタグはCSSで変更していなければ下記の様はh1から順にサイズが小さくなっていきますがそれを利用してデザイン等の表現には使用しないでください。「順番通り使用する」でも述べましたがhタグは文章の構造を示す重要な要素なので見出しの以外での使用は好ましくありません。Google等からの評価も落ちてしまいSEOにもよろしくないのでやらないようにしましょう。
h1は1ページに1つが好ましい
h1を1ページに複数使用することは仕様書では認められているのですが、1ページに複数のテーマがあるのは一般的ではないので1ページでの使用は1回までにしましょう。
alt属性を利用すれば画像を見出しにしてもよい
h1タグは必ずしもテキストではなく画像でも問題ありません。ただ、alt属性に画像の説明を入れないと画像が表示できなかった際やスクリーンリーダーが読み上げることができないので全てのユーザーに画像の内容を認識してもらうためにもalt属性の設定は必要です。
