リスト構造タグ(<ul>,<ol>)タグは箇条書きを行う時に使うタグです。

リストタグを用いて要点を箇条書きすることにより、訪問者が重要な点を理解しやすくなります。

さて、SEO的に見てメリットがあるのどうかというと、メリットはあると思われます。

検索エンジンもリスト構造でわかりやすく箇条書きされている文字列は重要なキーワードが含まれていると判断するでしょうし、そもそも、ユーザーにとって役立つ正しい構造を検索エンジンが嫌う訳はありません。

検索ランキングが一気に上る魔法のSEOではありませんが、正しい論理構造にしてサイトが正しい評価を受けるという作業はSEOの王道ともいえる作業ですので馬鹿にはできません。

今回の記事では、リスト構造タグの使い方と記述について解説いたします。

リスト構造タグ(<ul>,<ol>)タグ

箇条書きをする際にはリスト構造タグを使いましょう

要点を箇条書きで記述すれば、ユーザーは重要な点がすぐに頭に入ってきますし、検索エンジンも重要な点が理解しやすくなります。

では、良い箇条書きと、あまり良くない箇条書きを例に上げてみましょう。

 

良い箇条書き

  • 鹿目まどか
  • 暁美ほむら
  • 巴マミ
  • 美樹さやか
  • 佐倉杏子
  • 美国織莉子
  • 呉キリカ

悪い箇条書き

・鹿目まどか
・暁美ほむら
・巴マミ
・美樹さやか
・佐倉杏子
・美国織莉子
・呉キリカ

上記の箇条書きは人間が見る分には同じに見えます。

しかし、異なるのはそのソースです。

<h3>良い箇条書き</h3>
<ul>
<li>鹿目まどか</li>
<li>暁美ほむら</li>
<li>巴マミ</li>
<li>美樹さやか</li>
<li>佐倉杏子</li>
<li>美国織莉子</li>
<li>呉キリカ</li>
</ul>		 <h3>悪い箇条書き</h3>・鹿目まどか<br />
・暁美ほむら<br />
・巴マミ<br />
・美樹さやか<br />
・佐倉杏子<br />
・美国織莉子<br />
・呉キリカ<br />

良い箇条書きではリスト構造タグを使っていますが、悪い箇条書きでは・という文字と<br />で改行を行なっています。

ユーザーから見ればどちらも大差ないのですが、検索エンジンから見るとただの文字で論理的な構造には見えません。

せっかくユーザーにとって見やすい箇条書きを行うのですから、ついでにリスト構造タグを使い、検索エンジンにも丁寧にわかりやすく伝える方がベターです。

リスト構造タグの種類

<ul>番号なしリスト

Unordered Listの略です。

順不同の番号なしのリストを作成する時に使います。

例：明日の買い物リスト

  • おでん缶
  • ドクターペッパー
  • IBN-5100

特に順序を付けない場合は<ul>使用します。

<ol>番号付きリスト

Ordered Listの略で番号順のリストです。

番号順に整列したリストを作成する時に使います。

例：パソコンが調子悪い時の対処方法

  1. LANケーブルと電源を抜く
  2. 窓を開ける
  3. そのまま投げ捨てる

順序が決まっている場合、<ol>を利用します。

<li>リスト項目設定

List Itemの略です。

リストの項目を記述する時に使います。

リスト構造タグの記述方法

<ul>番号なしリストの記述方法

<ul>
<li>Google</li>
<li>Bing</li>
<li>百度</li>
</ul>
  • Google
  • Bing
  • 百度

<ol>番号付きリストの記述方法

<ol>
<li>電源を入れる</li>
<li>メールを確認する</li>
<li>電源を切る</li>
</ol>
  1. 電源を入れる
  2. メールを確認する
  3. 電源を切る

入れ子リスト

<ul>
<li>フィギュア購入ランキング
<ol>
<li>ねんどろいど</li>
<li>figma</li>
<li>1/8スケール</li>
</ol>
</li>
<li>ゲーム購入ランキング
<ol>
<li>暴れん坊天狗</li>
<li>田代まさしのプリンセスがいっぱい</li>
<li>ボディコンクエスト</li>
</ol>
</li>
</ul>
  • フィギュア購入ランキング
    1. ねんどろいど
    2. figma
    3. 1/8スケール
  • ゲーム購入ランキング
    1. 暴れん坊天狗
    2. 田代まさしのプリンセスがいっぱい
    3. ボディコンクエスト

リストの途中に<ol>や<ul>をいれることにより、段落（入れ子）を設定することもできます。

追記：申し訳ありません。入れ子リストの記述内容が間違っていました。

[oEmbedTweet 278254163152994304]

Twitterで記述例を間違って掲載していることを指摘していただきました。

正しい記述
<ul>
<li>フィギュア購入ランキング
<ol>
<li>ねんどろいど</li>
<li>figma</li>
<li>1/8スケール</li>
</ol>
</li>
<li>ゲーム購入ランキング
<ol>
<li>暴れん坊天狗</li>
<li>田代まさしのプリンセスがいっぱい</li>
<li>ボディコンクエスト</li>
</ol>
</li>
</ul>		 誤った記述
<ul>
<li>フィギュア購入ランキング</li>
<ol>
<li>ねんどろいど</li>
<li>figma</li>
<li>1/8スケール</li>
</ol>
<li>ゲーム購入ランキング</li>
<ol>
<li>暴れん坊天狗</li>
<li>田代まさしのプリンセスがいっぱい</li>
<li>ボディコンクエスト</li>
</ol>
</ul>

誤った記述例では、 <ul>直下の<li>が閉じていた為、おかしな記述になっていました。

<ul>も<ol>も直下においていいのは<li>のみなので、入れ込みたい場合、<li>に入れ込む必要があります。

間違った情報を掲載してしまった事を深くお詫びします。

ユーザーに見やすく、検索エンジンにも理解しやすいリスト構造タグを是非使いこなしましょう。

関連記事

robots metaタグ(noindex,nofollow,noarchive)の使い方
METAタグ(keywords description)の使い方
titleタグの使い方 – わかりやすいページタイトルを設定しよう
rel=”nofollow” 属性の解説とその使い方
ウェブマスターツールの登録と導入方法
Google Analyticsを設置して詳しいアクセス解析を行おう
サテライトサイト（衛星サイト）のSEO効果と有効活用事例
サテライトサイトを作る場合、独自ドメイン.サブディレクトリ.サブドメインのどれがベストか
ブログで1日に公開する記事数は何ページくらいが自然なのか
作ってすぐのサイトが大量の被リンクを受けても問題ないのか