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

↑僕です^^

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

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

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

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

参考:SEO的に正しいhtmlのimgタグ(画像表示)の使い方とは?altタグは正しく使おう

スポンサーリンク

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

まずは実例を出します。

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

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

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

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

・SEO対策

・アドテク

・ウェブマーケティング

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

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

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

参考:WordPressで改行するならbrタグはダメ!htmlの文法的に正しいのはpタグでの段落分け

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

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

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

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

続くulタグはUnordered List、olタグはOrdered Listの略になっており、htmlタグは何かの省略が多くて初学者でも分かり易いです。(参考:SEO対策に大切な見出しタグ(hタグ)の使い方。理解のコツはhtmlの構造理解から!)

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

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

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

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

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

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

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

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

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

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

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

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

……….

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

 

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

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

TechAcademyでWebマーケティングを学ぶ

スポンサーリンク
3a9822cda5ea097849711034f62c188f_s

この記事が役に立ったらいいね!をしよう