htmlで箇条書きしたい時にリストタグ(ul,li,ol)をきちんと使わないと検索エンジン(SEO)に評価されない

2017年10月8日ウェブマーケティングHTML, li, ol, SEO, ul, リスト, 検索エンジン, 箇条書き

スポンサーリンク

ブログやサイトを運営している皆さん、htmlで箇条書きをする時に面倒くさがって「・(点)」で代用していませんか?

htmlでは、文法的に箇条書きを把握できるタグ「リストタグ」が存在します。

それぞれ”ulタグ”,”liタグ”,”olタグ”の3種類が存在しますが、「・(点)」は使ってはいないとしても前述の3つのリストタグをしっかり使いこなしていないと検索エンジンからは箇条書きであると認識されません。

※いわばテーブルタグの見出しと項目を逆にしているのと同じ状態

今回は、クラシックSEOと言って良いかも微妙なぐらい当たり前ですが、SEO要件の見直しも兼ねて備忘録としてまとめます。

スポンサーリンク

htmlで箇条書きしたいなら「・(点)」はNGリストタグを使いましょう。

まずは実例を出します。

きちんとしたリスト構造になっている例(3種類のリストタグ(ul,li,ol)をきちんと使えている)

  • SEO対策
  • アドテク
  • ウェブマーケティング

上記例ではolタグは使っていませんが、ulタグの中にliタグを入れ込む形になっておりhtmlの文法上問題はありません。

悪いリスト構造(?)は「・(点)」で済ませているもの。検索エンジンは「・」を箇条書きの要素と判断してくれない

・SEO対策

・アドテク

・ウェブマーケティング

上記例は全て「・(点)」で記述しています。・

この場合、検索エンジンはそれぞれを”箇条書きの要素”ではなく”段落”として判断します。・(pタグ(段落タグ)が記述されているので。)

ちなみに上記悪い例の場合、pタグではなくbrタグで改行するケースもありますね。(上記3つの要素を一緒のものとして検索エンジンに捉えてもらいたい場合)

重要なのはユーザーから見たら変わりなくても、検索エンジンは箇条書きをリストタグでしか判別できないという点です。

htmlの3つのリストタグ(ul,li,li)の使い方について

liタグ=箇条書きの項目であることを示す

List Itemを縮めてliタグと呼んでいます。

続くulタグはUnordered List、olタグはOrdered Listの略になっており、htmlタグは何かの省略が多くて初学者でも分かり易いです。

liタグは箇条書きにしたい要素をそれぞれ囲みましょう。

ulタグ=番号無しのリスト作成に用いる

上の例から持ってきます。

これを表示すると以下になります。

  • SEO対策
  • アドテク
  • ウェブマーケティング

順不同のリストを作成する際に用いられるタグで、おそらくほとんどの人がイメージしている箇条書きはliタグ内部にulタグを書くだけで完了です。

olタグ=番号付きリストの作成に用いる

これを表示すると以下になります。

  1. SEO対策
  2. アドテク
  3. ウェブマーケティング

liタグをolタグで囲むだけです。簡単ですね。

ulタグとolタグの入れ子構造も可能

以下ソースコードを例に挙げます。

……….

CSSを弄っていないため、間延びしまくっていたので自主規制。

皆さんも正しい箇条書き用のhtmlタグ(リストタグ)を使いましょう!

(普段箇条書きなんてしないのであれですが、今度CSS弄って見た目整えておきます…)

スポンサーリンク