こんにちは、YUMAです。
段落間を空ける際に、連続で改行して空白行を作っていませんか？実はこれ、SEO的に不利になってしまうんです。
SEOが悪くなると、検索順位が下がってしまい、サイトへのアクセスが減ってしまいます。
今回は、その対処法についてご紹介します。
この記事はこんな方に向けて書いています。
- 行間を空けるときに、空白行を使っている
- SEOに不利にならずに段落間を空ける方法を知りたい
はてなブログで編集中の記事のHTMLを見る方法
記事の編集画面で、画面上部の「HTML編集」を選択してください。
<>で囲まれたタグがたくさん書いてあるこの文章が、HTMLです。
空白行とは
空白行は主に以下の2種類があります。
- 空のpタグを使う
- 連続でbrタグを使う
ひとつずつ解説します。
pタグとは
pタグは、HTMLにおいて段落を表すタグです。
空のpタグとは、こんな感じでタグの中に何も入っていない状態になります↓
<p></p>
空のpタグというのは、何も書いていない段落ということです。そんな段落が存在する文章って、普通に考えておかしいですよね。
はてなブログでは空のpタグが生まれやすい
はてなブログでは、見たままモードでEnterキーを押すと新しいpタグを生成（新しい段落を生成）します。なので、段落間を空けようとして何回もEnterキーを押すと、空のpタグを大量発生させてしまうのです。
brタグとは
brタグは、HTMLにおいて改行を表すタグです。brタグを使うと、その後ろに書いた文は次の行に書かれます。
下記は連続でbrタグを使っている悪い例です。
<p>こんにちは</p>
<br>
<br>
<br>
<p>今日はいい天気ですね</p>
これもSEO的に不利になるのでやめましょう。
はてなブログでbrタグを使う方法
はてなブログの見たままモードでbrタグを使う場合は、Shiftキーを押しながらEnterキーを押します。使う際は、段落の中で使うようにしましょう。
行間を空けるときは、CSSで調整しよう
CSSは、HTMLの見た目を整えるために使うものです。これのおかげで、自由なデザインを実現できるんです。
このCSSを使って段落間の距離を調整すると、SEOにも不利にならずに行間を空けることができます。
CSSで行間を広げる方法
僕は、以下のコードをCSSに追加しています。
2行目のline-height〜は、同じ段落内の行間を調整するものなので、無視してもかまいません。
段落間の距離を調整してるのは3行目です。
margin-bottomというのは、下のスペースのことを表しています。3emというのは、3文字分という意味です。
つまり、このCSSは、記事内(entry-content)のpタグの下のスペースを3文字分空けてねっていう意味です。
これをはてなブログのデザインCSSにコピペすれば、僕のブログと同じように空白行を使うことなく段落間を空けることができます。
スマホに適用させたいときは、以下のコードをデザインの記事上とかにコピペしてください。
読みやすく、SEOにも良いブログを作ろう
段落の間に適度なスペースがあると、非常に読みやすいブログになります。
今まで空白行でそれを行っていた方は、その読みやすさを考えて行っていたと思います。
その親切さでSEOに弱くなっていたのでは悲しすぎます。是非、今回紹介した方法で正しく段落間の距離を調節しましょう！
