ulとolの違いと使い分け【HTMLリストタグ】
さきに結論。
ulは順番に特に意味がないリスト、olは並び順にも意味があるリストで使い分けるのが基本。
見た目はCSSでどうにでもなりますが、構造化マークアップ・クローラーにも理解させる観点では使い分ける必要があります。
SEOにも関わることなので、違いをきちんと理解して使い分けることをオススメします。
ulタグとolタグ、見た目上の違い
こちらがulタグとolタグの見た目上の違いです。HTML記述は下記。
<!-- 画像左側のulリスト -->
<ul>
<li><ulリスト></li>
<li><ulリスト></li>
<li><ulリスト></li>
<li><ulリスト></li>
</ul>
<!-- /画像左側のulリスト -->
<ol>!-- 画像右側のolリスト -->
<li><olリスト></li>
<li><olリスト></li>
<li><olリスト></li>
<li><olリスト></li>
</ol>
<!-- /画像右側のolリスト -->（※わかりやすいよう、グレー背景と配置の記述は省いています）
先述の通り、ulは特に順番自体は意味のないリスト、olは並び順にも意味のあるリストとの意味を持ちます。
なので、CSSでデザインしていないデフォルトの状態では画像のようにulタグは通常のリストで、olタグは数字付きのリストとして描画されます。
olタグは順番にも意味があるので数字つきってわけです。
見た目はCSSでいくらでも変えられる、けれど
ulもolも、CSSで好きなようにデザインし、いくらでも見た目変えられます。
どちらもリストの頭につく記号や数字はlist-style-typeで指定可能。
極端なはなし、ulでもol風に見せるstyle属性を記述するかclassを用意すれば、どちらもulタグで済ませることもできるのです。人間が目にする分にはこれでも問題ありません。
が、たとえばGoogleのrobotなど機械的なクローラーは見た目で「 順番に意味があるかなにか 」が判断できません。
AIや機械学習がもっと発達すれば見た目や文脈からでも判断できるようになるかもしれませんが、現状ではulとolを別のタグとして書き分けてあげる必要があります。
使い分けるとSEOに効く、かも？
ulとolをしっかり使い分けるとSEOに効く、かもしれません。
実際Googleなどの検索結果にリッチリザルトを表示させるための構造化マークアップ方式 schema.org では、サイト内のパンくずはulではなくolを使うよう推奨されています。
パンくずは順番が階層としての意味を持つので、ulよりolの方が適しているってわけです。
ほかにも、なにかしらの手順を紹介するのにリストタグを使う場合は順番に意味があると宣言するolの方が適しています。
ul / olタグの使い分け＝構造化マークアップではないので、現状で必ずしもSEOに効くとは断言できません。
が、Googleは日々アルゴリズムをアップデートさせています。
ul / olに限らず、現状では特にSEOが効かないものも将来的に効いてくる可能性は大いにあります。
W3C推奨・非推奨を守り、ユーザーはもちろんクローラーにも優しいサイト構造を意識したいですね。
少なくともヘビーメタルがガンに効くよりはさきにSEOに効いてくると思う。
余談ですが、HTMLの構造化マークアップはSEO効果のあるメリットがある一方で、全体的なソースが若干長くなるデメリットもあります。
（といってもわずかな差なので影響はほぼありません）
しかし、ulとolのタグ使い分けに限って考えればソースが長くなることもありません。
むしろ適切に使い分けることでCSSの容量を削減できることも。
ulとolの使い分けにはメリットしかないので、適切に使い分けましょう。
まとめ：リストタグ ulとolの違いと使い分け
- ulは順番に意味のないリスト、olは並び順にも意味があるリストの意味を持つ。
- デザインはCSSでどうにでもなるので、読者から見える見た目だけでいえばどちらでも違いはないといえる。
- が、Googleのクローラーなど機械側からみれば明確な違いがあるので、きちんと使い分けた方がいい。
私なぞは適当に書き散らかしてきたことでいまとても後悔しています、ハイ。
面倒だし自分のサイトぐらいいいだろう、と全部ulで通すことを決めたあの日の自分をぶん殴りたい。
みなさんは未来の自分に殴られることのないよう、クローラーにも理解しやすいようキレイなコーディングを心がけてください。
本記事は姉妹サイトJillToneBlogより移植したコンテンツです。