改行を意識していない人
SEOに効果的な正しい改行の方法って何かな?
こんなお悩みを解決します。
✔︎本記事の内容
- SEOに効果的な正しい改行の方法←” ”という魔物
- 滞在時間を1分UPさせる3つのコツ
本記事では、WordPressブログで正しく改行する方法を解説します。
あなたは、正しく改行を使えていますか?
Enterキーを押して改行した気になっていませんか?
本記事を読むと、SEO対策をしつつ
滞在時間をUPさせる読みやすい記事に仕上げることができますよ。
本記事では、クラシックエディタで解説します。ブロックエディタでも本質は変わりません。
SEOに効果的な正しい改行の方法←” ”という魔物
あなたはなんとなく、改行していませんか?
もしかしたら、SEO的に問題アリかもです。
もしあなたが、思考停止のまま「Enter」で改行していたら要注意。その行為に根拠はありますか?正しいソースコードを理解していますか?
結論:pタグとbrタグを適切に使う
pタグとbrタグを適切に使いましょう。
なぜなら、HTMLの文法的に正しいからです。
結果、ユーザーにもGoogleにも最適になります。
つまり、SEO対策です。
WordPressで「Enter」を押すと改行できますよね。実をいうと、これは正解でもあって、不正解でもあるんです。
- Enterを1回押す→改行:正しい
- Enterを2回押す→” ”を挟んで、改行:NG
- Shift + Enterを押す→段落内改行:正しい
実際に、テキストモードで確認します。
下記の画像をご覧ください。
Enterを押すのが本質ではないです。重要なのは、中身のソースコードと記事の読みやすさ。
Enterだけを押して、改行した場合
Enterを1回だけ押すと、改行されました。そして、Enterを2回押すと「 」という文字を挟んで改行されましたね。(後述します)
ソースコードも、見ておきましょう。
「検証」より確認できます。
<p>改行の方法を教えてあげるよ。</p>
<p>Enterを1回押して、改行しました。</p>
<p> </p>
<p>Enterを2回押して、改行しました。</p>
Enterを2回押して改行すると、やはり謎の「<p> </p>」という空のコードが挿入されていますね。
なお、Googleは「ソースコード」を認識します。よって、ここにSEO対策としての真価が問われます。
先に結論を言っておくと、空タグを使った改行はSEO的にNG。解決方法は、後で解説します。
Shift + Enterを押して、改行した場合
こちらは、上記と違い
なんだか行間が詰まって改行されていますね。
こちらも、ソースコードで確認します。
<p>改行の方法を教えてあげるよ。<br>Shift + Enterを押して、改行されました。</p>
こんどは、<br>タグが挿入されています。
やはり、ソースコードを見ると改行の違いが丸わかりですね。
改行するときは、SEOを意識すべし
正しいHTML文法で記事を書かないと、Googleからマイナス評価をくらいます。
Googleは、ソースコードを読み込むことで
記事の品質をチェックするからです。
あなたは、WordPressで「太字(B)」を思考停止で使っていませんか?
この質問に、理由とセットで答えられたらOK。
NOなら、本記事を最後まで読みましょう。
絶対にNGな、2つの改行
SEO的にNGな改行とは
余白のために改行することです。
- 余白のために、brタグを使う←連続で使う場合
- 余白のために、pタグを使う←要注意( )
たとえば、上記のとおり。
一見、改行して余白ができていますが、実はNG。
魔物が潜んでいます。
NG①:余白のために、brタグを使う
brタグは、文章中で改行するときに使います。
つまり、pタグの中で使います。(Shift + Enterを押した場合の改行方法)
これを、余白のために使ってはNG。
根拠は、下記のとおり。
<br>タグは、しばしば余白を開けるために使用されることもありますが、その場合は<br>タグではなくスタイルシートを使用して調整することをおすすめします。<br>タグでレイアウトを作っても、ユーザーの環境によって行間などが変わってしまう可能性があるからです。また、同じ理由で、文字サイズによって改行位置が変わってしまい、テキストが読みづらくなってしまうこともあるので注意が必要です。引用元:Chrono Drive | brタグとは
- NG理由①:brタグで余白を作る場合は、CSSで調節する
- NG理由②:ユーザーによって行間が異なるので、レイアウトが変わる
- NG理由③:文字サイズによって改行位置が変わるので、文章が読みにくくなる
上記のとおり。
余白のためにbrタグを使う→ユーザーによってレイアウトが違う→記事が読みにくい→結果、サイト離脱がUP
あくまでも、brタグは「文の途中」です。
brタグを連続で使い、余白を作るとSEO的にNG。
NG②:空のpタグを使う
ここが、一番のキモ。
「<p> </p>」という魔物です。
non-breaking-spaceの略で
改行されない空白を意味します。
- ビジュアルモード:一見、1行だけ改行されているように見える
- テキストモード:なんか、「 」という謎の文字が入っている
- ソースコード:実は、「<p> </p>」というコードが挿入されている
あなたの記事も「 」という魔物が大量に潜んでいるかもですよ。
✔︎ 理由を解説
何がダメなのか?
pタグの役割をガン無視しているんですよ。
「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>~</p>で囲まれたテキストは1つの段落であることを示します。引用元:Chrono Drive | pタグとは
pタグ=パラグラフであって、文章が入力された段落である必要があります。
しかし「<p> </p>」には、、、
文章は入力されていないけど、余白として使われ、かつ段落を構成しているという矛盾があります。
解答用紙に、マジックライトペンで書くのと同じ。←ブラックライトを当てると文字が光るペン
つまり、上記は余計なソースコード。
下記で、SEOに効果的な解決方法を解説します。
とはいえ、改行しても見にくい
ブログを書いてて気に入らないのは
改行したときの「スキマ」なんですよね。
そんなときは、CSSで行間を調節しましょう。
決して、pタグやbrタグで調節してはいけません。
SEO的にアウトです。
解決方法←CSSで行間を調節する
記事内のpタグなどに
マージンを指定して余白をとりましょう。
たとえば、こんな感じ。
entry-content p {
margin-bottom: 60px; // 下に60pxの余白
line-height: 2; //行間の高さ
}
上記は、僕のサイトの場合ですが
あなたのサイトに合わせて最適化しましょう。
何度もいいますが
余白をつける場合は、CSSで調節します。
の解決方法←プラグインでOK
CSSで行間の余白をつけることは理解したんですが、過去記事の文章に「<p> </p>」が入っている場合はどうすればいいの?
そんなときは、プラグインを使うと便利。
過去記事も含めて、一撃で解決できます。
使い方を解説
小文字で「<p> </p>」と入力し「Update Settings」をクリック。すると、すべての記事内から指定したコードが削除されます。
これで、無駄なコードがなくなったので
SEO対策できましたね。
おわり。
滞在時間を1分UPさせる3つのコツ
改行をうまく使いこなすと
サイト離脱を減らすことができますよ。
- コツ①:一文を短くする
- コツ②:適度に改行する
- コツ③:見出し内の段落は5パラ
読書感想文などでは
「改行はいけません」と先生から教わります。
しかし、ブログの世界では「ガン無視」でOK。
コツ①:一文を短くする
一文を、短くしましょう。
なぜなら、一文が長いと読みにくいからです。
一文は、30文字くらいでOK。
黒のカタマリだと、威圧感が出ます。
「コッチ来んな」みたいな感じですね。
一文はできるだけ、短くしましょう。
そして、改行して読みやすくしましょう。
コツ②:適度に改行する
適度に改行しましょう。
なぜなら、文のカタマリは見にくいからです。
適度とは、1文〜3文くらいでOK。
本記事でも、1文~3文くらいで改行しています。
分量の多さが、記事の本質ではないです。
たとえ、少ない言葉でも
正確に相手に伝えることができます。
コツ③:見出し内の段落は、5パラ
見出し内の段落は、5パラくらいが理想です。
なぜなら、段落が多いと見出しの内容が分かりにくくなるからです。
とはいえ、一文を短くし適度に改行しても、逆に段落が多いと内容が分かりずらくなってしまいます。
5パラ前後に見出しの内容をまとめると
読者にわかりやすくなりますよ。
スマホの読みやすさを意識しよう
Googleは、モバイル設計を重視しているので
スマホの読みやすさも意識しましょう。
「検索ユーザーの7割がスマホ」というデータが出ています
とはいえ、改行が多くなりすぎるとスクロール疲れが生じます。しかし、ここは気にしなくてもOK。
スマホなら親指一つで簡単にスクロールできるし、縦長な記事でもあまり関係ないからです。
それよりも、最後まで記事を読まれる方が重要。
つまり、記事の読みやすさです。
まとめ:改行を適切に使おう
最後に、本記事の内容をまとめます。
- pタグとbrタグを適切に使う
- 「<p> </p>」を余白や段落として使わない
- 必ず余白は、CSSで調節する
- 一文を短くする
- 適度に改行する
- 見出し内の段落は5パラ
- スマホの読みやすさを意識する
SEOに効果的な改行の方法でした。
改行をうまく使って、記事の滞在時間をUPさせましょう。