HTMLの構造化と厳格化

決定打にこそなりませんが、ＳＥＯにおいて唯一自己の技術だけで解決できる要素なので、やらなければ損です。

HTMLの厳格化（NGタグや属性の撤廃）

当ページの主意と矛盾するようですが、基本的に冗長なタグや属性、あるいは少々の構文ミスがあってもSEOには「ほとんど」影響しません。

しかし「ほとんど」という点が、SEOでは非常に問題になります。何故なら無頓着な人がつくったサイトのNG箇所はソースの大半を占めることもあり、こうなると目に見える違いが出てきます。

装飾のためのタグはCSSに代替

ここでいう装飾とは主に次のようなものを指します。

  • 文字のサイズ、太さ、色、下線、位置、行間
  • 表のサイズ、罫線、配置、背景色
  • ページの背景色
  • ページレイアウトのサイズ、色、空白幅、位置
NG例 意味 代替例
FONT 文字サイズ等の指定 font-size:100%;
color:#000;
B 文字を太くする STRONG
font-size:bold;
I 文字を斜体にする EM
font-style:italic
CENTER 中央寄せ text-align:center;
BR 改行 原則的に使用しない
HR 罫線 原則的に使用しない

STYLE属性もNG

NGな理由は実に単純で、ページ全体としてCSSファイルを読み込んでいるのであれば、そこに記述すれば事足ります。直接ソース内に書く理由が無いので存在自体が冗長というわけです。

文書としての構造化

構造化とはつまり、論理的な意味どおりのHTMLで構成することです。

構造化の完成度が高いほどHTMLのソース（記述状態）は単純明快化するため、検索エンジンは内容を把握しやすくなって結果的にSEOの効果が高まります。

単純明快なHTMLは人間の眼でも内容を把握しやすいので文字の差し替えなどもラクになる・・・という副産的な効果もあります。

難しく考えがちですが、手順をおって覚えていけば意外に簡単です。

「見出し」であるか否か？

見出しとは、以下に続く内容を簡潔に記したもの、すなわち題目のようなものです。見出しであれば、基本的にはHｎで括ります。（ｎには1～7の数値が入ります）

<h2>第二見出し</h2>

見出し番号の値は「階層」を意味します

第一見出しである「H1」の次位にH2が存在し、次に続く見出しがそれと等価であればH2、下位であればH3となります。また、それに続く見出しが等価であればH3、下位であればH4であり、上位であればH2となります。

「文章」であるか否か？

「それ」が文章であればPで括ります。

「文章」であるかどうかの着眼点は、主に句読点の有無です。

<P>文章です。文章であればPでくくります。</p>

「箇条書き」であるか否か？

主にはリスト形式の項目の羅列です。箇条書きであればLIで括ります。

後述しますが、LIは序列の意味によって全体をULもしくはOLで括ります。

<li>リスト1</li>

注意：横並びでも語句の羅列は箇条書きです

主にナビゲーションリンクや文中の「○○の例」で語句の羅列を用いますが、これも「文章」でなければ箇条書きなのでLIを使うべきです。

羅列を横並びにしたい場合はCSSで調整ができます。

LIの範囲はULもしくはOLで括る

  • 序列に意味が「無い」場合・・・UL
  • 序列に意味が「ある」場合・・・OL
<ul> <li>項目A</li> <li>項目B</li> </ul>

初期値は黒点が自動で入ります。

<ol> <li>1番目の項目</li> <li>2番目の項目</li> </ol>

初期値は数字が自動で入ります。

「文章」でも「見出し」でも「箇条書き」でもなければ・・・

意味を持たなければタグで括る必要は無いのですが、HTML構成上のルールとして「無意味（＝範囲）」という意味をもつDIVでくくっておきます。

<div><img src="***".jpg alt="画像"></div>

PR的な画像をPで括るのは正しいとは言えない？

PR的な画像をPで括っているホームページをよく見かけますが、基本的に画像は「文章」ではないのでPで括るのは誤りです。

<p><img src="***.jpg" alt="これは説明文を画像化したものです。"></p>

↑これはALT属性に文章を含んでいますが、ALT属性は「代替文字」なので「文章」ではありません。よって誤り。

<p><img src="***.jpg" alt="参考図">この図のようになります。</p>

↑一応「文章」の一部なので構造上は誤りではありませんが、画像が装飾であればCSS、付帯資料であれば別ブロックに分けるべきなので使い方としては不適切です。

「表」はTABLEを用いる

その内容が表であればTABLEを用います。

「レイアウトにTABLEを用いるのは誤り」という技術ルールについて、「TABLEを使うのはNG」という過剰認識をしないようにしましょう。