WordPressでブログやサイトを運営している皆さま、こんにちは。

何の気無しに文章を書く時に改行をしていますが、実際のソースコードを見たことはありますか?

昔から改行はbrタグを使えと教わってきましたが、実はhtmlの文法的に正しい使い方では無い(想定している使い方では正しい記述方法では無い)場合がほとんどです。

結論から言うと、段落分けに用いるpタグで改行するのがベストなんです。(自分で書いていて分かりにくい表現で恐縮ですが、要はbrタグ使わない方が良いってことです)

参考:htmlで下線を引くのにuタグはNG!spanタグかCSSで「text-decoration: underline;」で指定しよう

参考:htmlで取り消し線を書くstrikeタグは非推奨!delタグか「text-decoration: line-through;」と指定すべし

スポンサーリンク

brタグ文章が繋がったまま改行していることを検索エンジンに示すタグで、pタグ段落としてひと固まりであることを示すタグ

文章にすると自分でも意味が分かりませんね。例示します。

以下2つのコードは見た目は同じです。

上はpタグが2つ使われており、両者は段落として検索エンジンからは別々な内容と判別されます。

それに対して、下は1つのpタグのため検索エンジンからはひと固まりの内容であると認識されます。

brタグを使うケースは「文章の途中で改行したい」時だけで、基本的には文章単位をpタグで挟むのが正解

検索エンジンには基本的に1文ずつ別々の内容であることを伝えたいはず。

であれば、素直にpタグを使うのがベストです。

どうしてもbrタグを使わざるを得ない時として考えられるのが、文章途中での改行です。

この場合、文章途中で改行しているのにそれぞれをpタグでくくるとhtmlの文法上間違いになりますのでご注意ください。

pタグで改行する = CSSで段落間の幅を調整する

実際にpタグで改行したい場合、(正式には)行間をCSSにより指定することになります。

ちなみにWordPress含めブログを書いていると、2行改行したくなる時がよくあります。(pタグは段落分けしていることを検索エンジンには伝えますが、我々は他の文章との隙間が余分に空いていると段落分けされていると判断するため。)

上で書いたように、文章が切れているのですからbrタグを2つ重ねるのはNGです。

その時に以下のようにpタグにclassを指定し、cssで調整すれば万事解決です。

うん。万事解決なんだけど、段落分けの行間のためにclass分けるとか面倒過ぎて死ねるw

pタグ内でstyle指定しても良いんだけど、それでも空白開けるのにいちいちstyle指定とか記事書く気が失せます。

僕のような面倒くさがりは半角スペースをpタグで囲って改行扱いする←WordPressのビジュアルエディタはデフォルトでこうなる

具体的にはこうです。

あまりにも半角スペースで囲われたpタグが多いと、検索エンジンからは好ましくない評価を受ける可能性もありますが、そんなに改行する機会も無いのでこれで僕は進めています。

brタグ使いまくっている無料ブログとかがボロボロあるので、それよりは↑の書き方の方が断然良いです。

参考:htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える

TechAcademyでWordPressを学ぶ

スポンサーリンク
634b6565e889b3ddbcb8b5f35af5278c_s

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