BR(改行)タグを使うのはSEO的によくない？正しい改行方法は？

2019年8月21日2020年1月18日HTML・CSS

私はPタグやbrタグが変なところに入ってしまうので自動挿入されないようにした訳ですが、「Pタグやbrタグを使うのはSEO上よくない」ということを聞いたので調べてみました。

結果からいうとPタグやbrタグを使うこと自体がSEO上よくないというわけではありません。
ですが「br」タグに関しては正しい使い方をしないとSEOに影響するそうです。

ということで今回は「改行」について書いてみたいと思います。

BR(改行)は使わないほうがいい？

前述でも書きましたが、brタグを使ってはダメ！ということではありません。
それでも「brタグは使わない！」という人もいます。

brタグを使わない主な理由は以下の通りです。

• ソースが見づらい
• コンテンツの区切り(セクション)がわかりづらい
• 端末によって見え方が違う

間違った改行は評価が下がる？

brタグを間違った使い方をすると評価が下がってしまいます。では間違った使い方とはどんなものなのでしょう。

連続改行

こんな風に連続してbrタグを使うのはNGです。
そもそもbrタグを文章と文章の間のスペースを開けるために使ってはダメ！

HTMLで書かれたものでも『文書』です。brタグで文書と文章の間にスペースを入れるのはHTMLの文法から外れることになり評価が下がってしまいます。

brタグの代わりに使われる<p>&nbsp;</p>

brタグの代わりに改行の方法として使われる <p>&nbsp;</p> ですが、これもHTMLの文法としてはよくありません。

Pタグは文章の段落(パラグラフ)であることを表すものです。<p>～</p>の間に入るのは文章となります。
ですが<p>&nbsp;</p>はPタグの中に&nbsp;(スペース)が入っているだけです。
スペースは「文章」と認められず、連続改行ほどではないものの評価が下がってしまいます。

>BRタグの使い方

BRタグの使い方は以下の通りです。

BRタグは、Pタグの中で文章を改行させるのが正しい使い方です。
ただし、Pタグの中とはいえスペースを開けるためにBRタグを使うのはやめましょう！

スペースの調整はCSSで！

段落と段落の間のスペースはCSSを使って調整しましょう。

.text-space {
      margin-bottom:30px;
}

上記の表示サンプルは以下のようになります。

段落などのスペースはmarginを利用してスペースの調整してください。

クラス指定適用されないとき

テーマによってだとは思いますが、テーマの初期設定で指定されていてクラス指定しても適用されないことがあります。
その場合はCSSを以下のように記述してみてください。

.text-space {
      margin-bottom:30px !important;
}

値の後ろに「!important」を入れるとこのスタイルが優先されます。

最後に

私も連続改行や<p>&nbsp;</p>をやっていました(^^;
ですが、連続brも<p>&nbsp;</p>も評価が下がってしまうとのこと。

なので連続brと<p>&nbsp;</p>を使わないようにしましょう！