SEOの基本ですが、だからこそ疑問も多い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の仕様変更について

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

HTML5が勧告された当初

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

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

HTML5.1の勧告以降

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

HTML5.1が勧告された際には上記のように改められ、h1を複数使える内容は削除されました。
実質、HTML5以前の仕様に戻ったと考える人が多くを占めるようになりました。
参照:W3C Recommendation

こういった経緯もあり、HTML5以降、h1の複数使用は可能かどうかの情報が交錯しています。

現状は、htmlの仕様から言うと、h1の複数使用は問題ありません。
ただし、<section>の階層に応じた適切な見出しランクを使用することが求められます。

HTMLの最新情報、仕様変更は、こちらのサイトから確認すると便利です。

HTML Living Standard

HTML Living Standardは、WHATWGが策定しているHTMLの標準仕様で、W3Cの勧告するHTML5を基に、日々開発が進められているHTMLの仕様となります。
現在、参照されているHTML情報のスタンダードなリソースとなっています。

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

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

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

装飾はCSSが基本

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

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

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

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

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

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

h要素の正しい使い方

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

また可能であれば、h要素にはSEO検索キーワードを含めると効果的と言われています。
特にh1は重要視されがちですが、現在ではSEO効果はあまり期待できません。
ページ内容によって不自然になるよりも、ページに適した文言を優先して使用しましょう。

h要素の構造

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

例えば、h2の下層にh5が現れたり、h3の下層にh2が現れたりする構造は、階層がバラバラのため、適切な記述ではありません。
ただし、可能な限りは<section>の階層に応じた適切な見出しランクを使用しましょう。

<階層構造の例>

<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>

ちなみに、現状は、h1は複数使用は問題ありませんが、SEOの観点では上記のように、h1は各ページに1つをおすすめします。
これは、1ページ1コンテンツの方がページの主題がはっきりし、ユーザーファーストにつながるためです。

ですが、ページの内容や構成によっては、h1を複数使う方が、ユーザーにとって利用しやすいサイトになることもあります。
その場合は、神経質になりすぎず、状況に合わせ、臨機応変に対応すると良いでしょう。

h要素に記述する文字数

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

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

h要素のSEO効果

h要素のSEO効果

検索順位の向上効果は多少期待できる

h要素内にSEO対策キーワードを含めると良いとよく言われています。
なぜでしょうか?
それは、検索エンジンがページ内容を理解するのに、h1が判断材料になりやすいからです。
h2~h6があることによって、ページ構造も把握しやすくなります。

何より閲覧するユーザーがページ構造を把握できるようになります。
そして、ユーザーの利便性が認められると、検索エンジンからの評価を受ける可能性があります。
そのため、検索順位の向上は、多少ではありますが期待はできます。

ですが、h要素が直接、順位に影響することはありません。
何よりも大事なのは、見出しではなく本文の内容になるからです。
ただし、ページ毎にどのような内容がどのような構造で記載されているかを正しく伝えることは無駄にはなりませんので、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要素の内容や順序はコンテンツの文脈を理解するために重要視されていますが、ランク付けへの影響は直接ないようです。
これはテンプレートやページの仕様など多種多様にあること、厳密に統制することは困難であること、ランク付けの要素は他にもあることなどが、Googleからも明記されています。

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

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

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

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

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

h要素は重要なの?

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

まとめ

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

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

関連記事