社長の夢実現への道
HTMLのsectionタグの正しい使い方と見出しタグとの関係
最近、取引先に制作依頼したホームページのHTMLソースコードを確認したところ、HTMLタグの使い方を間違っているものがありました。
当社では、ホームページをプロの仕事として、見えないソースまで正しく仕上げて納品することを旨としているので、全ページのHTMLタグを修正することは、さすがに疲れました。
このように、良いデザイン、見た目は良いのですが、HTMLタグの使い方を間違っている場合もあります。最近では、HTMLタグの正しい使い方を把握できていないHTMLコーダーが増えてきたように感じます。
また、既存ホームページのSEO対策やWeb集客コンサルティングをご依頼される場合に、HTMLソースをチェックしますが、今まで私から見てきちんとHTMLタグが使われていたホームページはございませんでした。（今まで100％）
ホームページの見栄えは同じであっても、HTMLタグが正しく使えているかどうかによって、SEO対策の強度に差が出るので、HTMLタグは正しく使用すべきです。しかし、コーダーさーんのHTMLタグの使い方の質や、HTMLタグの意味の理解度が低下しているように感じます。
このコラムでは、経営とはあまり関係ありませんが、HTMLタグの一つ「sectionタグ」の正しい使い方と、見出しタグ（hタグ）との関係をご説明いたします。
経営者の方には、「ホームページは見た目だけでなく、HTMLタグの使われ方も大事だ」ということが伝わればと思います。
sectionタグの意味
sectionタグで囲まれた箇所は、「ここが1つのセクションですよ」という意味になります。セクションとは、「節」や「項」の意味です。
次の例文をご覧ください。
HTMLの例文
<h2>ホットケーキの材料</h2> <p>ホットケーキの材料は、小麦粉、たまご、牛乳、砂糖、塩、バター、メープルシロップです。</p> <p>続いてホットケーキの作り方をご説明します。</p>
h2タグは見出しタグで2番目に大きな見出しです。pタグは段落です。見出しがあり、その説明文が連続して記載されています。
h2タグの内容と、1つ目のpタグの内容は、ホットケーキの材料に関する内容になっています。しかし、2つ目のpタグでは、ホットケーキの作り方に誘導の文章ですので、作り方とは関係がありません。
関連性の高いh2タグと1つ目のpタグを、sectionタグで囲むと次のようになります。
sectionタグを用いたHTMLの例文
<section> <h2>ホットケーキの材料</h2> <p>ホットケーキの材料は、小麦粉、たまご、牛乳、砂糖、塩、バター、メープルシロップです。</p> </section> <p>続いてホットケーキの作り方をご説明します。</p>
sectionタグで囲む前と、囲まれた後とでは、マークアップの意味に違いが出てきます。つまり、sectionタグで囲まれた場合には、「どこまでの範囲が、見出しと関連性があるのか」ということを明確にできます。
sectionタグとSEO対策
検索エンジンは、おそらく「見出しタグの下側にある文章は、その見出しを解説している文章である」と認識していると思います。
もし、sectionタグを使用していない場合は、「次の同じ階層か上位階層の見出しタグが出てくるまでが、関連のあるコンテンツだ」と認識するものと思われます。
しかし、どこまでが見出しと関連のある文章か明確でないので、場合によっては、検索エンジンが混乱すると思います。
sectionタグを用いることで、検索エンジンが見出しと説明のコンテンツを、明確に認識してくれるようになると思われます。すると、SEO対策にもなります。
HTMLコーダーさんによっては、sectionタグを使用しないでdivタグばかり使っている人も見受けられます。XHTMLの名残かもしれませんが、「HTML Living Standard」の仕様に基づいてコーディングすべきでしょう。
sectionタグと見出しタグ（hタグ）の関係
見出しタグには、別名「hタグ」と言われ、h1タグからh6タグまで6種類あります。h1タグは一番大きな見出し、h2タグが2番目に大きな見出しという具合に、階層になっています。
例えば、h2タグとh3タグを用いた場合、sectionタグの使い方をどうすればいいのか、ご説明いたします。
次のコーディング例をご覧ください。
sectionタグの階層例
<section>
<h2>ホットケーキの材料</h2>
<p>ホットケーキの材料は、小麦粉、たまご、牛乳、砂糖、塩、バター、メープルシロップです。</p>
<section>
<h3>作るときに使用する材料</h3>
<p>ホットケーキを作るときに使用する材料は、小麦粉、たまご、牛乳、砂糖、塩、バターです。</p>
</section>
<section>
<h3>食べるときに使用する材料</h3>
<p>ホットケーキを食べるときに使用する材料は、バターとメープルシロップです。</p>
</section>
</section>
ホットケーキの材料を作るときと食べるときの材料に分けて説明している例文です。
それぞれの説明の小見出しとしてh3タグが使用されています。また、その小見出しに関連する説明文が下側にあり、見出しタグといっしょにsectionタグで囲まれています。
ここで、sectionタグが親子関係になっていることが分かります。h2タグを見出しとする親セクションの中に、h3タグを見出しとする子セクションが2つ入っています。
このように、sectionタグで親子関係にすると、h3タグの内容は、h2タグの内容と関連性のあることが検索エンジンには明確に理解できるようになります。
sectionタグを意識してホームページを制作することで、見出しの親子関係が明確になるので、検索エンジンがホームページの内容を理解しやすくなるばかりか、ホームページの内容も見やすいものとなります。
SEO対策でチェックするHTMLタグ
ホームページのHTMLソースを開き、いくつかのHTMLタグの使い方を見たら、SEO対策を知っているコーダーさんに作成されたホームページかどうかが分かります。
sectionタグの使い方もそうですが、簡易的には、次のタグの使い方をチェックするようにしています。
- 見出しタグの使い方（h1～h3ないしh4）
- 見出しタグとpタグの使用状況
- mainタグ、headerタグ、footerタグ、navタグ、asideタグの使い方
他にもページ数や文章量をチェックいたします。ページ数は、もちろんGoogleが認識しているページ数のことです。
また、詳細にSEO対策をチェックする場合は、titleタグやmetaディスクリプションの内容をチェックしたり、文章の書き方などまでチェックしたりします。
SEO対策とは直接関係ありませんが、高レベルにSEO対策をしているかどうかを確認する場合には、構造化データ（スキーマ）の使用状況についてもチェックします。
これらのチェック項目については、「SEO対策のやり方を根本から理解できる!?HTMLマークアップの意味」をご覧ください。
以上、HTMLタグの一つ「sectionタグ」の正しい使い方と、見出しタグとの関係をご説明いたしました。
ホームページの見栄えは同じであっても、HTMLコーディングの仕方によって、SEO対策の強度に差が出る場合があることをご理解いただけたことでしょう。
今ご覧いただいているこのホームページは、私自身がHTMLコーディングを力作したものです。強力なSEO対策も意識して制作しているので、HTMLコーディングをレベルアップするための参考になるかと思います。
HTMLコーダーさんは、HTMLタグの正しい使い方を理解し、HTMLタグを正しく使用してホームページ制作することを目指してください。そうすると、検索エンジンにホームページの内容を正しく理解してもらい、検索者にとって最適なソリューションが得られやすくなり、世の中がより良いものになっていくものと考えます。
当社では、ホームページ制作会社向けに、新人のHTMLコーダーさんのSEO対策コーディングのご指導も承っています。HTMLの歴史からSEO対策を意識したコーディング方法まで、お時間とご予算に合わせて、カスタマイズした講座を開催いたします。研修の種類は、Web技術研修をご覧ください。
また、BtoB営業に強い集客ホームページ制作のサービスもご提供しております。
ご興味のある企業様は、ぜひご連絡ください。
この記事の著者
経営・集客コンサルタント
平野 亮庵 (Hirano Ryoan)
国内でまだSEO対策やGoogleの認知度が低い時代から、検索エンジンマーケティング（SEM）に取り組む。SEO対策の実績はホームページ数が数百、SEOキーワード数なら数千を超える。オリジナル理論として、2010年に「SEOコンテンツマーケティング」、2012年に「理念SEO」を発案。その後、マーケティングや営業・販売、経営コンサルティングなどの理論を取り入れ、Web集客のみならず、競合他社に負けない「集客の流れ」や「営業の仕組み」をつくりる独自の戦略系コンサルティングを開発する。