トップページ > サイト作成 > SEO に適した h タグの使い方とやってはいけない使い方
SEO に適した h タグの使い方とやってはいけない使い方
HTML の h タグは見出しとして利用されるものだが、Web サイトやブログを掲載する際にただ文章を連ねるのではなく適切に見出しと段落を使い分けることで読みやすくなり、検索結果の表示順位にも良い影響を与えるため正しい h タグの使い方と SEO への影響について紹介する。
1. h タグとは
h タグとは見出し(headline)を担うもので、h1 から h6 まで HTML ソース内に記述することができる
h の後ろに付く数値が見出しの重要度を示しており、数値が小さいほど重要度が高い。
h タグをスタイルシート(CSS)など装飾無しでそのまま使うと、h1 が一番文字が大きく太字になり、h6 に向かうほど文字の大きさが小さくなっていく。
そのため、見出しと本文との区別を HTML 上で付けることができ、読む側も視覚的に文章が伝わりやすくなる。
また、h タグは読み手だけでなく検索エンジンにも認知されるため、そのページに何が記載されているかを h タグから読み取って検索結果画面に関連あるサイトとして表示されるようになる。
2. h タグの SEO への影響
検索結果の順位に影響する SEO に対しては、h タグは非常に重要視されている。
重要度が一番高い h1 にはそのページに何が記載されているか概要を一文で示し、その内容を掘り下げる段落を分割するために h2、h3 と順番に利用することで専門性の高いページと検索エンジンが認識する。
3. h タグの使い方
h タグは次のように h1 から h6 まであり、h タグの中に文章を記載する。
文章の代わりに h タグ内で画像(img タグ)を利用することもできる。
一般的には最も重要度の高い h1 タグはサイト名、もしくは Web ページまたは記事のタイトル名で利用する場合が多い。
<h1>記事タイトル</h1> <h2>見出し 1</h2> <h3>見出し 1 から掘り下げたもの</h3> <h4>見出し 2 から掘り下げたもの</h4> <h5>見出し 3 から掘り下げたもの</h5> <h6>見出し 4 から掘り下げたもの</h6>
4. h 列を並列して使う
h タグは最も重要度が高い h1 から h6 に向けて順番に利用していくが、1 ページ内に複数の議題を取り上げたり、文章の途中で内容が派生する場合は h タグを順番に付けていると話に辻褄が合わなくなるため、その場合は次のように h2 や h3 を並行に利用する。
<h1>記事タイトル</h1> <h2>見出し 1</h2> <h3>見出し 1 から掘り下げたもの</h3> <h2>見出し 2</h2> <h4>見出し 2 から掘り下げたもの</h4>
上記で「見出し 2」の h2 タグから h3 と飛ばして h4 になっているが、h の後ろの数値が昇順になっていれば途中が抜けていても問題無い。
5. h タグでやってはいけないこと
本来、Web サイトやブログの記事は人が読みやすように文章や見出しの装飾を行えばよいので h タグの細かなルールを無視しても視覚的に読みやすければ問題ないが、人工的に文章を解析して特定のキーワードに対して関連度を付ける検索エンジンに対しては正しい h タグの使い方をしなければ不適切と見なされて検索結果に表示されなくなる恐れがある。
h1 はページ内に 1 つだけにする
掲載しているページの最も重要度が高いのが h1 タグとなるため、1 つのページ内に複数の h1 があると検索エンジンには内容が分散して捉えられるため、h1 は 1 つだけにしたほうがよい。
h1 から順番に利用する
検索エンジンはそのページに何が記載されている、どのように文章展開されているかを h タグを辿って解析するため HTML ソース内で h1 を飛ばして h2 から始めると適切にページが解析されなくなるため、h1 を入れた上で h2、h3 を利用するほうがよい。
h タグ内に複数の HTML タグは入れない
検索エンジンは h タグ、特に h1 タグを重要視するがその h1 内に見出し以外に長文であったりリストタグなどを利用すると不適切に強調していると見なされて悪影響がある。
span や strong といった文字の装飾は利用できるが、段落を示す p タグなどタグ自体に文章構成に意味があるタグは h タグ内に入れないほうがよい。
h タグを降順で利用しない
1 ページ内に h1 タグがあったほうがよいと前述したが、検索エンジンは HTML ソースの 1 行目から内容を解析するため、h2 タグの後に h1 タグを入れても解析しづらくなり効果が無いため、h の後ろの数値は降順ではなく、数値が大きくなるように昇順で利用したほうがよい。
関連記事
スタイルシート(CSS)で多用しないが知っていると便利なプロパティ
ウェブサイト作成
スタイルシート(CSS)はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から多用されないが知っておくと利用する場面があるかもしれないプロパティを紹介する。
ウェブサイト作成
スタイルシート(CSS)はウェブサイトの装飾やレイアウトに利用されるプログラムの一種で、CSS の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
ウェブサイト作成
スタイルシート(CSS)はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から余白や回り込みなどレイアウト設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート(CSS)はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中からリストタグの形式や配置を設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート(CSS)はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から枠線の色や太さを設定する使い方と実際に指定するプロパティを紹介する。