ブログも開設したし、早速記事を書こう！
ところで見出しって何だろう？
H1、H2とかあるけどどう使い分ければ良いの？
目次
記事のゴール
WordPressの見出しタグの付け方と構成の重要性を理解すること
見出しタグとは何か？
見出しタグの説明
Hタグで囲まれた各段落ごとのタイトルのことを言います。
<h1>赤字が見出しタグ</h1>
全部で6種類
見出しタグは全部で6種類のみ存在します。
- h1 これが見出し１
- h2 これが見出し２
- h3 これが見出し３
- h4 これが見出し４
- h5 これが見出し５
- h6 これが見出し６
見出しタグの重要性
記事を見やすくするため
次の簡単な2つの例を見た場合、どちらが見やすいでしょうか？
- hタグを使わない時
- hタグを使った時
hタグを使わない時
無人島に３つだけ持って行って良いとしたら何か？その理由は何か？
１.水 理由 人間に欠かせないものだから ２.コンパス
理由 方角を知るため ３.ライター 理由 火を起こし、暖をとるため
hタグを使った時
HTMLのソースでは以下のように階層となっています
<h1>無人島に３つだけ持って行って良いとしたら何か？その理由は何か？</h1> <h2>１.水</h2> <h3>理由</h3> 人間に欠かせないものだから <h2>２.コンパス</h2> <h3>理由</h3> 方角を知るため <h2>３.ライター</h2> <h3>理由</h3> 火を起こし、暖をとるため
ビジュアル的な見え方
Googleに正しく評価されるため
人間にとって見やすいものはGoogleにとっても見やすいため評価が上がります。
すなわち検索結果が上位にいくことに繋がります。
見出しタグの正しい構成
ダメな例
<h1>学校</h1> <h2>A大学</h2> <h4>C学部</h4> <h3>E学科</h3> <h1>B大学</h1> <h3>D学部</h3> <h4>F学科</h4>
ダメな箇所は下記の赤字の部分です。
<h1>学校</h1> <h2>A大学</h2> <h4>C学部</h4> <h3>E学科</h3> <h1>B大学</h1> <h3>D学部</h3> <h4>F学科</h4>
<h4>C学部</h4>がダメな理由
→ 階層的に見るとh3タグの前にh4タグが来てしまっています
<h1>B大学</h1>がダメな理由
→h1タグは記事内に1つだけという決まりがあるためNGです
良い例
こちらがお手本となるタグの付け方です。
<h1>学校</h1> <h2>A大学</h2> <h3>C学部</h3> <h4>E学科</h4> <h2>B大学</h2> <h3>D学部</h3> <h4>F学科</h4>
WordPressにおける見出しタグの付け方
ブログ記事においては下記のイメージのようにするのが一般的でわかりやすいです。
ポイントは
・タイトル下に記事を象徴とする画像を入れること
・本題に入る前に序章文を入れること（本記事を参考にしてください）
・記事が長くなる場合は各H2の下にアイキャッチ画像を入れると合間に画像が入ることで読者の読みやすさは向上します。
ClassicEditorの場合
WordPress5.0でClassicEditorのプラグインを入れている場合、もしくは旧エディターの場合
テキストエディターのリストから見出し１から６（見出し1がh1、見出し2がh2....）を選択できます。
WordPress5.0で旧エディターを使用をしたい場合は以下の記事が参考になります。
関連記事：【初心者向け】WordPress5.0で旧エディターのClassic Editorを使う方法
新エディター(Gutenberg)の場合
新エディターの場合、見出しの構成をチェックする機能が付いてます。
これは便利です。
まとめ
見出しとはHタグで囲まれたタイトルを表すもの。
Googleに正しく評価されるため、また、記事を見やすくさせるために重要。
h1タグのタイトルは記事内に必ず１つ。
hタグの順番は守ろう。
