といった悩みにお答えします。
本記事の内容
- 「  ;」とは？
- 【結論】「  ;」はNGではない
- 「  ;」を使わず改行する方法【HTMLで表示せよ！】
ブログで改行した場合、「 」といった文字列が表示されますが、文字化けみたいでSEOに悪影響じゃないのかなと不安になります。
とはいえ、文章の行間を空けたいからという理由で改行を連続して使ってしまうと、SEOに悪影響を与える可能性もあります。
プログラマー目線で見たら、きれいなコードではないので気になります。
本記事を読むことにより、正しい改行を行うことができるのでSEOにも悪影響を与えることなく読みやすい文章にすることができます。
また、正しい改行を行えば、文章が読みやすくなり、読者の滞在時間が上がるのでSEOにも効果的となります。
「  ;」とは？
「 」とは、「ノンブレークスペース（non break space）」の略語で、「改行をしないスペース」といった意味を持っている特殊文字になります。
ちなみに、WordPressでブログを書いている方ならわかると思うのですが、「Enterキー」を押して改行した場合に、テキストエディタに切り替えると表示されます。
また、「Shift ＋ Enter」でも改行をすることは出来ますが、この場合、「 」は表示されません。
「  ;」の他にもたくさんの特殊文字がある
「 」以外にも特殊文字はたくさんあるので、以下でよく使うものをご紹介します。
| < | < < | 小なり |
| > | & & | 大なり |
| & | & & | アンバーサンド |
| " | " " | クォーテーション |
| ' | ' ' | アポストロフィ |
| [ | [ [ | 左ブラケット |
| ] | ] ] | 右ブラケット |
| © | © © | 著作権マーク |
上記のような感じです。
また、エディタのところに Ω ボタンがあるのでそれをクリックすると、特殊文字の一覧が表示されます。
【結論】「  ;」はNGではない
結論をお伝えすると、特殊文字はタイトルやメタディスクリプションで使ってもOKです。
その内容は以下になります。
Sure, but often we just ignore & drop them.
— 🍌 John 🍌 (@JohnMu) May 2, 2017
これを日本語に訳すと、以下のように言っています。
こんにちはジョン。メタタイトルやメタディスクリプションにこのような記号を使用しても大丈夫ですか？よろしく、デイブ。
もちろんですが、多くの場合、無視して削除します。
上記のことから、特殊文字は使ってもOKということになります。
とはいえ、HTMLやCSSにあまり詳しくないブロガーさんや初心者の方で、間違った使い方をしている人をよく見かけます。
例えば、以下のような記述はHTMLの文法的に間違った使い方となります。
HTML
<p>りょーた</p>
<p> </p>
<p>みほ</p>
なぜ上記の記載がダメなのか？
Pタグは「パラグラフ（Paragraph）」の略になるのですが、<p>～</p>で囲まれたテキストは1つの段落だよという意味になります。
「  ;」を使わず改行する方法【滞在時間UP】
それでは本題の「 」を使わずに改行する方法を2つ紹介していきます。
- div classを使ったHTMLを記述
- エディタをGutenbergに変える
1つずつ詳しく解説していきます。
その①：div classを使ったスペースの作り方
1つ目は、div classを使ったスペースの作り方です。
以下はHTMLになるので、テキストエディターに切り替えて、そのままコピペして使用してください。
HTML
<div class="wp-block-spacer" style="height: 20px;" aria-hidden="true"></div>
ちなみに、「height: 20px;」の数値を変えれば、改行した余白部分の大きさを変更することができます。
僕は自分ルールを設定して、20px～40pxの数値で使用しています。
具体的には、
- 本文中の文章間＝20px
- 見出しの前＝40px
といった感じで使い分けています。
たったこれだけですが、文章が読みやすくなるので、必然的に滞在時間が上がり、SEOにも効果的です。
当ブログの平均ページ滞在時間は4分35秒となっているので、いかに滞在時間が長いかがわかると思います。
その②：エディタをGutenbergに変える
2つ目は、エディタをGutenbergに変えて行うやり方です。
その①とほぼ一緒ですが、エディタをGutenbergにすることで、デフォルト機能の「スペーサー」を使うことができます。
ワンクリックで改行を挿入することができるので、いちいちHTMLコードをコピペする必要がありません。
また、余白の大きさもスペーサーの下部をドラッグして、上下にサイズを変えるだけなのでとても簡単です。
余談ですが、Classic Editorは2021年12月31日にサポートが終了となるので、この機会に変えておくのもありですね。
まとめ：「  ;」は使っても問題ないが正しく使おう！
今回は「  ;」はNG？HTMLを使って改行する2つの方法といった内容を解説しました。
「  ;」は基本的に使っても問題がないですが、正しい使い方をしないと、HTMLの文法的に間違った使い方となってしまい、SEOに悪影響となる可能性もあります。
微々たるものではありますが、小さなことから正していけばSEOにも効果的なブログ運営ができるのでできる限り直しておきましょう。