その他のSEO

h1を複数使ったりロゴや画像にしていいの?【h要素・hタグの疑問まとめ】

  • このエントリーをはてなブックマークに追加
  • LINEで送る
h要素・hタグの疑問まとめ

SEOの基本ですが、だからこそ疑問も多いh要素・hタグの疑問や特徴をまとめました。
案外ざっくりと覚えてしまったままになっている事柄もあると思いますので、この機会に改めて確認してみてはいかがでしょうか?

h1、h2、h3…て何? ~h要素(hタグ)とは?~

h要素はHTMLタグの一つ

h要素はHTMLタグの一つで「見出し」を表す要素です。
見出しを意味する「heading」の頭文字「h」が要素名になっているので覚えやすいですね!

もちろん見出しを意味しますので、正しく使用されていれば、エンドユーザーにとって読みやすい文章になるだけでなく、検索エンジンに対してもページの階層構造を伝える役割を担っています。

h要素は<h1>、<h2>、<h3>…と<h6>まであり、<h1>が最も高いランクの見出しであり、<h6>が最も低いランクの見出しを意味します。
つまり、見出しの重要度は<h1>から順に低くなります。
また、h1タグはページのテーマを伝える役割があるため、「大見出し」として特に重要視されています。

例えるなら、論文や小説などの「第1部」が<h1>、「第1章」が<h2>、「第1節」が<h3>に該当します。

論文や小説などの「第1部」「第1章」「第1節」に該当

HTML5以降でのh1の仕様変更について

HTMLの大きな仕様変更として、2014年にHTML5が勧告されました。
h要素にもいくつか仕様変更があり、話題になったのでまだ記憶に残っている方も多いのではないでしょうか?
※その後、2016年11月にHTML5.1、2017年12月にHTML5.2が勧告されたました

HTML5が勧告された当初

<section>を入れ子にした正しい階層構造でマークアップされている場合、その中の見出しランクは問わない

という仕様がありました。
つまりセクション内の見出しランクを全てh1にすることも問題ない、複数使うことが可能になった、という解釈が広まりました。

HTML5.1の勧告以降

<section>の階層に応じて適切な見出しランクを使用する必要がある

HTML5.1が勧告された際には上記のように改められ、実質、見出しランクを全てh1にすることは非推奨とされました。
要はHTML5以前の仕様に戻ったわけですね。

こういった経緯もあり、HTML5以降、h1の複数使用は可能かどうかの情報が交錯していますが、現状では推奨されていませんので注意してください。

参照:W3C Recommendation

HTML5以降でのh要素の仕様変更について

また、h1以外にもいくつかh要素の扱いに変更がありましたので簡単に紹介しておきます。

  • h要素のalign属性の廃止(揃え位置の指定にはCSSを推奨)
  • 画像をh要素にする場合は、img要素を入れ子にし、alt属性を適切に設定

装飾はCSSが基本

h要素はHTMLタグの一つなので、もちろん装飾はCSSが基本となります。
<font>タグや<b>タグ、<big>タグなどを使用します。

上記のように画像として使用することも可能ですが、メンテナンス性やマークアップの構造としては、なるべくCSSで装飾した方が良いでしょう。

無料ホームページ作成サービスを使っている方へ

無料ホームページ作成サービスを使っている方の多くや、マークアップに明るくない方は、テキストサイズを変えるだけのためにh1~h6を使用してしまっているように見受けられます。
h1~h6はあくまで「見出し」であり、階層にあった使用が勧められているため、後述する階層を意識した使用を心がけるようにしましょう。
できれば装飾はCSSを駆使し、正しいマークアップを行うことでSEO効果が高められます。

h要素の使い方・記述方法

h要素の使い方・記述方法

h要素の正しい使い方

h要素は見出しを意味する「heading」の頭文字「h」が要素名になっています。
つまり、見出し以外の使い方は適切ではないと言えます。

また可能であれば、h要素には検索キーワードを含めると効果的と言われています。
特にh1は重要度が高いと言われていますが、ページ内容によって不自然になる場合は、ページに適した文言を使用しましょう。

h要素の構造

h要素の構造ですが、論文や小説など同様、h1~h6が「第1部」「第1章」「第1節」のように階層、段落に応じて使い分けられる必要があります。

例えば、h2の下にh5が現れたり、h3の中にh2が現れたり、h2の中にh2が現れたりする構造は、階層がバラバラのため、適切な記述ではありません。
またh1は各ページに1つが推奨されています。

階層構造の例(わかりやすいように改行を入れてあります)

<h1>ページの大見出し</h1>

	<section>
	<h2>第1部</h2>
		<h3>第1章</h3>
			<h4>第1節</h4>
			<h4>第2節</h4>
			<h4>第3節</h4>
		<h3>第2章</h3>
			<h4>第1節</h4>
			<h4>第2節</h4>
		<h3>第3章</h3>
	</section>

	<section>
	<h2>第2部</h2>
	</section>

	<section>
	<h2>第3部</h2>
		<h3>第1章</h3>
		<h3>第2章</h3>
	</section>

詳細記事はこちら

h要素に記述する文字数

結論から言うと、文字数に制限はありません。
SEOを意識すると文字数を気にする方が時々いますが、h要素は各セクションの見出しを表すことが目的ですので、適切な表現がなされていれば文字数には特に制限はありません。
見出しですので、そのセクションを端的に表そうとすれば、長くなりすぎることは滅多にないはずです。

また<title>タグや<meta description>タグのように、検索結果には現れることもありません。
サイト名を含めるなどの配慮も必要ありませんので、あくまで見出しに相応しい内容で記載すればよいのです。

h要素のSEO効果

h要素のSEO効果

検索順位の向上効果は多少ある

h要素内に検索キーワードを含めると良いとよく言われています。
なぜでしょうか?
それは、検索エンジンがページ内容を理解するのに、h1がとても重要な判断材料になるからです。
またh2~h6があることによって、ページ構造が把握しやすくなります。
もちろん、閲覧するユーザーもページ構造が把握でき利便性が上がるため、検索エンジンからの評価も高まります。
そのため、検索順位の向上は期待できると言えます。

ですが、基本的には大きく順位が上がることはあまりありません。何よりも大事なのは、見出しではなく本文の内容になるからです。
ただし、ページ毎にどのような内容がどのような構造で記載されているかを正しく伝えることは、無駄にはなりませんので、h要素の最適化は大切です。

キーワードの含め方

ではどのように最適化すればよいのでしょうか?
実は、h要素内に特定のキーワードが過度に埋め込まれていた場合、場検索エンジンからペナルティを受けることがあります。
そのため、故意に多くの検索キーワードを盛り込むことは良いとは言えません。

あくまで見出しとして自然な内容になるよう配慮するだけで十分です。

<title>タグなどでは、キーワードはなるべく前にすると良いという話もありますが、信憑性のあるソースはありません。
もちろんh要素においても同じです。

SEO対策以外の効果

h要素を利用することで、ページの構成が閲覧ユーザーにすばやく伝わるようになります。
仮に、長いページでh要素のないページがあった場合、ページの全体層を把握することは難しくなります。
逆に見出しがあれば、ある程度把握ができ、文章も読みやすくなり、理解度も高まります。

またこのページ上部にもあるように目次として活用できます。
WordPressのプラグインのように、ユーザーエージェントの中にはページ中のh要素を読み込み、自動的に目次を生成するものもあります。

h1、h要素のよくある疑問まとめ

h1、h要素のよくある疑問まとめ

h1をロゴにしてもいいの?

結論としては問題ありません。
ロゴは多くの場合画像になりますが、現状h1を画像にすることはNGにはなっていません。
マークアップでは、img要素を入れ子にし、alt属性を適切に設定するよう推奨されています。
こうすることで、画像が表示されなかった場合でもaltの内容がh1として反映されます。

もちろん、alt属性はロゴの内容を適切に記載する必要があります。
そのため、ロゴ画像にない文言や検索キーワードを追加することは、検索エンジンから不適切とみなされる可能性があります。
また全てのページでh1が重複することになりますので、ページごとにSEO対策を考えている場合にも不向きです。

h1を画像にしてもいいの?

上記でもお伝えしましたが、現状h1を画像にすることはNGにはなっていませんので画像でもOKです。
マークアップでは、img要素を入れ子にし、alt属性を適切に設定すればよいのです。
ただし、alt属性の最適化や、メンテナンス性を考慮するとあまりおすすめではありません。

また古いサイトでよく見かけますが、cssで「text-indent: -9999px;」を利用し、隠しテキストにしているケースもありますが、これはペナルティの対象になりますのでalt属性にテキストを記述した方が良いでしょう。

詳細記事はこちら

h1タグの数が複数あった場合は検索順位に影響するの?

順位への影響はほとんどありません。
HTML5が勧告された当初、h1が複数使用できる旨が伝えられましたが、HTML5.1が勧告された際には非推奨に改められました。
しかしながら検索エンジンには、そこまで重要とは言えないようです。
h要素の内容や順序はコンテンツの文脈を理解するために重要視されてはいますが、ランク付けへの影響はあまりないようです。
これはテンプレートやページの仕様など多種多様にあること、厳密に統制することは困難であること、ランク付けの要素は他にもあることなどが理由になります。

<title>タグとh1が重複してもいいの?

特に問題はありません。
サイトによっては<title>とh1が重複することはやむを得ないこともしばしばあります。
ただし<title>が検索結果に表示され、h1がページ内に表示されることになりますので、用途に応じて変えることも可能です。

特にタイトルはCTR(クリック率)に影響し、サイトへの流入に関わってきますので、色々試してみるのが効果的です。

h1のテキスト内に配置するキーワードの場所は決まっているの?

特に決まりはありません。
見出しとして、最適な内容になっていることが大切です。
またキーワードは無理に入れる必要はありません。

h要素は重要なの?

順位対策として考えるのであれば、重要度は低いと言えます。
しかし、ユーザビリティや読みやすさに配慮することは重要です。
また推奨されるマークアップやメンテナンス性なども考慮すると、対策はやっておいて損はないでしょう。

まとめ

h要素はHTMLタグの一つで「見出し」を表す要素です。
そのため、正しい用法で、正しい順番で使うことによって、検索エンジンにも閲覧者にもわかりやすい文章構造を伝えることができます。
時々、仕様変更もありますので、定期的に確認することも忘れないようにしましょう。

現状では、h1はロゴに使用したり、画像にしたりすることは可能ではありますが、推奨はされていません。
基本に沿った使い方が今度も求められる可能性は高いので、曖昧に覚えてしまっている方は、再度見直すようにしておくと良いです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメントを残す

*