検索:投稿記事HTMLh1の使い方とHTML5のアウトラインh1の使い方WEBページのマークアップを行う際に、SEOの観点からよくheading要素(h1,h2,h3,h4,h5,h6)の使い方に迷うことがあります。h1の使い方として、h1は一つでないとSEO的に良くないとか、あるいは間違ったhtmlの書き方だとまで言う意見を読んだり、聞いたりしたことがあります。結論から言うと、htmlの仕様ではh1を使う数が制限されているということはありません。SEO的に良くないということも根拠はありませんが、使い方次第と言えます。h1が一つの場合で、body要素の直後に配置されたときは、そのh1はページの大見出し、つまりタイトル的な見出しになるので、これはとても大事になることは間違いないです。h1が複数の場合で、h1をただ続けて書いた場合には、各h1はページを章立てし、各章の見出しとなります。htmlの文法上、間違いではありません。ページ全体の大見出しがないという問題もありますが、検索エンジンは上部のコンテンツほど重視するだろうと推測するのであれば、それほど大きな影響はないかもしれません。h1を大見出しとして使い、h2を章立てとして利用した方が、明快な文章構成になるとは思います。h1を複数使う明確な必要性はいつあるのかと言えば、CMSなどで一つの記事がいろいろなページに挿入される場合などで、挿入先の章立て(アウトライン)が分からないときに、記事内部の章立て(アウトライン)をh1から作っておきます。この場合にはh1をただ続けて書くのではなく、セクション要素で明確にセクションを分けることになります(後述)。heading要素は、各セクションの見出し/表題を表します。heading要素の意味は、「見出しとセクション」の章で定義されています。heading要素は、その名前の中にランクが与えられていて、h1要素が最高のランクで、h6が最低のランクです。同じ名前の要素同士は同等のランクを持ちます。2013年8月6日このように、h1を一回しか使ってはいけないとか、h1は無条件でページの大見出し(タイトル)になるとは定義されていません。以上の議論はhtml5の場合でそれ以前はより曖昧で、基本的にはhtml5と同じように解釈されると思いますが、実際は解釈する側によります。1999年12月24日heading要素にキーワードを入れることは、検索エンジンにWEBページのキーワードを正しく伝えるために有効な手段です。それゆえ、キーワードの詰め込みすぎが生じやすく、検索エンジンがペナルテイを課す対象になりがちと思われます。h1に限らず、heading要素には自然な形でキーワードを入れることをお薦めします。HTML5のアウトラインhtml5ではアウトライン(章立て、文脈)という概念が明確に定義されています。セマンテイックWEBの流れから、文章の意味的構造をコンピュータが認識できるようにするためと思います。heading要素はアウトラインを構成する重要な要素になります。以降では、アウトラインの作り方を説明するために、上記引用文で参照され、heading要素の意味が定義されている「見出しとセクション」の章を読みたいと思います。重要な文章を意訳した上で作り方をまとめ、最後に具体例を引用します。見出しとセクションh1–h6要素は見出しです。セクションコンテンツ要素の中で一番最初に現れる見出し要素が、そのセクションの見出しになります。後続に現れる同等以上のランクの見出し要素は、暗黙的に新しいセクションを開始します。同等未満のランクの見出し要素は、そのセクションのサブセクションとなります。どちらの場合も、見出し要素は暗黙的なセクションの見出しとなります。追加:セクションコンテンツ要素とは、article,aside,nav,sectionです。ちなみに、headerとfooterはセクションコンテンツ要素ではありません。セクションの中でヘッダー部分とフッター部分を明示する要素です。セクションルートと呼ばれる要素もあります。これらの要素は、その要素自身のアウトラインを持つことができます。これらの要素の中のセクションと見出しは、これらの要素が入っているページのアウトラインから除外されます。blockquote,body,details,dialog,fieldset,figure,tdセクションコンテンツ要素は常に、一番近くて上位のセクションルート、又は一番近くて上位のセクションコンテンツ要素のサブセクションとみなされます。近いセクションであって、見出し要素によって暗黙的に作成された暗黙的なセクションであっても変わりません。セクションはどのようなランクの見出しを含んでもよい。セクションのレベル(章立て)にあった適切なランクの見出しを使うことが強く推奨される。セクションをセクションコンテンツ要素で明示的に囲うことが推奨される。一つのセクションコンテンツ要素の中に複数の見出し要素を入れて暗黙的にセクションを作成するのではなく、である。以上の文章をまとめると、html5でのアウトラインの作り方は、1.blockquote,body,details,dialog,fieldset,figure,tdがアウトラインのルートとなる。2.article,aside,nav,sectionがセクションを構成する。3.上記各要素の一番初めに出てくるheading要素が各要素の見出しとなる。4.後続に現れる同等以上のランクの見出し要素は、暗黙的に新しいセクションを開始する。同等未満のランクの見出し要素は、そのセクションのサブセクションとなる。どちらの場合も、見出し要素は暗黙的なセクションの見出しとなる。ここで、4.の「後続に現れる同等以上のランクの見出し要素は、暗黙的に新しいセクションを開始する。セクション要素の見出しとなっているheading要素と比較して同等以上のランクの見出し要素である場合には、そのheading要素のランクに関わらず、そのセクションと並列のセクションとして作成される。セクション要素の見出しとなっていないheading要素、つまり暗黙的にセクション要素を作成するheading要素と比較して同等以上のランクの見出し要素である場合には、そのheading要素のランクを考慮して、他の暗黙的にセクション要素を作成するheading要素と比較しつつ、セクションの挿入位置が決まる。後者は、従来の章立ての方式と同じです。(暗黙的なセクションを開始する見出し、内容なし)3.Thud(明示的sectionセクションの見出し)というアウトラインを表します。ちなみに、Bla引用分はセクションルートになり、アウトラインから除外されています。以下はすべて同じアウトラインを示します。</section></body>ちなみに、1.Apples1.Taste1.Sweet2.Colorというアウトラインを表すと思われます。以上のように、多少分かりにくい部分もありますが、html5のアウトラインをしっかり作ってWEBサイトを構築することは、検索エンジンにWEBサイトの内容を正しく伝えるために重要な作業になります。