HTMLコーディングをはじめよう〜副業にも!|第6章 人にも機械にもやさしいサイト構造

html coding

ウェブサイトは、人にも機械(クローラー)にも読みやすいコーディングが良いとされる。読みやすければ、おのずとアクセスは増え、検索上位にも掲載される、内部SEO対策のひとつ。

仮に、あなたが副業としてクライアントからウェブ制作を受注したなら、読みやすいウェブサイトを納品することで、クライアント・制作者双方の「Win-Win」な関係が構築できる。

読みやすいhtmlコーディングは、立派な副業になる。

今回は、人にも機械にもやさしいサイト構造について解説しよう。

サイト構造の基本

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

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

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

Webページの構造

上から順に、

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

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

視覚的、つまり人がウェブページを読む場合は、この図のように表示されれば良い。極端な話、このように見せることは、divタグやcssでどうにでもできる。

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

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

ちなみにheaderタグは、「HTMLコーディングをはじめよう〜副業にも!|第2章 文字エンコーディングとHTMLの基本構造」で説明したheadタグとは違う意味なので、ご注意を。

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

セクショニング要素

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

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

<body>
 <h1></h1>
 
 <nav></nav>
 	
   <h2></h2>
   <p></p>
   <p></p>
   <h3></h3>
   <p></p>
   <p></p>
 		
   <h2></h2>
   <p></p>
   <p></p>
   <h3></h3>
   <p></p>
   <p></p>
</body>

しかし、クローラーがより文章を理解しやすくするため、HTML5よりセクショニング要素が導入された。

セクショニング要素とは、articleタグ、sectionタグ、asideタグ、そしてnavタグを指す。

<body>
 <h1></h1>
 
 <nav></nav>
 	
 <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>
</body>

navタグ

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

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

footer内によくあるprofile、sitemap、contactといったリンクについてはnavタグは使わず、footerタグ内の要素として取り扱う。

articleタグ

articleタグは、その範囲がセクションの中で独立しており、それだけで完結していることを示す要素。タグ内が記事としてまとまっていることを示す。

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

articleタグとsectionタグの関係は、常に

articleタグ>sectionタグ

でなければいけない。

sectionタグ

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

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

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

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

sectionタグは、文章の章・節など、意味を示すもの。CSSやJavaScriptでの操作のみを目的にする用途に使う時は、

やを使う。

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より簡素化されたコーディングと言われているが、セクショニング要素など、反対に入れるべき要素が増えた。

もちろん、全てはクローラーにより正確に読み取ってもらうためのものなので、省略せずに入れておくことが大事。

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

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

コメント