SEOに適したHTMLの組み方の基本

日付:
2012/7/24
カテゴリ:
SEO
ライター:
畑岡大作

「SEOに適したHTML」と言うとなにやら大仰に聞こえますが、実のところそれほどややこしいものではありません。
なぜなら基本的なHTMLのマークアップ理念に従えば、概ねSEOにも適したHTMLになるからです。

今回は、SEOを考慮したHTMLを組む際の基本的なマークアップ指針についてまとめてみました。
実際にHTMLをマークアップするマークアップエンジニアの方や制作の現場を取りまとめるディレクターの方など、参考にしてみてください。

  1. SEOに適したHTMLとは?
  2. (X)HTML+CSSで組む
  3. SEOを意識したちょっとしたコツ

1.SEOに適したHTMLとは?

基本的には、(X)HTML+CSSのマークアップ理念に従っておけば大きな差異はありません。
そしてその上で、いくつかある「SEO的に有利な(またはSEO的に不利な点をなくした)」ポイントを押さえる、という形になります。

  • (X)HTML+CSSのマークアップ理念に従う
  • SEOを考慮したポイントを押さえる

(X)HTML+CSSのマークアップ理念というのはつまり、「それぞれのHTMLタグが持つ本来の意味でマークアップする」ことです。
例えば、レイアウト目的でtableタグを使用する、というのはNGで、そういった「レイアウト目的で」使用するタグを選ぶのではなく、本来の「タグの意味で」使用するタグを選ぶことで、そのWebページが持つ本来の意味(文書構造)を検索エンジンへ伝えやすくなるのです。
また同時に、装飾目的で不要な(不適切な)タグがHTMLから削除されるため、結果的にHTMLのファイルサイズへ軽量化をもたらします。これもまたSEOに適している理由になります。

もちろん、SEOを考慮するのであれば外せないポイントもあります。
これは前述の(X)HTML+CSSのマークアップ理念から逸脱するものではなく、プラスアルファとして付与する形になります。

2.(X)HTML+CSSで組む

HTMLのタグはそもそも、ページのレイアウトや装飾のために用意されたものではなく、本来は文書構造を明確にするためのものです。
タグ本来の役割を果たすため、HTMLは文書構造通りにマークアップを行い、レイアウトや装飾はすべてHTMLから切り離してCSSとしてまとめるのが(X)HTML+CSSで組む、ということです。

  • レイアウトや装飾目的でHTMLタグを使用しない
  • タグ本来の役割でマークアップを行う
  • レイアウトや装飾についての記述はHTMLではなくCSSに切り分ける
    (JavaScriptも文書の一部ではなくUIの補助が目的のものなので、外部ファイル化してHTMLから切り離す)

例えば、下記のようなページがあったとします。

右カラムにカテゴリのメニューが、メインである左カラムにページのコンテンツがあるようなレイアウトの見本

よくある2カラム構成で、右カラムにカテゴリのメニューが、メインである左カラムにページのコンテンツがあるようなレイアウトですね。
上記のようなページをtableタグを用いてHTMLに起こそうとした場合、こうなってしまいます。

<table border="0" cellspacing="0" cellpadding="0" width="760">
	<tr>
		<td width="540" valign="top"><font size="7" color="#ff0000">ページ名</font><br>
		<br>
		ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。<br>
		<br>
		<table border="0" cellspacing="0" cellpadding="0" width="100%">
			<tr>
				<td bgcolor="#ffeecc"><font size="5" color="#660000">○○○ 商品一覧</font></td>
			</tr>
			<tr>
				<td>○○○の商品の一覧です。20件表示しています。</td>
			</tr>
			<tr>
				(以下略)
			</tr>
		</table></td>
		<td width="10"><img alt="" src="img/spacer.gif" width="10" height="1"></td>
		<td width="210" valign="top"><font size="4">カテゴリーから探す</font><br>
		<font size="2">○○の商品をカテゴリーから探すにはこちらからチェック</font><br>
		<br>
		・<a href="###">カテゴリーA</a><br>
		・<a href="###">カテゴリーB</a><br>
		・<a href="###">カテゴリーC</a><br>
		・<a href="###">カテゴリーD</a><br>
		・<a href="###">カテゴリーE</a><br>
		・<a href="###">カテゴリーF</a></td>
	</tr>
</table>

上記のようなシンプルなレイアウトだけで、こんな状態になってしまいます。
もっと画像や装飾などを入れるとさらに膨れ上がるでしょう。

ではこれを(X)HTML+CSSで組みなおすとどうなるでしょうか。
答えは下記を見てください。

<div id="Contents">
	<div id="Main">
		<h1>ページ名</h1>
		<p>ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。</p>

		<div id="ItemList">
			<h2>○○○ 商品一覧</h2>
			<p>○○○の商品の一覧です。20件表示しています。</p>

			(以下略)
		</div>
	</div>
	<div id="Sub">
		<div id="CategoryNav">
			<h2>カテゴリーから探す</h2>
			<p>○○の商品をカテゴリーから探すにはこちらからチェック</p>
			<ul>
				<li><a href="###">カテゴリーA</a></li>
				<li><a href="###">カテゴリーB</a></li>
				<li><a href="###">カテゴリーC</a></li>
				<li><a href="###">カテゴリーD</a></li>
				<li><a href="###">カテゴリーE</a></li>
				<li><a href="###">カテゴリーF</a></li>
			</ul>
		</div>
	</div>
</div>

いかがでしょうか。
tableタグで組んでいた時に比べて、だいぶ見やすくすっきりとしたかと思います。

  • 各要素の意味(役割)がわかりやすくなる
  • HTMLのファイルサイズが小さくなる
  • HTMLがシンプルに見やすくなる

これが(X)HTML+CSSのメリットです。

装飾目的のタグばかりを使用していても、文書の意味合いは「ただのテキスト」という位置づけから変わることはありません。例え見た目が見出しのようになっていても「ただのテキスト」であり、文中のそこらの「ただのテキスト」と重みが変わらないのです。これでは検索エンジンへ対して各要素がきちんと伝わりません。
検索エンジンへきちんと各要素を「このテキストは見出しである」「このテキストは文書である」などのように伝えるには、正しい役割でHTMLタグを使用する必要があります。

また、検索エンジンはファイルサイズが巨大で複雑なHTMLよりも、ファイルサイズの軽いシンプルなHTMLを好みます。
そしてきちんと(タグで)構造化されていて意味がわかるHTMLでなければ、検索エンジンへWebページの内容がきちんと伝わりません。

そういう意味で、(X)HTML+CSSでWebページを作成することは、SEOの観点で言えば非常に重要なのです。

3.SEOを意識したちょっとしたコツ

(X)HTML+CSSでページが組まれていれば、基本的にはそれでOKです。
ですが、それだけでは「検索エンジンへWebページの内容が伝わりやすい」という前提をクリアしているというだけであり、「Webページの内容をより魅力的に伝える」というSEOの観点で考えるといささかパワー不足ではあります。

では、SEOを考慮したポイントとはどのようなものがあるでしょうか。

  • h1タグはページ内で1か所のみ、ページ大見出しに使用する
  • 論理強調タグ(em/strongタグ)はページのキーワード以外には使用しない
  • メインカラムを先に記述する
  • 同一リンク先のリンクは極力1つのaタグにまとめる
  • ページ内で最初のリンクはテキストにする
  • 非表示要素はHTMLに記述しない

h1タグはページ内で1か所のみ、ページ大見出しに使用する

ページの大見出しに相当するh1タグでマークアップされた箇所は、検索エンジンに強く評価されます。
そのため、h1タグはページ大見出しの箇所に使用するとよいでしょう。

一般的に「ヘッダーのサイト名」にもh1タグが使用されることが多いですが、そのページのキーワードを多く含むのはサイト名ではなく、「○○の商品一覧」や「○○ 商品詳細」のようなページタイトルの方です。ですので、こういったページタイトルと同等の文をページ大見出しとして設置します。
また、h1タグを複数にするのも不味いです。h1タグは重要なタグではありますが、同じ重みであるのなら、複数を推すよりも1つだけを推した方が効果的になります。そしてhnタグの中で、ページ内で一番最初にh1タグを出現させます。

ですから、h1タグはページ内で1ヵ所のみ、ページ大見出しに使用します。

論理強調タグ(em/strongタグ)はページのキーワード以外には使用しない

論理強調タグもまた、検索エンジンには評価の対象となるタグです。
こちらもh1タグと同様、箇所に使えば使うほどの価値が分散していくので、極力、そのページのキーワード以外には使わない方がよいでしょう。

具体的には「ただ目立たせたい箇所」へ使用するのは、NGです。
例をあげると、商品のキャッチコピーや値下げ価格などに使うのは、いただけません。そういった「ただ目立たせたい箇所」はつまり装飾目的ですので、spanタグなどでマークアップし、別途CSSを適用させると良いでしょう。

では逆にどこに使うかと言うと、パンくずリストの現在地やカテゴリメニューの現在地など、「強調されても不自然ではない」「現在地名(=ページ名)」に使いましょう。
現在地名(ページ名)であれば、通常、そのページのキーワードを含む形でテキストが決められていますので、自然な範囲でキーワードを強調できるわけです。

メインカラムを先に記述する

通常、Webページの多くはページのコンテンツとメニューを横に並べた2カラム構成だったり、複数カラム構成であることがほとんどだと思います。

検索エンジンは基本的に、HTMLの先頭からクロール、評価していきます。
ですので、そのページのメインであるコンテンツが掲載されるメインカラムは、メニューを掲載しているサブカラムよりも先にHTMLに記述してあるとベターです。

同一リンク先のリンクは極力1つのaタグにまとめる

昔、Googleのウェブマスター向けガイドラインでは「ページのリンクの数を適切な数 (100 未満) に抑えます。」となっていました。
現在では検索エンジン側の改良に伴い、さすがにそういうこともなくなりましたが(先の記述は、現在では「1 ページのリンクを妥当な数に抑えます。」になっています)、それでもやはり大量のアウトリンクがある場合は全てのリンクがクロール・評価されない可能性と、あとリンクの供給を考えた際に1つ当たりの供給効果が下がってしまうというデメリットがあります。
極端な例ですが、例えばTOPページからのアウトリンクが100個の場合と200個の場合。下層ページが受けるリンク効果は1/100と1/200ですので前者のほうが高くなります。

ですので、なるべく不要なリンクは精査したり重複するものなどは削った方がよいでしょう。
具体的には150件程度に収めたいところです。

例えば「特集バナー+特集名テキストリンク」のようなブロックであれば、バナー画像とテキストリンクをわざわざ2つのaタグに分ける必要もなく、1つにまとめられると思います。
また、「商品画像+商品名テキストリンク」などもCSSの絶対配置を用いれば1つにまとめることもできるケースが多いです。

ページ内で最初のリンクはテキストにする

とあるページへのリンクがページ内に複数存在する場合(つまり同一リンク先へのリンクが複数ある場合)、私たちの実験では最初に出てきたリンクのみ検索エンジンに評価されることがわかりました。(※この先アルゴリズムが変わる可能性がありますのであくまでも現時点での参考としてください)
最近はalt属性を記述しているのであれば画像でもそれなりに評価されますが、重要なリンクはテキストにしておいたほうがいいので、ページ内に同一リンク先へのリンクが複数ある場合は、最初に出てくるリンクはテキストリンクにしておくほうが良いと考えます。

そのため、ページ内に同一リンク先へのリンクが複数ある場合は、最初に出てくるリンクはテキストリンクにすることが望ましくなります。

非表示要素はHTMLに記述しない

「ユーザーに見えないテキストで、検索エンジン向けのキーワードを大量にHTMLに記述する」や「画像とテキストの内容が一致しない画像置換(imgタグで表示する画像の代替テキストに対して画像に含まれない文言を含める、HTMLにはテキストとして記述しtext-indent:-9999pxなどで画面外へ排除したうえで背景画像を見せる、など)」といったSEOスパムの手口があります。
このスパムがあるため、検索エンジンは「ユーザーに見えないもの」に対して敏感です。

通常、ユーザービリティのためなど正規の理由があれば大丈夫なはずですが、Googleは非表示コンテンツはよくないと明言しています(Google公式ブログ:隠しテキストは Google のウェブマスター向けガイドライン違反です 参照)し、検索エンジンには事情はわかりませんので万が一「SEOスパムとして誤認」されると大問題となります。
であれば、あらかじめ可能性のある危険は避けておくにこしたことはないでしょう。

上記であげた非表示コンテンツについて具体例をあげると、「スライドショーの2枚目以降」や「初期状態では非表示の折り畳みメニュー」の要素などですね。
こういった非表示要素はいずれもJavaScriptで制御され、ユーザーに見えるようになる実装方法がほとんどです。ですがJavaScriptが動かない環境(ユーザーがOFFにしている、など)では、これらは「ユーザーに見えないもの」となってしまいます。検索エンジンをだまそうという悪意がなくても量が多かったり、明らかにキーワードに関係するようなコンテンツが入っている場合はスパムとなる可能性も0ではありません。

  • JS無効時には表示されるようにする
    (JS無効時にはベタ貼りのプアコンテンツとして提供し、JS動作時には表示/非表示の制御を行いリッチコンテンツとして見せる形)
  • 初期状態では非表示の要素をHTMLから削除する
    (後追いで、JSでDOMへ出力する)

などのような対処をするとよいでしょう。
ちなみに上記のうち、お勧めは前者です。(JavaScriptを用いてリッチコンテンツを見せるのであれば、互換のあるプアコンテンツを用意しておくべきです)

CSSを使ったテキストの画像置換については、よく用いられるのは「グローバルナビ」や「ローカルナビ」でしょうか。前述したGoogleのブログの例と同様、例えば画像では「商品一覧」「ランキング」などとしておき、テキストでは「keyword 商品一覧」「keyword ランキング」などとするようなケースです。
小手先のテクニックでテキスト置換せずに画像は画像のまま表示し、どうしても置換する場合には画像とテキストの内容は一致させておきましょう。
ちなみにGoogleはこの「テキストを画像置換する手法」については非推奨のようで、代わりに「Webフォントを使ってテキストをきれいに見せる手法」を推奨しています。

以上、SEOを意識したHTMLの組み方について、基本的な指針やいくつかのポイントなどをつらつらと取り上げてみました。
みなさまの参考になれば幸いです。