見出しタグ(hタグ)を作る手順をHTML・ワードプレス別に解説

見出しタグ(hタグ)があることで、文章が読みやすくなるだけでなく検索順位にも影響が生じることがあります。具体的な効果や作る手順、知っておきたい基本ルールについてまとめました。読者の役に立ち、なおかつ評価される文章を書きたい方はぜひご覧ください。

見出しタグ(hタグ)とは

見出しタグ(hタグ)とは、見出しにつけるタグのことです。例えば、次のような文章があるとき、見出しがないと文字の羅列になってしまい、見ただけで読む気を失わせるかもしれません。

ユズやスダチと比べると、カボスはあまり馴染みがないという方も多いかもしれません。いずれも柑橘系の果実ですが、それぞれ風味が異なります。その中でもカボスはクセがなく、料理やお菓子などにも使いやすい果実です。美味しいカボスを食べたかったら、一度、大分県に行ってみてはいかがでしょうか。カボスを使った郷土料理が食べられるだけでなく、スーパーや八百屋などでも手軽に購入できます。また、住宅地でも、家々の庭にカボスの木が植えられていることもあり、食欲をそそる酸味のある香りが楽しめます。空港や駅のお土産屋さんを覗くと、カボスを使った調味料もたくさん売られています。カボス胡椒やカボス塩、カボスオイルなどもあり、買って帰れば自宅でもカボスの酸味と風味を味わえるでしょう。

しかし、次のようにタグ付けすると、一気に読みやすい文章になります。

ユズやスダチと比べると、カボスはあまり馴染みがないという方も多いかもしれません。いずれも柑橘系の果実ですが、それぞれ風味が異なります。その中でもカボスはクセがなく、料理やお菓子などにも使いやすい果実です。

<h2>カボスを味わう大分への旅</h2>
美味しいカボスを食べたかったら、一度、大分県に行ってみてはいかがでしょうか。カボスを使った郷土料理が食べられるだけでなく、スーパーや八百屋などでも手軽に購入できます。また、住宅地でも、家々の庭にカボスの木が植えられていることもあり、食欲をそそる酸味のある香りが楽しめます。

自宅でもカボスを楽しもう

空港や駅のお土産屋さんを覗くと、カボスを使った調味料もたくさん売られています。カボス胡椒やカボス塩、カボスオイルなどもあり、買って帰れば自宅でもカボスの酸味と風味を味わえるでしょう。

h1タグは大見出しに使うタグです。記事のメインテーマをh1タグ内に記し、以下のように記載します。
<h1>大見出しの文章</h1>
h2タグは中見出しに使うタグです。記事をいくつかのテーマに分けてh2タグ内に記載します。
<h2>中見出しの文章</h2>
h2内の文章があまりにも長くなるときには、小見出しに用いるh3タグを使ってさらに内容を分けます。h3内の文章が長くなるときはh4を使うこともあります。なお、hタグは最大h6まで作成することが可能です。しかし、あまりにも文章を区分けしすぎると、かえって読みづらくなるので、h3ないしはh4程度までが適当でしょう。

HTML・ワードプレスで見出しを作る手順

見出しタグを作ると文章が格段と読みやすくなります。また、文章をテーマごとに分けられるので、記事を一目見ただけでも何について書かれているのか把握しやすくなるでしょう。

見出しタグがあるなら、どこにどの情報が書かれているのかがすぐに分かるので、後で見返すときも簡単です。例えば、「カボスのお土産には何があるのだろう?」と疑問に思ったときは、h2見出し「自宅でもカボスを楽しもう」を読めば、カボス胡椒やカボス塩、カボスオイルがあることが分かります。

記事作成に役立つhタグは、HTML方式で文章を書くときとワードプレスで書くときでは作り方が異なります。それぞれの作り方について見ていきましょう。

「HTML」の見出しタグの設置手順

HTMLとはWebページを作成する言語の1つで、広く利用されています。

HTMLでは、始まりを示す<〇>と終わりを示す</〇>の2つの形を使ってタグを作成することがルールです。例えば、大見出しを示すh1タグであれば、
<h1>を使って以下に続く文章が大見出しであることを示し、</h1>
を使って大見出しの文章が終わったことを示します。
<h1>クセのない香りがクセになる!カボスの魅力とは?</h1>
なお、</〇>がない限り、いつまでも<〇>の設定が有効になるので注意が必要です。例えば、次の文章であれば、段落で分けた部分(空港や~)もすべて中見出し(h2タグ)となり、地の文章がなくなってしまいます。

<h2>自宅でもカボスを楽しもう</h2>
空港や駅のお土産屋さんを覗くと、カボスを使った調味料もたくさん売られています。カボス胡椒やカボス塩、カボスオイルなどもあり、買って帰れば自宅でもカボスの酸味と風味を味わえるでしょう。

「ワードプレス」の見出しタグの設置手順

ワードプレスで文章を作成するときは、<〇></〇>を使ってタグ設定を行う必要がありません。ワードプレスでは、文章はすべてブロック化されています。そのため、タグを作るときは、タグ専用のブロックを作成しなくてはいけません。

タグ専用のブロックは次の手順で作成します。

タグ専用にするブロックの右側の「+」をクリックする
ブロックの候補が6種類表示されるので、その中から「見出し」を選ぶ
候補の中に「見出し」がないときは「すべて表示」をクリックして「見出し」を選ぶ
h2見出しを作成するときは、表示されたブロックに見出しの文言を記載する
h2以外の見出しを作成するときは、文言を記載してから、ブロックの上に表示されている編集ツール内の「h2」をクリックし、h3やh4に切り替える

見出しタグの基本ルール

見出しタグを使用することで、見た目がすっきりとして読みたい記事になります。しかし、見出しタグは見た目を整えるために用いてはいけません。あくまでも文章の構造が分かりやすくなるように使用します。

例えば、目次を作成したときは、見出しに指定した文言が上から順に表示されます。見出しタグを見た目の調整のために使うと、記事の構造とは無関係な目次となってしまい、読者だけでなく検索エンジンも混乱させてしまうかもしれません。

また、見出しタグは文字数や順序にも注意が必要です。詳しく見ていきましょう。

適切な見出しタグの文字数
h1見出しタグに記載する文字は、32文字程度が適切とされています。これは、検索結果には、h1見出しは30~35文字程度のみ表示されるためです。30~35文字を超えるh1見出しの場合、見出しの後半が「…」と表示されてしまい、どのような内容の記事なのかが分かりにくくなってしまいます。

例えば、

年末までに知っておきたい年越しの新マナー!蕎麦を食べるかどうか迷ったときはランチがおすすめ

は44文字です。検索結果には「年末までに知っておきたい年越しの新マナー!蕎麦を食べるかどうか…」と表示される可能性があり、伝えたいことが不明瞭になるかもしれません。

検索したユーザーの興味を惹くことができず、クリックしてもらえない可能性も高まります。

知っておきたい年越しの新マナー!蕎麦はランチがおすすめ

と32文字以内にまとめれば、見出し全体が表示できるようになり、記事の内容も伝わりやすくなります。

なお、h2以下の見出しは文字数のルールは特にありません。しかしあまりにも長いと、読者に内容が伝わりにくくなってしまいます。意味が伝わる程度の分量は必要ですが、長くなりすぎないようにしましょう。

見出しを設置する際の注意点
見出しを設置するときは、h1の中にはh2、h2の中にはh3と入れ子構造にしなくてはいけません。

例えば、次のようなタグ付けはNGです。

カボスについて知りたい!美味しい食べ方大集合

~文章~

調味料としてカボスを楽しむ

~文章~

絞り方にもコツがある!

~文章~

切り方にも一工夫しよう

~文章~

フルーツとしてカボスを楽しむ

~文章~

h2の内容をいくつかに分けたいときはh3を使用します。h4を使用するときには、必ず直前の見出しがh3かh4でなくてはいけません。正しいタグ付けは以下の通りです。入れ子構造になっているか確認してから記事を仕上げましょう。

カボスについて知りたい!美味しい食べ方大集合

~文章~

調味料としてカボスを楽しむ

~文章~

絞り方にもコツがある!

~文章~

切り方にも一工夫しよう

~文章~

フルーツとしてカボスを楽しむ

~文章~

見出しタグを考えるタイミング

見出しタグを考えるタイミングについては、特に決まりはありません。しかし、文章を作成する前に見出しタグを作ることで、全体の構成がまとまり、分かりやすい文章に仕上げることができます。

とはいえ、文章を作成しないことには分からない部分があるのも事実です。メインテーマとなるh1見出しと、記事に含めたいテーマであるh2見出しだけを作成してから書き始めてみてはいかがでしょうか。

書きながら「h2の分量が多い」あるいは「h2の中で別途伝えたいことがある」と思ったときはh3を作成し、h3の分量が多いときやちょっと異なるトピックのときはh4を作成すると、自然な流れかつ分かりやすい構成の記事が仕上がります。

見出しタグによる効果

見出しタグを使った文章を執筆する前に、今一度、見出しタグの効果を確認しておきましょう。見出しタグには次の効果があります。

読者の理解を手助けする
検索エンジンから評価を受けやすくなる

それぞれの効果について解説します。

読者の理解を手助けする
見出しタグがあることで、見出しのある文章が仕上がります。見出しは文章のテーマを簡単にまとめたものです。適切な場所にテーマが記載されていることで、読者は内容を理解しやすくなるでしょう。

また、見出しを作ることで、文章に何が書かれているか理解しやすくなります。時間がなくて文章をじっくり読むことができない読者や、記事の概要だけを知りたい読者にも、見出しは役立つツールといえるでしょう。

検索エンジンから評価を受けやすくなる
見出しタグを使って文章の構造を分かりやすくすると、Googleなどの検索エンジンから評価を受けやすくなります。検索エンジンからの評価が高まると、検索順位の上位に表示されるようになり、より多くの読者に読まれる記事になることが可能です。

また、検索エンジンでは「ユーザーに役立つ記事か」という点に注目して評価付けをしています。見出しタグがあると読者の理解を手助けできる、つまり、読者の役に立つ記事になるため、さらに検索エンジンから評価される記事になるでしょう。

特に重要度の高い「見出し1タグ(h1タグ)」の使い方

見出しタグの中でも、h1見出し(見出し1タグ、h1タグ)は、特に重要度が高いタグです。実際にh1見出しに記載されている文言が検索結果にも表示されるため、h1の文言が読者を惹きつけるものでないときは、検索結果の上位に表示されても、クリックしてもらえない可能性があります。

h1見出しには次のルールがあります。

1記事につき一度だけ使用する
狙うキーワードを入れる
h1タグとtitleタグには同じテキストを設定する

それぞれのルールについて見ていきましょう。

1記事につき一度だけ使用する
h1タグは、記事のメインテーマを記すタグです。そのため、1つの記事には1つのみ設定します。

なお、h1タグに画像を設定することも可能です。h1タグに指定した画像にaltタグをつければ、画像の意味を補完することができます。

しかし、検索エンジンはaltタグをh1タグの代わりとはしないため、正しく評価されるとは限りません。検索上位を狙うのであれば、h1には文章を記載するほうが良いでしょう。

狙うキーワードを入れる
検索上位に表示される記事を作成するには、最初にどのキーワードで上位表示されたいのか決めておくことが必要です。対策したいキーワードをh1に入れると検索結果にも表示されやすくなるので、忘れずに入れておきましょう。

例えば、「カボス 食べ方」のキーワードで上位表示されたいならば、h1の中にも「カボス 食べ方」を含めておきます。

h1タグとtitleタグには同じテキストを設定する
記事にはタイトルが必要です。タイトルがあることで、読者は何について記載されている記事か分かりやすくなります。

メインテーマを記すh1とタイトルは同じ目的となるため、titleタグにはh1タグと同じテキストを設定しておきましょう。

見出しタグを設置するポイント

h1タグもh2タグ、h3タグもすべて見出しですが、作成する際は別物として考えます。h1以外の見出しタグを設置するときは、次の3つのポイントに注意しましょう。

h2タグにもなるべくキーワードを入れる
記事の内容が伝わるような見出しを設定する
目に留まりやすいようになるべく短くまとめる

それぞれについて解説します。

h2タグにもなるべくキーワードを入れる
h1タグにはキーワードを含めることが不可欠ですが、h2もできればキーワードを入れるようにしましょう。キーワードを入れることで情報を整理しやすくなり、読者にとって有益な記事に仕上げることができます。

ただし、キーワードを入れることでh2タグの文章が不自然になるときは、無理に入れる必要はありません。あくまでも読者の理解に役立つときのみ、キーワードを含めることが大切です。

記事の内容が伝わるような見出しを設定する
h2以下の見出しは読者の理解を手助けするためのツールです。見出しの下に続く文章の内容を的確にまとめていると、より有意義な見出しになります。

また、見出しは読者に「読みたい」という気持ちを喚起するためにも必要なものです。読者が求める情報が見出し以下に記載されていることが分かるように、見出しの文言を工夫しましょう。

目に留まりやすいようになるべく短くまとめる
h1見出しは32文字程度が望ましいですが、h2以下の見出しは32文字よりも短いほうが良いでしょう。

そもそもh1見出しは読者にじっくりと読ませることを想定した見出しです。読者はh1見出しをじっくりと読み、記事を読むかどうか判断します。

しかし、h2以下は、読者がテンポ良く記事を読むためのサポートとして使う見出しです。目に留まりやすい言葉を使い、できれば短くまとめるようにしましょう。

見出しタグに関するよくある質問

良い文章というものは、読者の心を揺さぶるものであって、特定のルールを守っているかどうかは関係ありません。しかし、検索エンジンにとってはルールが大切です。特定のルールを守って作成することで良い記事と判断されるようになり、検索順位の上位に表示されるようになります。

文章のルールの中でも、見出しタグは特に重要です。見出しタグに関してよくある質問とその答えをまとめました。ぜひご覧になり、見出しを効果的に使った記事を作成してください。

見出しタグに画像を使用できる?
見出しタグは、通常、文章を記載することが一般的です。しかし、画像を見出しにすることもできます。

画像を見出しにするときは、altタグを指定するようにしましょう。altタグを指定すると、画像が表示されないときにaltタグの文字が表示されるようになります。

見出しタグの中にの強調タグを入れていい?
強調タグを使用しなくても、見出しタグは強調された文字になります。視覚的な効果は得られないと考えられるので、見出しタグの中にはなどの強調タグは入れないようにしましょう。

また、強調タグを使い過ぎると、検索エンジンからスパム行為と判断される可能性もあります。検索上位を狙うのであれば、強調タグの使い方に注意しましょう。

見出しがどうしても長くなる場合はどうすればいい?
h1見出しは32文字以内、h2以下の見出しはさらに短くまとめる必要があります。しかし、内容を伝えるにはどうしても見出し数が多くなってしまうというときもあるでしょう。

見出しの文字数が多くなるときは、
を使って改行しましょう。改行なしに多くの文字が並ぶと内容が伝わりにくい見出しになってしまいますが、
を使って改行すれば、文章の長さはそのままにして、分かりやすさを向上させることが可能です。

ユーザーファーストの見出しタグを設定する重要性

h1の見出しタグは読者にメインテーマを伝えるため、h2以下の見出しタグは読者の理解を補助するために使います。ユーザーファーストを心がけると、見出しタグも自ずと検索エンジンから評価されるものになります。

ぜひ読者の気持ちに寄り添って、どのような見出しが必要か考えてみてください。ユーザーファーストの気持ちで記事を作成すれば、見出しが適切なものになり、文章の読みやすさと検索順位の高さも獲得できます。

おすすめの記事