見出しタグ設置時に守るべき3つのルールとNG行為5選

見出しタグは、『h1』～『h6』までの6つの種類があり、見出しタグで『テキスト』や『画像』を囲み、その名の通り見出しを作成するものです。

テキストを見出しタグで囲った際、一般的にはページ内の通常の文字よりも『大きさ』や『太さ』、『デザイン』の面で強調表示されている事が多いです。

見出しタグは、ユーザーと検索エンジン両方にページ内の構成を正しく伝える重要な役割を持っています。

他にも、見出しタグを使わずページ内の文字を同一のフォントで書いてしまうと、メリハリの無いとても読みにくいものになってしまいます。

見た目の上でも見出しタグはとても重要です。

稀に見出しを一切使わないページを見かけますが、読みにくく、すぐに閉じてしまいます。

見出しタグの設置にはルールがあります。

しかし、ルールと聞いて恐れる必要はありません。

多少見出しタグの使い方が間違っていたとしても、ペナルティを受けるといった事は滅多にありません。

しかし、ルールに乗っ取って正しく使う事で、ユーザーの利便性が向上する事は間違いありません。

Googleの基本方針は『ユーザーファースト』であり、検索エンジン・検索順位に与える影響は少なくとも、ユーザーの利便性が向上するのであれば正しく設定するべきかと思います。

記事を読む際は、これがh1タグでこれがh2タグの見出しなど意識する事は無いかと思いますが、例えばWEBページの音声読み上げソフトなどは、見出しタグを認識して動いています。

是非この機会に正しい使い方を覚えて、正しく使いましょう。

01見出しタグの順番を守る

見出しタグ(hタグ)には『h1』～『h6』の6種類があります。

基本的なルールに乗っ取ってhタグを設置すると、『h1』⇒『h2』⇒『h3』⇒『h4』⇒『h5』⇒『h6』の順に設置するのが正しい使い方です。

『h1』⇒『h3』といった歯抜け状態での記述は避けるようにしましょう。

<h1>タイトル</h1>
    <h2>大見出し</h2>
        <h3>中見出し</h3>
            <h4>小見出し</h4>
            <h4>小見出し</h4>
            <h4>小見出し</h4>
        <h3>中見出し</h3>
            <h4>小見出し</h4>
            <h4>小見出し</h4>
    <h2>大見出し</h2>
        <h3>中見出し</h3>
        <h3>中見出し</h3>
            <h4>小見出し</h4>
            <h4>小見出し</h4>

ソース上は階層構造になるわけではありませんが、イメージとしては階層構造のイメージで使うと良いかと思います。

02見出しタグはページの構成を伝えるもの

見出しタグはページの構成を伝える目次のような使い方をしましょう。

見出しを見れば大まかなページの内容がわかるような文言で設定しましょう。

トップページであれば見出しにサイトのタイトルを設定しても良いかと思いますが、その他のページにおいては、サイトのタイトルではなく、ページのタイトルを『h1』に設定するのが一般的です。

全ページ共通の『ロゴ』や『サイトタイトル』、『サイトのキャッチコピー』などを設定するのは避けましょう。

03見出しは簡潔に

前回、『タイトルの付け方』を記事にしました。

---

SEO対策に超重要！【タイトル】の付け方4つのコツ

頑張って書いたページを見てもらうために、タイトルは良く考えて決定しましょう

---

ページタイトルは、ページを開いてもらうために、クリックしたくなる『魅力的な文章』を設定する必要がありますが、見出しに関しては簡潔にわかり易く書きましょう。

一目で見出し内の文章の内容がわかるようにするのがポイントです。

実際によくある見出しの間違った使い方の例を挙げます。

『避けるべき行為』は、初心者向けスタートガイド(Google 初心者向けSEO)にも明確に書かれているため、一度読んでおきましょう。

01非常に長い見出しを使用する

先ほど述べたように、見出しは『一目で内容がわかる簡潔なもの』を設定しましょう。

『非常に長い見出し』や、『キーワードを詰め込みすぎた見出し』はNGです。

また遠回しな言い回しなども避け、とにかくストレートでわかり易い言葉を選択しましょう。

02ページで見出しタグを過度に使用する

見出しは、ページの構成を検索エンジンやユーザーに伝えるためのものです。

適度に設置すれば、双方にページの内容を上手く伝える事ができますが、過度に使用してしまうと、コンテンツの全体像を把握するのに手間が増えてしまいます。

見出しの配下に1,2文の文章だけでは、見出しだらけになってしまいます。

見出しを見直すか、コンテンツを充実させるなどの対策を取りましょう。

03見出しタグに『強調』は使わない

見出しタグで囲まれた箇所は既に重要である事を示している部分です。

そのため、見出しタグで囲まれた箇所にさらに強調表示のタグを利用するのは避けましょう。

スパム判定されてしまう場合もあります。

どうしても強調させたい場合は、『』や【】を用いましょう。

『強調表示』には、以下のようなものがあります。

<b>タグはHTML4で非推奨となり、HTML5で復活しましたが、『他により適切な要素が存在しない場合の最終手段として使用するべきもの』とされているため、使用頻度はかなり低いかと思います。

04見出しタグは強調表示ではない

WEBページを作っていると、強調したい箇所が出て来るかと思います。

そういった際に、hタグは使わないようにしましょう。

あくまでもhタグは、『ページの構成』を伝える見出しに使うもので、強調したいがためにそのデザイン性を使うのは誤った使いかたです。

先ほど挙げた強調タグ(<em>タグや<strong>タグ)を使って強調するか、スタイルシート(CSS)などを使ってテキストを装飾するなどして対応しましょう。

05隠しテキストやキーワードの羅列

SEO対策を意識して、hタグ内に、ページに関する重要なキーワードの羅列を記載している場合がありますが、誤った使いかたです。

何度も繰り返しますが、見出しタグは『ページの構成』を伝えるようにしましょう。

また、ユーザーには見えないようにしたhタグを埋め込んでいる使いかたもありますが、極端に文字を小さくしたhタグや、見えないようにしたhタグを使用するのも避けましょう。

検索エンジンには簡単に見つかってしまい、ペナルティを受ける可能性もあります。

悪質な使い方をしない限り、多少hタグの使い方を間違っていたからといってペナルティを受ける事はありません。

また、どんなにhタグ内の言葉を上手く書いたとしても、その効果によって劇的に検索順位が上がる可能性は低いです。

ユーザーや検索エンジンに正しくページの構成を伝えるという理念に従って記述していけば問題ありません。

では何故、SEO対策として見出しの書き方があげられるのか。

それは、直接的に検索順位に大きな影響を与えなくとも、ユーザビリティに大きな影響を与えるからです。

見出しの良し悪しが、

のような、検索エンジンの評価に影響を与える項目に関係してくるからです。

見出しは、ページの『読みやすさ』や『全体像の把握』などに、大きな影響を与えます。

SEOに直接的な影響とは言えずとも間接的に影響を与えるため、ルールに従った正しい使い方を心がけましょう。

目次をつくり見出しに流用する

WEBサイトでは、『目次』を設置しない場合も多いですが、設置が可能であれば『目次』を設置する事をおすすめします。

ブログサイトなどでは『目次』は設置し易いのではないでしょうか。

目次をそのまま、見出しに流用し、目次には書かなかった『小見出し』や『超小見出し』に『h3～h6』を使うなどの使い方がおすすめです。

ページ内の文章を書き始める前に、目次(見出し)を作成する事で、ページの構成を自分で良く理解できます。

書きたい事がはじめから見えているため、文章構成がしっかりとするメリットがあります。

私もこのブログサイトを立ち上げた際は、目次は設置していませんでしたが、途中から目次を設置する事で、ページの内容がしっかりとしてきたと思います。

また、目次部分をクリックすると該当箇所へ飛べるページ内リンクを設置する事で、ユーザーの方の利便性も向上するかと思います。

この『ページ内リンク』は目次から該当箇所へ飛べるだけでなく、検索結果に『～に移動リンク』や『セクションへのリンク』といった形でリンクが表示される場合があり、検索結果からクリックする事で、ページの最上部ではなく、目当ての該当箇所を直接開けるといったメリットもあります。

『目次』の設置に関しては色々な意見があり、有名なサイトでも目次を設置していない方も多いですが、私のように目次も設置せず、行き当たりばったりでページを作っている方には、目次の設置は非常におすすめです。

ただし、『どうしても上から順に読んでもらいたい』など、何らかの意図がある場合は、ページ内リンクを設置しないという選択肢もあるかと思います。

cssはhタグではなくてクラスが良い

『h1～h6』タグの順序がバラバラになってしまう原因の1つとして、『使いたいデザインがあるから』というのがあるかと思います。

順番的には、『h3』タグだが、『h4』タグのデザインを使いたい。などといった場合です。

hタグのデザインはスタイルシート(CSS)に書いている方がほとんどだと思いますが、『h1タグはこのデザイン』『h2タグはこのデザイン』『h3タグはこのデザイン』とhタグ自体にデザインを設定してしまうと順序を守るのが難しい場合が出てきてしまいます。

このブログでは、『h1タグ』と『h2タグ』こそhタグ自体に固定のデザインを設定していますが、『h3～h6』に関しては、hタグ自体にCSSでデザインは設定していません。

というクラスを作成する事で、例えば同じ『h3』タグであっても、

<h3 class="midashiLeftLine">TEST小見出し①</h3>

↓↓↓↓↓↓↓

TEST小見出し①

<h3 class="midashiAddNo"><span>02</span>TEST小見出し</h3>

↓↓↓↓↓↓↓

02TEST小見出し

といった形で同じhタグでデザインを変更する事が可能になります。

同じサイト内で、たくさんのデザインを用いると統一性が無くなってしまうかもしれませんが、上記のように『番号を振りたい場合』や『+要素と-要素で色を変えたい場合』など、デザインを変えたい機会は色々とあるかと思います。

見出しデザイン参考事例掲載サイトなどを見ると色々なデザインがあります。

見出しは、サイトのデザインに大きな影響を与えるので、hタグの順序がバラバラという方はこの機会に見出しデザインも一新してみてはいかがでしょうか。