ユニバーサルな情報共有を行うことを目的として設計されたHTMLは、文書の論理構造を伝えることに適した文法を持っています。中でも特徴的なのが、段階的な見出しレベルを示す<h1>〜<h6>タグです。

Webページの論理構造を表すheading要素

HTMLドキュメントの論理構造を表す見出し要素(heading要素)がh1〜h6要素です。それぞれが見出しをあらわすブロック要素で、hの後ろに続いている数字は見出しのレベルを表しています。h1は第1レベルの見出し、h2は第2レベルの見出し、と続きます。

ただしこの要素に対する検索エンジンの重み付けはまちまちで、見出しレベルに応じた重み付けがされているとは限らない点には注意が必要です。記述の方法は、h1を例とすると、以下のようになります。

<h1>ドキュメントを的確に表す大見出し</h1>

h1〜h6要素を使用した構造化

h1〜h6要素を使うことで、文書の構造を明確に表現することができます。h1要素を根として、根から幹、幹から枝、枝から葉、というように、より重要な部分から順に階層状に展開する構造を、適切な見出しレベルを用いてマークアップしていきます。この意味で、これらの要素は、文書構造を表現するというHTMLの性格をよくあらわした要素であるといえます。

<h1>第1レベルの見出し</h1>
<p>段落</p>
<h2>第2レベルの見出し</h2>
<p>段落</p>
<p>段落</p>
<h2>第2レベルの見出し</h2>
<p>段落</p>
<p>段落</p>
<h3>第3レベルの見出し</h3>
<p>段落</p>
<h2>第2レベルの見出し</h2>
....

h1〜h6のそれぞれの要素の内容は、その後に続く内容を的確にあらわすものであるべきです。大見出しから中見出しだけを一覧しただけで大まかな構成を理解することができ、さらに詳しい内容のための小見出しを設け、個々の段落で詳しい解説を行う、といった論理展開が明確になっていれば、ユーザーにも検索エンジンにもわかりやすい文書となります。

h要素の内容とコピーライティング

見出しにはそのドキュメントに合ったコピーを付けることが重要になります。適切なコピーを大見出しに使用することで、ユーザーの理解を助け、SEOを効果的に進めることが可能になるのです。コピーライティングについての注意事項は以下の通りです。

  • 気の利いた言葉よりも具体的な言葉を使用する
  • キーワードを含めて記述する
  • 同一のキーワードを繰り返して記述しない
  • 複数のキーワードを過度に盛り込まない
  • 見出しに続く情報の内容を具体的に記述する