Webサイトの文字

見出しタグの使い方やSEOとの関係とは

Webサイトの文字

Webサイトのコンテンツは、その内容がユーザーに明確に伝わる必要があります。しかし、テキストで画面が無造作に埋め尽くされて、内容がユーザーに伝わりづらくなっているコンテンツも散見されます。

コンテンツの内容がユーザーに伝わりづらいという問題が生じたときに、『見出しタグ』を使っているのかどうか、適切な使い方をしているか確認しましょう。

ユーザーにコンテンツの内容が伝わりづらくなっているのは、見出しタグを使っていない、または適切に使っていないことが原因になっていることがあります。使っていないとすれば、コンテンツの質に大きな損失を与えています。適切な使い方をできていない場合も、やはりコンテンツの質に損失を与えている可能性があります。

本記事では、見出しタグの役割やSEOとの関係、使い方について基礎から順に解説していきます。自社Webサイトのコンテンツで、見出しタグが適切に使われているかの参考にしてください。

見出しタグとは

見出しタグ

見出しタグは、コンテンツに記載されている『テキスト(情報)の塊』が何について書かれているのかを示したものです。テーマが書かれていると考えればわかりやすいでしょう。

見出しタグがあることで、続いて記載されたテキストは、見出しタグに書かれていたテーマに沿った内容ということが把握することができます。

見出しタグはコンテンツのソース(HTML)では次のように記述されます。

<h1>見出し1</h1>

<h2>見出し2</h2>

<h3>見出し3</h3>

<h4>見出し4</h4>

<h5>見出し5</h5>

<h6>見出し6</h6>

見出しタグをHTMLで記述すると<h〇>となり、〇に入る数字が小さいほど上の階層のテーマを現すため、一番上の階層が<h1>になり、一番下の階層で<h6>です。コンテンツをユーザーが見るときは上の階層の見出しほど文字が大きく、目立つ装飾がされていることが多くなります。

また、見出しタグで囲われたテキストがどのように装飾されるのかは、CSS(コンテンツの見た目を指定するもの)により異なります。通常は、デフォルトのCSSのまま見出しタグを使うだけで、小さい数字の見出しタグほど目立つように表示されるように設定されています。しかしCSSの設定によっては、見出しタグであっても目立たない表示とされているケースもあります。

使い方の例としては、<h1>で『パン』と記述されているとすると、<h2>ではパンをテーマに更に細分化したテーマとして『食パン』『惣菜パン』などの形で下の階層として表示します。食パンや惣菜パンについて、更に詳しく項目をわけて記述したい場合は、<h3>を使うことになります。

このように見出しタグを使いテーマを示すことで、コンテンツが『パン』に関するものであることを示し、更に『食パン』や『惣菜パン』についても記述されていると示すことができます。

見出しタグのメリット

見出しタグのメリットを感じる女性

見出しタグは、テキストの塊が何について書かれたのかテーマを明示するものです。これにより、サイトの運営者だけではなくコンテンツを閲覧するユーザー、さらにはGoogle(検索エンジン)にもメリットを与えることができます。

ユーザーが得るメリット

見出しタグがあることで、コンテンツの内容把握をすることが容易になります。

ユーザーはコンテンツに記載されているテキストの塊だけでも、全体にきちんと目を通せば何について書かれたものかを把握することはできます。

しかし、何について書かれたものなのかを見出しタグで明示することで、の読みやすさが格段にあがります。ユーザーは見出しだけで概要を把握することができるため、目的とする情報を探しやすくなるという効果もあります。

Webサイトによっては、見出しタグを活用してコンテンツの目次として利用されることもあり、目的とする情報に辿り着きやすくなります。

また、見出しタグがあることでコンテンツ全体がどのような構造になっているかを把握することにも繋がり、コンテンツ全体を俯瞰して把握することも可能になります。

サイト運営者が得るメリット

Webサイト運営者が、見出しタグを使用することで、得られるメリットは2つあります。

Google(検索エンジン)にコンテンツ構成を伝えやすくなる

GoogleのAIの精度は年々高まっていますが、それでもテキストの塊が何について記述されているのかを、完璧に把握できるわけではありません。そのため人間と同じく見出しタグでテーマを明示することで、コンテンツの内容や構成が伝わりやすくなります。

コンテンツ内容を階層化して組み立てやすくなる

見出しタグはコンテンツ公開後だけではなく、制作時においてもメリットを生み出します。

脈絡もなくダラダラと書き連ねられたテキストが並んでいるとユーザーにとっては、意味を理解しづらく満足度の低いものとなります。

そのためコンテンツ制作時は最初に大きなテーマを提示して、そこから各論を示したテーマ、内容を更に噛み砕いた小さなテーマを設置する形で、コンテンツの内容を階層化させるとユーザーに伝わりやすい満足度の高いものとなります。

階層化されたコンテンツを頭の中だけで構造を組み立てることは困難ですが、見出しタグを使用すると、この階層化したコンテンツ内容を組み立てやすくなります。

具体的なコンテンツ内容の組み立て方は、見出しタグのみを最初に設置します。最初は、大きな見出し(<h1> or <h2>)を設置し、次に大きな見出しに対応する中見出し(<h2> or <h3>)を設置します。中見出しに対応する各論がある場合は、さらに小見出し(<h3> or <h4>)を設置します。

このように大きな見出しから、階層を一つずつ下げていくことで、どのようなコンテンツにするのかを考え付きやすくなり、さらには階層化された構造のコンテンツを簡単に制作することが可能になります。

以上の手順で、見出しタグによりコンテンツ全体の階層を視覚化していくと、執筆するべきテキストのテーマが明らかとなっているため、制作スピードも上がっていくというメリットも生まれます。

見出しタグのSEOにおける役割

見出しタグとSEOの関係

前述のとおり、コンテンツに見出しタグを使用することで、Google(検索エンジン)に対してコンテンツの内容や構造を伝えやすくなります。

コンテンツの内容や構造をGoogleが理解しやすくなるということは、SEOの効果も期待できます。見出しタグがないことで、Googleが有益なコンテンツを見逃しているとすれば、見出しタグを適切に使用することで、Googleに有益なコンテンツであることが伝わり検索結果の上位に表示されることに繋がります。

ただし、『Googleがコンテンツ内容を理解する=検索結果上昇』ではないことを理解しておきましょう。

なぜなら、Googleがコンテンツ内容を見出しタグにより効果的に理解したとしても、コンテンツ内容が乏しければGoogleは検索結果の上位に表示するに値しないと判断するからです。

見出しタグを使うことはSEOに有効なことですが、それだけに捉われるのでは意味がありません。見出しタグを使いコンテンツの内容を、より良いものにできるよう工夫することが大切です。見出しタグを適切に使い、コンテンツの内容を充実させることがSEOには最も効果的となるでしょう。

見出しタグの使い方

見出しタグの使い方を説明

見出しタグを使うことで、コンテンツ制作者にも、ユーザーにも様々なメリットがあります。

しかし、このメリットは見出しタグを正しく使うことが前提となります。誤った形で見出しタグを使うと、ユーザーだけではなくGoogleも混乱し満足度を下げてしまいます。

ここでは、見出しタグの使い方を具体的な例を交えて確認していきますので、自社サイトの見出しタグが適切に使われているのかチェックするための参考にしてください。

見出しタグは、HTMLでは<h〇>と現れされますが、〇の中に入る数字を小さい順番に記述するのが正しい使い方です。

『パン』に関するコンテンツを元に、見出しタグの悪い例を確認してみます。

<悪い例>

<h1>パンの魅力</h1>

<h3>全国の美味しいパンを紹介</h3>

<h4>東京のパン</h4>

<h4>大阪のパン</h4>

<h4>福岡のパン</h4>

<h3>パンの調理方法</h3>

<h4>食事</h4>

<h4>デザート</h4>

<h3>まとめ</h3>

この悪い例を確認すると、<h1>の次に<h3>の見出しタグが使われていることがわかります。本来であれば、<h1>の次は<h2>の見出しタグを使う必要があります。それに伴い、<h4>は<h3>に繰り上がる形で使用するのが正しい使い方になります。

次の正しい例を確認してください。

<正しい例>

<h1>パンの魅力</h1>

<h2>全国の美味しいパンを紹介</h2>

<h3>東京のパン</h3>

<h3>大阪のパン</h3>

<h3>福岡のパン</h3>

<h2>パンの調理方法</h2>

<h3>食事</h3>

<h3>デザート</h3>

<h2>まとめ</h2>

このように<h1>の次は<h2>の見出しタグが使われ、その次は<h3>の見出しタグが使われるのが正しい使い方になります。一番上の階層である<h1>には『パンの魅力』というコンテンツ全体の大きなテーマが記述されています。そして、<h2>以下の見出しタグは、数字が大きくなるごとに、小さなテーマが記述されていることが確認できます。

なお、<h2>でテーマを示して、<h3>以下の見出しタグでそのテーマについて記述し終えたところで、次のテーマの提示として、見出しタグで<h2>を記述するのは問題ありません。順番通りに使うのは、<h2>で示されるテーマ毎になり、そのテーマの記述が<h3>以下の見出しタグを使い終了すると、また違うテーマを<h2>で提示することになります。

見出しタグを使うときの注意点

見出しタグを使う場合の注意点

見出しタグの使い方は前述のとおりですが、見出しタグを使う順番以外にも気を付けるべきことがあります。

コンテンツの内容・意図に沿わせる

見出しタグは、コンテンツに記載されたテキストの塊が、どのようなテーマに沿って書かれたものかを説明するものとなります。そのため、コンテンツ内容と見出しタグに記載された内容が乖離していると、ユーザーにもGoogleにも混乱を与えてしまいます。

例えば、『パン』に関するコンテンツで使われる見出しタグが、『白米』に関することばかりになると、ユーザーもGoogleもコンテンツの内容を理解するのが難しくなります。『パン』に関するコンテンツだとしても、『白米』との比較で見出しタグの一つを使うくらいは問題ないのですが、全ての見出しタグで『白米』と入っているのは問題があります。

見出しタグで、どのような内容が記述されているのかをテーマとして提示したのであれば、そのテーマに沿ったテキスト内容となるようにしてください。

見出しタグを文字装飾として使用しない

見出しタグで囲われたテキストは、太字になったり装飾されたりするためコンテンツ内で目立ちます。

そのため、見出しタグを文字装飾の機能として使っているWebサイトも見受けられます。しかし、この使い方は間違っています。

ここまで説明してきたとおり、見出しタグはテキストの塊がどのような意味なのか、そのテーマを明示するものです。

見出しタグで囲われたテキストは目立ちますが、それはテーマを明示する大事なコンテンツの要素だからです。テキスト自体を目立たせたい場合は、<b>テキスト</b>などのタグを使用したり、テキストの色を変えるなどしましょう。

おわりに

HTMLコーディング

見出しタグの基礎知識から、使い方まで解説をしてきました。

見出しタグについて、まとめると次の3点が重要になります。

  • 見出しタグはユーザー、Google・Webサイト運営者にメリットを与える
  • 見出しタグはSEOに有効だが、大事なのはあくまでもコンテンツ内容
  • 見出しタグを設置するだけではなく、使い方を正しくする必要がある

以上について、見出しタグを使うとき意識するようにしてください。

見出しタグの使い方は、Webサイトのコンテンツ制作においては、基礎といえる部分になります。

しかし、基礎だからこそきちんと学ぶことをしないで、誤った使い方をしているWebサイトがあるのも事実です。この機会に見出しタグの使い方を見直して、自社のWebサイト運営に役立てていただけると幸いです。

WEBでのお問い合わせはこちら