HTMLコーディングとインデクサビリティとSEO

HTML言語でマークアップ記述することをHTMLコーディングと言います。WebブラウザはHTML言語で記述されたものを表示します。見た目のデザイン・レイアウトはCSSが担うことが主流です。Web黎明期ではTABLEタグを用いたレイアウトが一般的でしたが、以下4点の理由から使われなくなりました。

1. TABLEレイアウトでは不要なタグが多くなり読解が困難になりやすい
2. TABLEタグの入れ子が多くなり管理が煩雑となる
3. TABLEタグ内で要素の移動は困難な場合が多い
4. HTMLタグの使用が平易となるため文書の内容を検索エンジンのロボットが理解しづらい

TABLEタグはTDタグに内容を記述しますが、その上位に必ずTABLE・TRタグが入ります。

<table><tr><td>テキストなんちゃら</td></tr></table>

これがPタグに置き換えるとこのようにソースコードがスッキリします。

<p>テキストなんちゃら</p>

どちらが読解しやすいかは一目瞭然ですね。また、TABLEタグ内のテキストは見出しなのか、単なる文章なのか、用語の定義とその説明文なのか、といった文章の意味付けが判別できません。

<table>
<tr>
<td>見出し</td>
</tr>
<tr>
<td>文章</td>
</tr>
<tr>
<td>用語の定義</td>
</tr>
<tr>
<td>説明文</td>
</tr>
</table>

これがCSSでレイアウトをすることでこのようにスリムなHTMLソースとなります。

<h1>見出し</h1>
<p>文章</p>
<dl>
<dt>用語の定義</dt>
<dd>説明文</dd>
</dl>

上記の場合、後者の方が検索エンジンのロボットがHTML文書の内容を理解しやすくなります。インデクサビリティが高まりSEOにも影響します。

ディレクトリ構造を階層化すべき理由

HTML文書は階層をディレクトリ構造で構築すべきです。間違ってもルート階層にHTMLファイルを並列に構築してはいきません。

このように内容をカテゴリ別に細分化してグルーピングをします。

ルート階層に並列にすると以下の点がデメリットとなります。

1. 管理しづらい
2. FTPソフトでアクセス時に読み込みに時間がかかる
3. 検索エンジンのロボットがコンテンツを理解しづらい

とりわけ3番目の点はインデクサビリティへの影響です。クローラビリティは検索エンジンのクローラーがクロールしやすくするための導線作りですが、インデクサビリティはHTML文書を解析しやすくするためのものです。サイト構造やコンテンツ配置はクローラビリティを考慮し、コーディングはインデクサビリティを考慮することでSEOに強いサイト作りができます。

システム連携のポイントはHTML要素の繰り返し

HTMLコーディングにおいてシステム連携の観点は目を背けてはいけません。Wordpressも含めるとシステム連携しないサイトの方が珍しいです。システム連携をする場合、コンテンツ内容が別途出力されます。なのでコーディングではテンプレート作成をすることになります。この場合考えることは「要素の繰り返し」です。HTMLタグの塊が繰り返すことを前提としたHTML文書にコーディングする必要があります。

<div class=“midashi">見出し</div>
<div class=“danraku">文章</div>

上記のようにコーディングして繰り返されるケースを見ますが、特定の範囲内でループさせた方が喜ばれます。

<div class=“roop">
<dl>
<dt>見出し</dt>
<dd>文章</dd>
</dl>
</div>

HTML文書の構造化によるSEOへのプラス

CSSレイアウトによるHTMLコーディングは一般的ではありますが、HTML文書の構造は適切でないだろうケースをよく見かけます。見出しタグの重要性が高いからHxタグを多く使う、DIVタグばかりで要素の意味付けがなされていない、などは本当に多いです。出版物のエディトリアルデザインに考え方が近いはずなのですが、節のタイトルを連発（過剰な見出しタグの設置）しているのを見るとページの内容を考えていないことがよくわかります。

なぜここで見出しタグを使うのか、段落・リスト・表組と使い分けられるのではないか、などページの内容に即してHTMLマークアップをするとクローラビリティ・インデクサビリティが高まります。適切なHTML文書の構造化によるSEOへの寄与は大きいという実感があります。