こんにちは、けんです。
ブログを書く時に、<br>を多用していませんか？
今回は、<br>で箇条書きリストを作成してはいけない理由と正しいリスト表示について書きました。
<br>の連続使用でリストを作ってはいけない
<br>はHTMLの改行の役割をするタグです。breakの意味ですね。
たとえば、Wordpressのビジュアルエディターでは、[Shift]＋[Enter]で改行することができます。
それは<br>タグを入力しているということです。Wordpressでは[Shift]＋[Enter]を入力することで<br>を自動生成しているんですね。
リストを表示させる時に[Shift]＋[Enter]で改行してリストを作っていませんか？これはNGです。
パンの材料
・小麦粉
・卵
・牛乳
上記は[Shift]＋[Enter]で改行してリストを作成しました。黒点は中点を使っています。
これをブラウザのデベロッパーツールで見ると以下のような表示になっています。
<p>
・小麦粉<br>
・卵<br>
・牛乳
</p><br>は使っちゃいけないということはありませんが、上記のようなリストを表示させる時はリスト要素であるul要素かol要素を使った方がいいです。
ul要素を使った正しいリスト表示
- 小麦粉
- 卵
- 牛乳
<ul>
<li>小麦粉</li>
<li>卵</li>
<li>牛乳</li>
</ul>これはul要素を使用してリスト表示させています。自動的に中点(黒ポチ)がつきます。
なぜul要素やol要素を使用した方がいい？
では、見た目が同じなのに、なぜリスト要素を使用した方がいいのでしょうか。それは多少なりともSEO対策になるからです。
正しいマークアップをするため
ul要素やol要素はリスト、箇条書きを表示させるためのタグです。
ulやolを使用した箇条書きリストであれば、検索エンジンが「これは箇条書きリストね」と認識してくれます。
つまりSEOに適した正しいマークアップです。
一方、自分で「・(中点)」を自分で入力し、<br>タグによる改行で表示させた箇条書きリストはどうでしょう？
検索エンジンはそれを箇条書きリストと認識してはくれません。人からは同じ箇条書きリストに見えても、クローラーにとっては特別視されないテキストです。
なので、検索エンジンに「これは箇条書きリストだからね！」と伝えるためにもul要素やol要素を使った方がいいのです。
検索エンジンは箇条書きリストを好む
ちなみに検索エンジンは箇条書きリストを好むといわれています。
箇条書きはページの要点をわかりやすくまとめる時に使用しますよね。
検索エンジンも同様、箇条書きリストはページの要点をわかりやすくまとめていると考えているので、重要視しています。
なので、箇条書きリストにそのページの重要キーワードを盛り込むことは、SEO対策に有効だと考えられています。
ul要素やol要素を使用せずに、重要キーワードを盛り込んだ箇条書きリストもどきを表示させても、その効果は得られないわけです。
まとめ
こういったSEO内部対策は、最近では重要性が薄まってきているのでもちろんこれを守っていれば検索上位に上がるほど甘くはありません。
良質なコンテンツを生み出し、サイト訪問者に有益な情報を提供することが一番のSEO対策です。
とはいえ、当たり前のことだと思いますし、当たり前のことをしっかりこなしつつ、良質なコンテンツを生み出していくことが大事だと思います。
もちろんSEOに適したHTML文法は、Webデザイナーやコーダーにとって身につけておくべきスキルです。
難しいことではないので、箇条書きで要点をまとめたい時は、ulやolなどのリスト要素を使うように心がけましょう。
