一から始めるWeb制作 #9〜人にも検索エンジンにもやさしいサイト構造をつくるセクショニング

html coding

ウェブサイトは、人にも機械(検索エンジン)にも読みやすいコーディングが良いとされる。

読みやすければ、おのずとアクセスは増え、検索上位にも掲載される。

このことは、内部SEO対策のひとつとして欠かせない。

今回は、人にも機械にもやさしいサイト構造を表現する「セクショニング」について。

サイト構造の基本

HTML5では、より読みやすさを重視したコーディングが求められる。

「読みやすさ」とは、ウェブページの構造がはっきりとわかるように、各要素を並べられていること。

最初は、視覚的な読みやすさについて。

例えば、ブラウザで表示される一般的なウェブページの構造は、だいたい以下の図のように構成されている。

Webページの構造 上から順に、

  1. 企業名やサイトタイトルなどを表示するヘッダー部分
  2. 各カテゴリーページへジャンプするナビゲーション(メニューともいう)
  3. メインコンテンツ(本文)
  4. フッター(プライバシーポリシー・サイトマップ・問い合わせなどのリンク)

というようにできている。

視覚的、つまり人がウェブページを読む場合は、この図のように表示されれば良い。極端な話、このように見せることは、「一から始めるWeb制作 #8〜最低限これだけは使いこなしたい!よく使うタグ」で説明したdivタグや、cssでどうにでもできる。

しかし、divタグやcssだけでレイアウトされたウェブページでは、検索エンジン(機械)は人と同じように読み取ることはできない。

そこで、各構造を示すheader、nav、main、footerタグを用いれば、人にも機械にも読みやすくなるということ。

ちなみにheaderタグは、「一から始めるWeb制作 #4〜文字エンコーディングとHTMLの基本構造」で説明したheadタグとは違う意味なので、ご注意を。

header、nav、main、footerタグは全て、bodyタグ内に書き、実際にブラウザに表示される部分となる。

セクショニング要素

bodyタグ内は、ページの本文。視覚的にはもちろんのこと、検索エンジンにも、文章構造の意味や役割が伝わらなければ意味がない。

HTML4.01以前は、本文においてhタグ(見出し)で構造化し、文章はpタグやdivタグでセクションを分けておけば良かった(以下のような感じ)。

<body>
<nav></nav>

 <h1></h1>
 	
   <h2></h2>
   <p></p>
   <p></p>
   <h3></h3>
   <p></p>
   <p></p>
 		
   <h2></h2>
   <p></p>
   <p></p>
   <h3></h3>
   <p></p>
   <p></p>

<footer></footer>
</body>

しかし、検索エンジンがより文章を理解しやすくするため、HTML5より「セクショニング要素」が導入された。

セクショニング・コンテンツとなる要素は、見出しや文書を構成する特定の部位の範囲を定義します。

セクショニング・コンテンツとなる要素は明示的にアウトラインを生成します。各セクショニングコンテンツは通常、見出しを伴って使用されます。

出典:W3 Watch Reference

つまり、

「文章の見出し、章や節の範囲を定義する要素(コンテンツ)」

のことを、セクショニング要素という。

具体的には、articleタグ、sectionタグ、asideタグ、そしてnavタグを指し、下記HTMLのように、見出しやフッターを含む区切り要素のこと。

<body>
<nav></nav>

  <article>
    <h1></h1>
 	
    <section>
      <h2></h2>
      <p></p>
      <p></p>	

      <section>
	      <h3></h3>
	      <p></p>
 	      <p></p>
      </section>
    </section>
 	
    <section>
      <h2></h2>
      <p></p>
      <p></p>

      <section>
        <h3></h3>
        <p></p>
        <p></p>
      </section>
    </section>

  <footer></footer>
</article>

</body>

navタグ

navタグは、文章内の主要なナビゲーションのセクションを表す。

一般的には、サイト全体のナビゲーション「グローバル・ナビゲーション」をさすが、サイドメニューにあるリンク類のリンクブロック、記事の目次もnavタグを用いる。

footer内によくある、企業やサイトのprofile、sitemap、contactといったリンクについては、無理にnavタグを使うことなく、footerタグ内の要素として取り扱うことで十分。

articleタグ

articleタグは、

「その範囲がセクションの中で独立しており、それだけで完結していることを示す要素。」

タグ内が、ひとつの記事としてまとまっていることを示す。

h1タグ(サイト名)やパンクズリスト以下、本文をarticleタグで囲む。

sectionタグ

sectionタグは、その範囲が一般的な章・節・項などであることを示す要素。章や節など記事の一部分のひとかたまりを示す。

sectionタグ内にはhタグを含むことが推奨され、入子にすることも可能。反対に、見出しをつけられない場合は、この要素は用いることができない。

2016年勧告のHTML5.1により、セクション内の見出しで、h1を使用することが撤廃された。そのため、h2以下をセクショニングする。

<section>
  <h2></h2>
    <section>
      <h3></h3>
    </section>
    <section>
      <h3></h3>
    </section>
</section>

sectionタグは、文章の章・節など、意味を示すもの。CSSやJavaScriptでの操作のみを目的にする用途に使うときや、ブロックを作成するときはdivタグを使う。

asideタグ(補足)

asideタグは、メインコンテンツとは関連性が低い、補足や広告などを示す要素。主要文章に対して、間接的な説明を入れる場合や、サイドバーをまとめるときなどにも用いる。

asideタグは、1ページ内に複数回使用しても可。

H1タグはサイト名?記事タイトル?

h1タグは大見出しを表すタグで、1ページ内に1つが原則だ。通常は、記事タイトルに使われる。

しかし、上記図のようにヘッダーにサイト名を入れて、どのページでも同じヘッダーを表示させる場合、サイト名をh1と考える人もいる。

サイト名についてのタグの振り方は、以下3通りが考えられる。

  1. どのページでもサイト名をh1、記事タイトルはh2
  2. トップページのみサイト名をh1、それ以外のページでは記事タイトルをh1
  3. 全てのページでサイト名をh1、かつ記事タイトルもh1

これらをSEO的に考えると、どれも間違いとはいえない。

例えば、1においては、全てのページで同じh1がある場合、Googleの検索エンジンはとても利口なため、h2を各ページのタイトルと読むようになる。

また、上記にて原則h1は1ページ内にひとつと書いたが、3番目のh1の重複を理解し、次に来るh1が記事タイトルと理解するためだ。

とはいえ、やはり原則1つのh1が重複するのは、コーディング上好ましいとはいえない。そこで、一般的に取られるh1の振り方として、2番目の

「トップページのみサイト名をh1、それ以外のページでは記事タイトルをh1」

が良いと思われる。スタイルシートの書き方が厄介となるが・・・。

あるいは、企業のウェブサイトの場合、サイト名を会社ロゴの画像をdivタグやfigureタグで囲って、全て記事タイトルをh1にする方法もある。

こうなると、Webデザイン能力も問われるということか・・・。

この記事のまとめ

HTML5は、HTML4.01より簡素化されたコーディングと言われているが、セクショニング要素など、反対に入れるべき要素が増えた。

もちろん、全ては検索エンジンに正確に読み取ってもらうためなので、省略せずに入れておくことが大事。

まだ、セクショニング要素を厳密に入れているサイトは少ないようだが、ここできっちりとセクショニングしておくことで、他のサイトとの差別化を図ることができる。

人にも機会にも優しいコーディングを心がけよう。

コメント