皆さんこんにちは、エンドルフィンズ代表の田上です。
今回は、Webサイトの中身を作るときに欠かすことができない＜hタグ＞について解説していきます。
先日、以下の記事でホームページ(HP)の集客力を高める改善ポイントを紹介しました。 その改善ポイントの一つ、『HTMLタグの最適化』に関係のある話で、確りと＜hタグ＞を設定してあげることによって間接的にWeb集客力の向上を期待できます。
Webサイトのリニューアルや新規開設時には、このあたりの設計まで確りと考慮した上で制作することをオススメしています。
それでは＜hタグ＞のポイントについて解説していきます。
ホームページ(HP)の集客力を高める、改善ポイント3つを紹介します
目次
＜hタグ＞ とは
hタグとは、Webページにおいて『見出し』を意味するHTMLタグのことを指します。
記述方法は以下の通りです。
<h1>見出し</h1>
“h”とはheadingの略で、見出しを意味します。hタグは、h1〜h6まで6段階が存在し、数字が若い方が重要度が高い見出しを意味します。
hタグは一般的に以下の様な構成になっています。
タイトル（h1タグ）
∟大カテゴリ①（h2タグ）
∟中カテゴリ①（h3タグ）
∟小カテゴリ①（h4タグ）
∟小カテゴリ②（h4タグ）
∟中カテゴリ②（h3タグ）
∟小カテゴリ③（h4タグ）
∟大カテゴリ②（h2タグ）
∟中カテゴリ③（h3タグ）
詳しくは後述しますが、見出しによる文章の階層構造は、Web集客力に影響を与えるため、記述内容を事前に整理してから見出しを決めましょう。
前述の通りh1タグはhタグの中で最も上位の見出しであるため、Googleなどの検索エンジンも同様にh1に書かれていることを優先的に認識します。
ここからは、h1を記述する際の注意点について解説していきます。
h1タグとWeb集客力との関係
Googleなどの検索エンジンを提供している会社は、検索する人のニーズ、例えば『良い歯医者を知りたい』というニーズに最もマッチした情報を持つWebサイトを表示すべく日夜努力を続けています。
なぜかというと、良い歯医者を知りたいのに、検索結果ページに表示されたホームページが全然的外れなものばかりだと、今度からGoogleを使いたくないな、と思われてしまうからです。
この、検索する人のニーズにあったWebサイトを表示するために、Googleは『検索キーワード』毎にマッチした内容を持っているWebサイトのリストを裏側で作成しています。
h1タグはGoogleがWebサイトの内容を把握するために用いられるもので、Webサイトのリスト作りに影響を与えます。h1タグを適切に設定することで、Googleがホームページの内容やコンテンツの構造を理解しやすくなりまり、それによってリストの上位に入りやすくなるのです。
h1タグを設定された見出しには、その章の要諦が含まれているはずです。見出しが綺麗に設計されている文章はユーザーにとっても読みやすい文章のはずなので、Googleなどの検索エンジンも見出しを重要視しているということです。
hタグの設置方法と5つのポイント
Googleがよりホームページの内容やコンテンツの構造を理解しやすくなる、hタグの記述方法のポイントがあるので以下で解説していきます。
ポイント1：h1は1ページに多くても2個まで
h1タグは1ページに多くても2個までの設置に留めましょう。出来れば1個に絞りましょう。
使用しすぎると1つ1つのh1の重要度が相対的に低下してしまう他、Webページの論理構造がわかりにくくなってしまいます。
よって、1つのページに1～2個程度に抑えておきましょう。
ポイント2：hタグに画像を使用する場合はalt属性に内容を記述する
hタグには画像を設定することも可能です。ただし、その場合にはalt属性にその写真の内容を必ず記述する様にしてください。
alt属性とは、画像の内容を記述するHTML要素です。検索エンジンに対して画像の内容を伝えたり、画像が読み込めない場合には代替テキストとして表示されます。
hタグに画像を使用する場合は以下のように記述します。
<h1><img src=”xxxxx.jpg” alt=”画像の内容”></h1>
この場合、Googleなどはalt属性の中身をh1タグの内容として把握します。その章の内容を含めつつ、画像の内容も含めるようなalt属性を意識してください。
なおalt属性にキーワードを不自然に入れすぎるとマイナスの評価をつけられる可能性があるので注意しましょう。あくまでも自然な画像の説明に留めるようにしてください。
ポイント3：hタグは数値の若い順に使用する
hタグにはh1～h6がありますが、これらはh1→h2→h3→…というふうに必ず数字の若い順に使用しましょう。
タイトル（h1タグ）
∟大カテゴリ①（h2タグ）
∟中カテゴリ①（h3タグ）
∟小カテゴリ①（h4タグ）
∟小カテゴリ②（h4タグ）
∟中カテゴリ②（h3タグ）
∟小カテゴリ③（h4タグ）
∟大カテゴリ②（h2タグ）
∟中カテゴリ③（h3タグ）
ポイント4：hタグをフォントサイズの変更には使用しない
時々、hタグを見出しのフォントサイズ変更のために使っているWebサイトを見かけますが、必ず見出しの重要度順で使うようにしましょう。
hタグはあくまでもユーザーやGoogleなどの検索エンジンに文章の論理構造をわかりやすくて示すためのものです。
フォントサイズはCSSを使って変更するようにしてください。
ポイント5：hタグはキーワードを含めて簡潔に記述する
最後に、最も重要なポイントは、
- キーワードを計画的に入れること
- キーワードを入れすぎないこと
- 簡潔な文章で記述すること
です。
hタグには、その情報を必要とするユーザーを想定し、そのユーザーが検索するであろうキーワードを含めるようにしましょう。Googleがそのキーワードに役立つ情報を持っているサイトと判断してくれやすくなります。
ただし、キーワードを不自然に入れすぎるのはよくありません。不自然に入れすぎてしまうとGoogleは表示順位を上げようとしているだけのユーザーにとって有益でないサイトとして認識してしまいます。
そうならないためにも、キーワードは1～2個に抑え、文章は約50字以内にすることをオススメしています。
Webサイトのタイトルの重要度を表す＜hタグ＞の使い方、まとめ
今回は、Webサイトのタイトルの重要度を表すhタグの使い方について解説しました。
Web集客に強いWebサイトを作るには、こうしたタイトルの事前設計も重要な要素の一つになっていきます。
