コンテンツの要所にhタグを使用する
コンテンツの要所にhタグを使用sることでユーザーがコンテンツ内の認識をしやすくなります。
例えば本に目次がなければ、わかりにくいですよね。逆に多すぎても読みにくいです。
コンテンツの要所、切り替え部分を意識することで適切に使用できるようになります。
h2タグについてはこちらから↓
hタグは順番に使用する
複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。
※引用元：検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ
h2の中に必要であればh3タグを入れて細かく説明できるようにします。h1タグは毒しているタグではありません。ｈ１タグで書いたものをｈ2タグで細かく説明できるようにします。
h1＞h2＞ｈ３＞ｈ４＞ｈ5＞ｈ6がhタグの大きい順番です。
h1タグは複数使用可能？
ページ全体で控えめに見出しを使用する
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。※引用元：検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ
- 避けるべき方法:
- ページ内で見出しタグを過度に使用する。
h1タグは記事内で1つである必要はありません。ただし見出しタグが多すぎると良くないとGoogleもいってます。
h1タグは記事上と記事のまとめ部分にh1タグを入れると良いでしょう。記事のまとめ部分はh1タグが必須とは限りません。
厳選して適切な見出しタグを使用しましょう。
hタグの改行方法
hタグの改行は<br>タグで改行することが可能になります。
<h1>h1タグh2タグってなに？<br>見出しタグの使い方</h1>
このようにHTMLを入れることでhタグでの改行を行うことができます。ただしhタグはあくまでも本文の見出しです。見出しが長すぎるとユーザーにとって見づらくそれをGoogleも認識することになります。
※引用元：検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ
- 避けるべき方法:見出しが非常に長い。
hタグをCSSやHTMLでデザインする
hタグには大きさを変更したり、色を変えたりすることができます。
h2 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
}
これで見出しタグを変更することができます。最初のh2は変更したいタグで文字色や背景色に関しては自分で色を選んで数字を入れる仕組みになります。
ページ内リンクを設定する
見出しタグにはページ内リンクを設定しておくことでユーザーが目次からコンテンツを探さなくても良くなります。ページ内リンクは適切に設定を行いましょう。