ブログやサイトを運営している皆さん、htmlで箇条書きをする時に面倒くさがって「・(点)」で代用していませんか？
htmlでは、文法的に箇条書きを把握できるタグ「リストタグ」が存在します。
それぞれ”ulタグ”,”liタグ”,”olタグ”の３種類が存在しますが、「・(点)」は使ってはいないとしても前述の３つのリストタグをしっかり使いこなしていないと検索エンジンからは箇条書きであると認識されません。
※いわばテーブルタグの見出しと項目を逆にしているのと同じ状態
今回は、クラシックSEOと言って良いかも微妙なぐらい当たり前ですが、SEO要件の見直しも兼ねて備忘録としてまとめます。
セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント
htmlで箇条書きしたいなら「・(点)」はNG！リストタグを使いましょう。
まずは実例を出します。
きちんとしたリスト構造になっている例(３種類のリストタグ(ul,li,ol)をきちんと使えている)
- SEO対策
- アドテク
- ウェブマーケティング
上記例ではolタグは使っていませんが、ulタグの中にliタグを入れ込む形になっておりhtmlの文法上問題はありません。
悪いリスト構造(？)は「・(点)」で済ませているもの。検索エンジンは「・」を箇条書きの要素と判断してくれない！
・SEO対策
・アドテク
・ウェブマーケティング
上記例は全て「・(点)」で記述しています。・
この場合、検索エンジンはそれぞれを”箇条書きの要素”ではなく”段落”として判断します。・(pタグ(段落タグ)が記述されているので。)
ちなみに上記悪い例の場合、pタグではなくbrタグで改行するケースもありますね。(上記３つの要素を一緒のものとして検索エンジンに捉えてもらいたい場合)
WordPressで改行するならbrタグはダメ！htmlの文法的に正しいのはpタグでの段落分け
重要なのはユーザーから見たら変わりなくても、検索エンジンは箇条書きをリストタグでしか判別できないという点です。
htmlの３つのリストタグ(ul,li,li)の使い方について
liタグ=箇条書きの項目であることを示す
List Itemを縮めてliタグと呼んでいます。
続くulタグはUnordered List、olタグはOrdered Listの略になっており、htmlタグは何かの省略が多くて初学者でも分かり易いです。
SEO対策に大切な見出しタグ(hタグ)の使い方。理解のコツはhtmlの構造理解から！
liタグは箇条書きにしたい要素をそれぞれ囲みましょう。
ulタグ=番号無しのリスト作成に用いる
上の例から持ってきます。
<ul> <li>SEO対策</li> <li>アドテク</li> <li>ウェブマーケティング</li> </ul>
これを表示すると以下になります。
- SEO対策
- アドテク
- ウェブマーケティング
順不同のリストを作成する際に用いられるタグで、おそらくほとんどの人がイメージしている箇条書きはliタグ内部にulタグを書くだけで完了です。
olタグ=番号付きリストの作成に用いる
<ol> <li>SEO対策</li> <li>アドテク</li> <li>ウェブマーケティング</li> </ol>
これを表示すると以下になります。
- SEO対策
- アドテク
- ウェブマーケティング
liタグをolタグで囲むだけです。簡単ですね。
ulタグとolタグの入れ子構造も可能
以下ソースコードを例に挙げます。
<ul> <li>SEO対策 <ol> <li>コンテンツマーケティング</li> <li>ページ表示速度</li> <li>パンくず</li> </ol> </li> <li>アドテク <ol> <li>Google</li> <li>Facebook</li> <li>Twitter</li> </ol> </li> <li>ウェブマーケティング <ol> <li>リスクル</li> <li>Ferret</li> <li>アドタイ</li> </ol> </li> </ul>
……….
CSSを弄っていないため、間延びしまくっていたので自主規制。
皆さんも正しい箇条書き用のhtmlタグ(リストタグ)を使いましょう！
(普段箇条書きなんてしないのであれですが、今度CSS弄って見た目整えておきます…)
