ウォークマンのスポーツタイプが欲しい!四条せつなです。
ブログ更新やWeb制作で、必ず使うのが「改行」ですよね?brタグや、pタグを使用して、上手く文章の体裁を整えたりすると思います。…ですが!あなたの使っている改行方法が間違っているかもですよ?もし、間違った改行をしていると、SEO的に不利になったりします。

だから、正しい「改行」方法を教えるよっ!!!
この記事では、間違った改行方法を2つ紹介します。そして、最後に正しい改行の方法を紹介しますので、良かったら最後まで見ていってくださいね!
正しい改行をしないとSEO的に不利なる?

Web制作の初心者や、HTML・CSSについて詳しく知らないブロガーさんが陥りやすいのが、「改行」の誤った使用方法だと思います。

HTMLで書かれたものも、ある種「文章」なんですよ。だから、正しい文法に則って、改行をしていかなければならないっていうことになるんです。

だから文法がおかしいサイトに関しては、Googleの評価が下がるんだね!
正しいHTMLの文法について書き出すと、1記事で収まらないんです。だから、今回はタイトルの通り、「改行」について書いていくことにします。「改行」でよく誤って使われる”2つの方法”をこれから紹介していきますね!
間違い1:brタグを”連続”で使ってはいけない

1つ目は、brタグの連続使用です。

<br>
<br>
<br>
な感じだね!
よく、文字の間隔を空けたり、言葉に余韻を持たせたいときに使用されている気がします。だけど、これはHTMLの文法的に誤った使い方です!
連続brを日本語的にすると…?

無理やりではあるけど、この“連続br”での改行を視覚的に理解しやすいように、「原稿用紙」で同じ文法を書いてみました。

めっちゃ違和感!!
連続改行を実際に原稿用紙に書いた風にすると、凄く違和感があることに気づくと思います。こんな日本語を書く人はいないハズ!

連続brは使わないこと!
つまり、連続でbrタグを使用するのは、おかしいことが分かりますよね。正しい文法を書いてあげないと、Googleは評価を下げるので、この連続brは使わないようにしましょう。

だって、地球上に男は何人いると思っているの?<br>
…35億<br>
こういう改行は、連続brにならないよ!
間違い2:空のpタグ(<p> </p>)を使ってはいけない

2つ目は、空のpタグ(<p> </p>)の使用です。

<p>ほげほげ</p>
<p> </p>
<p>ふがふが</p>
な感じだね!
連続brがダメって、理解している人が陥りやすいパターンです。確かに連続改行はしていないけど、これもHTMLの文法的に誤った使い方です!

空pタグを日本語的にすると…?

またまた、この“空のpタグ(<p> </p>)”での改行を視覚的に理解しやすいように、「原稿用紙」で同じ文法を書いてみました。

この改行方法の問題は、pタグの意味を無視してることです。pタグは「パラグラフ」という意味なので、単に改行する意味で使用するものではありません。ですので、中には文章が入っていることが、当たり前なんですね。そう考えると、文字の入っていない(「 」は入っているけど)パラグラフは、日本語的におかしいということが分かってくれると思います。

空pタグは使わないこと!
つまり、空のpタグ(<p> </p>)を使用するのは、おかしいことが分かりますよね。コレに関してのSEO的な影響は、もしかすると連続brよりはマシかもしれません。だけど、使用を避けたほうが”無難”ですよ!

<p> </p>
も
<p></p>
もダメだからね!
<p> </p>よりも、<p></p>はもっとダメですよ!注意!
正しい改行の例
正しい改行の方法を、下に例文に書いてみたので参考にしてみてくださいね!
基本はpタグとbrタグで対応する
基本は、<p>〜</p>タグの中に、<br>タグを用いて「改行」をしていくのがセオリーになります。

どうしてもな場合はCSSで対応する
どうしても、何行も改行をしたい場合もあると思います。そういうときは、CSSで対応するようにしましょう。marginで改行(っぽく)見せることができますよ!

せつなのまとめ
連続改行をしたくなる場合はあります。だけど、brのタグの連続使用や、空のpタグは使ってはいけないってことですね。HTMLで考えると難しいかもですが、日本語の文法で考えると、分かりやすいかもしれません。SEOの観点からも、正しい文法で改行をするようにしたいですね。

つまりは…
- 連続brタグはNG!
- 空pタグもNG!
- 正しい文法で書かないとSEO的に不利!
- どうしてなときは、marginで対応。
って、ことだねっ!
ということで、“【HTML】SEO的にNG?やってはいけない「改行」を”2つ”紹介するよ!”でした!でわでわっ!
[…] ▼参考サイト 【HTML】SEO的にNG?やってはいけない「改行」を”2つ”紹介するよ! […]