見出しの付け方とは？役割や重要性、付けるときのポイントを解説

見出しの付け方

見出しタグは、HTMLでコンテンツの構造を明確にします。具体的には、「<h1>h1見出し</h1>」のように半角小文字で記述することで、開始タグ<h1>と終了タグ</h1>の間のテキストが見出しとして機能します。見出しは基本的にh1からh2、h3と親子構造になるように使いましょう。

下記に示した検索エンジン最適化（SEO）スターター ガイドによると、見出しは順番に従わなくても評価には影響がないとされています。しかし、見出しの重要度はh1を最重要とし、h2、h3と下がっていくため、最適な親子構造にすることで、検索エンジンに重要なコンテンツを正確に伝えられます。また、音声読み上げツールがうまく機能したり、ユーザビリティが向上したりするため、順番通りに見出しを付けるとよいでしょう。

Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn't matter if you're using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.

引用：検索エンジン最適化（SEO）スターター ガイド｜Google

見出しの役割とは？

見出しには、読み手となるユーザーと書き手であるライターの両方に役割があります。ここでは、見出しの役割について、ユーザーとライターの両方の目線でご紹介します。

ユーザー

見出しはユーザーの注意を引き、関心を持たせる導入部分として機能します。次に、内容を簡潔に伝え、ユーザーがその記事を読むかどうかを判断する基準となります。効果的な見出し文を考えることは一見難しそうに思えますが、適切な方法を学ぶことで誰でも魅力的な見出しを作成できます。

ライター

また、ライター側にも見出しは重要で、先に見出しで構成を作っておくと文章作成の効率が高まります。書くべき内容や構成が明確になり、全体の文字数も把握しやすくなります。逆に見出し構成なしで執筆を始めると、内容が散漫になりがちで、整理されていない文章ができあがる可能性があります。そのため、ライティングの面でも見出しを設定しておくことは重要です。

見出しの種類

見出しには、h1～h6タグまであります。ここでは、それぞれの見出しについてご紹介します。

h1タグは記事のタイトルを記載する

h1タグは、見出しタグの中で最も大きく、ページ上部に配置される見出しです。h1タグには検索キーワードを含む記事のタイトルを記載します。

具体的には、検索キーワードが「ページタイトルとは」であれば「ページタイトルとは？SEOに効果的な付け方や注意点」というように、キーワードを含めつつ本文と関連性の高い単語を含むことで、検索エンジンやユーザーにページの内容が伝わりやすくなります。

h2タグはh1タグの各章やセクションを分けるときに使う

h2タグは、h1タグで示したタイトルの後に続く各章の見出しに使用します。これにより、ユーザーは見出しごとにページの内容を読み進められ、興味のある見出しに飛べるようになります。

また、h2タグを効果的に使用することで、検索エンジンがページの構造を理解しやすくなり、関連性の高い検索結果で適切な位置に表示されるようになります。

h3タグはh2タグの詳細を分けて解説するときに使う

h3タグは、h2タグの後にセクションを分けて説明する必要がある場合や、関連する事項を解説する際に使います。例えば、「ページタイトルを改善する際に見るべきポイント」というh2タグで、「競合サイトと比べて魅力が感じられるか」や「ターゲットを意識できているか」といった具体的な情報をh3タグに示します。ただし、すでにh2タグで情報が十分な場合はh3タグを使う必要はありません。

h4~h6はh3タグをさらに細分化するときに使う

h4からh6のタグは、主にh3の内容をさらに詳しく説明する際に利用されます。ただし、全部のページでh5タグやh6タグが必要とされるわけではなく、内容が過剰に細分化されると、かえってユーザーが理解しにくくなる恐れがあります。特にh5やh6を使用する際には、その必要性を検討し、サイトの構成を再確認するとよいでしょう。

見出しタグの書き方で大切なポイント

見出しを書くときにはどのようなポイントを意識して付けるとよいのかを把握することが大切です。ここでは、見出しの書き方で大切なポイントについてご紹介します。

文字数が長すぎないようにする

見出しを効果的に作成するためには、文字数も意識しましょう。理想的な見出しは、h1タグでは30文字以内、そのほかの見出しでは13〜20文字以内に抑えることが推奨されます。

また、見出しの作成時は、情報を簡潔にまとめ、一目で内容が伝わるよう工夫しましょう。情報が多すぎると、メッセージが伝わりにくくなるため、できる限り単一のメッセージに絞ることが重要です。

タグは適切な数で使用する

見出しタグはコンテンツを整え、ユーザーに適切な区切りを提供します。特に、ページ全体の概要を示すh1タグは、1ページに1つだけにとどめることが基本です。過剰な見出しタグの使用は、ユーザーに混乱を招く原因となり得るため、適切な見出しタグの数を心がけましょう。SEOにおいては、見出しの数によって順位に影響が出るものではないとされています。

There's also no magical, ideal amount of headings a given page should have. 

引用：検索エンジン最適化（SEO）スターター ガイド｜Google

見出しは画像ではなくテキストを使う

見出しを設定する際、画像を用いる方法もありますが、ユーザビリティを考慮するとテキストの利用が推奨されます。画像を使う場合は、alt属性で画像内容の説明が必要ですが、通信環境によっては表示されないこともあります。テキストを使用すれば、どのような環境でも安定して表示でき、本文の可読性を高めることができます。そのため、見出しはテキスト形式での記載が望ましいとされています。

titleタグとh1タグを使い分ける

titleタグとh1タグは役割に違いがあります。titleタグはHTMLのheadタグ内に記載し、検索結果やブラウザのタブなどにページタイトルとして表示されます。一方、h1タグはページの本文内に設置し、ページを訪れた人にのみコンテンツの見出しとして見られます。titleタグとh1タグはページのテーマを伝えるために共通して使用されますが、適切に使い分けることで、SEOやユーザビリティの向上につながります。

不自然にキーワードを使わないようにする

見出しは、キーワードを適切に使用することが大切です。検索結果での上位表示を目指しつつも、キーワードを不自然に使うとキーワードスパムと見なされ、Webサイトの信頼性が損なわれる可能性があります。

そのため、「見出し 入れ方」などキーワードだけの見出しは避け、自然で読みやすい文体を心がけましょう。キーワードは、ユーザーの理解を深め、興味を引くために必要な場面でのみ使用するのが最適なため、無理に使うのではなく、必要なときに入れることが大切です。

見出しを効果的に活用するコツ

Webページにおける見出しは、効果的に活用することでユーザビリティを向上させられます。ここでは、見出しを効果的に活用するコツについてご紹介します。

目次を設置し、見出しとリンクさせる

目次があれば記事全体の構造が一目で把握でき、見出しとリンクしていることで各見出しに移動できます。特に、長文の内容を扱う際にユーザーが求める情報に直接アクセスでき、情報の閲覧がスムーズになります。

わかりやすい見た目にデザインする

h1タグは重要な見出しであるため、最も視覚的にわかりやすいようなデザインにするとよいでしょう。h2～h6タグには異なる色やフォントサイズを用いることで、各見出しの重要度を視覚的に区別しやすくします。

ただし、見出しのデザインをわかりやすくするのは文章の構造を明確化するためなので、単なるデザインやテキストの強調には使用しないようにしましょう。テキストの強調にはstrongやbタグが適しています。見出しタグの不適切な使用は、Webページの構造だけでなく、SEO（検索エンジン最適化）にも悪影響を及ぼす可能性があります。

まとめ

この記事では、見出しの付け方についてご紹介しました。見出しにはh1からh6まであり、それぞれに役割があります。見出しを適切に設定することでライティングの効率が向上し、効果的な見出しにすることで、ユーザーの興味を引きつけられます。そのため、記事内でご紹介したポイントを参考に、最適な見出しを付けましょう。