インスタなどでは、全角のブランクにキーボードの改行キーを押すことで空白行を作ることができます。コピペなしなので簡単にできます。しかし、HTML文書としては、改行キーを使うのは好ましくないのです。ここでは、HTMLに適した空白行の作り方を説明します。
【html】brタグで改行する
brタグは改行のためのタグです。brはbreakに略で、文字列の改行したい位置に入力することで改行されます。したがって、brタグを連続して入力すれば空白行を作ることができます。ただし、brタグを連続することはHTMLとしては好ましいことではありませんので避けた方が無難です。
【css】「margin」「padding」で空白行を入れる
空白行を作る目的は、段落の切れ目を強調して文章を読みやすくすることにあります。こうした文章の見栄えの調整はCSSの役目です。空白行を追加するには、marginやpaddingプロパティを使います。
marginはHTML要素外側の上下左右の余白を指定し、paddingはHTML要素内側の上下左右の余白を指定します。空白行を作るには、marginやpaddingで上下の余白を大きくすればよいのです。
目次
空白(スペース)の幅を調整する
空白の幅を調整するには、テキストであれば半角や全角のスペースをスペースキーを複数回押して追加すればよいでしょう。しかし、インスタなどHTMLで文章を書くときには少し工夫が必要です。以下に空白の追加方法を示します。
スペースキーで全角スペースを数回入れる
HTMLでは、半角の空白が連続していても1つの半角に詰められてしまいます。そのため、全角スペースを使って空白の長さを調整します。全角スペースを連続させればつめられることはないのです。
空白文字(文字実体参照)を入れる
半角スペースに相当する空白を作りたいときは、文字実体参照と呼ばれる記号列を追加します。具体的な記号としては、「 」を使います。文字実体参照にはこのほかに「 」「 」「 」があります。
空白(スペース)を詰める
全角スペースを使って空白を追加しても、ブラウザによって見た目が変わることがあります。例えば、widthで横幅指定をした場合には、改行される位置が異なったりすることがあるのです。そのため、空白を詰めるには空白文字の種類と個数で調整するのではなく、CSSプロパティを使うのが適切です。
【css】「margin」「padding」で0値を入力する
CSSのmarginタグやpaddinnguタブの値を0にセットすることで、空白(余白)を詰めることができます。CSSプロパティを使えば、ブラウザによって見え方が変わることはありません。
空白・改行はSEOに不利になるってホント?
インスタで、プロフィールやキャプション、コメントやDMなどを見やすくするには空白の追加や改行で段落分けすることが重要です。一方、空白を入れる方法が不適切な場合は、SEOに不利になって、検索結果で上位に表示されにくくなるともいわれています。
以下では、その理由や対応策を説明します。
【結論】連続改行はSEOに不利になってしまう
文章を読みやすくするためには、改行を使って文章がだらだらと連続しないようにします。さらには、伝えたいポイントに合わせて段落分けを行い、段落が見やすくなるように段落と段落の間には空白行を設けたりします。
しかし、こうした文章間の区切りを強調するために改行を連続することはSEOに不利になってしまうのです。以下で、その理由と対処法を説明します。
基本的には(p・brタグ)を使用する
説明したように、改行には、文章を段落分けをすること、ひとつの段落内の文章を改行で区切って見やすくすることの2つの意味がありました。
HTMLでは段落を明示するにはpタグを使用し、改行するにはbrタグを使用するのが本来のタグとしての使用法です。
連続改行するには、brタグを複数回使用することで実現できますが、この使い方は避けましょう。文章中で複数の空白行で区切るのは段落の変わり目となります。したがって、段落の変わり目を表すのに複数のbrタグを使用するのはHTMLの書き方としては不適切であり、pタグを使うべきなのです。
次に段落の区切りを強調するのために空のpタグを使うのも止めましょう。見かけ上は複数の空白行が入ったように見えますが、1文もない空の段落を追加したことになりHTMLとしては不適切な文章となってしまいます。
こうしたHTML文書として不適なものはSEOで不利になるのです。
どうしても連続改行が必要な場合はcssで対応する
連続改行は段落間の空白を広げるために使うことがあるでしょう。しかし、段落間の空白を広げたいのであれば、CSSで対応するのが正しいHTNL文書の書き方です。
具体的には、CSSのmarginの値を大きく設定することで、段落間の空白を広げるようにするのです。
単語の途中に空白を入れるとSEOに不利になってしまう
インスタのキャプション中の商品名を目立たせるには商品名の前後に空白を追加するとよいと説明しました。しかし、この空白を全角のブランクや文字実体参照などを使用すると、HTML文書中に不要な要素を紛れ込ませることになってしまいます。これでは、文章内に突然不要な文字が現れ、不自然な表現であるといえます。
このように、空白文字を使ってHTML文書の見た目を無理やり整えるのは、SEOに悪い影響を与えてしまうことにもなりかねません。
HTML文書という意味では、見た目などのデザイン面での整合性を図るには、CSSを活用した方がSEOには有利になることを覚えておいてください。
インスタで空白文字を入れると反応(コンバージョン率)が良くなる?
インスタは投稿した写真や動画に魅力があることが重要ですが、それらを補足する文章(キャプション)にも気を配ることが必要です。特にインスタで商品の紹介をしている場合など、その商品を欲しいと思う人を増やす(コンバージョン率を高める)には、キャッチコピーも含め、キャプションで魅力を伝えることも必要です。
キャプションを読んでもらうには、キャプションが読みやすいものであることが基本となります。ここでは、そのツールとしての空白や改行について解説していきます。
インスタで空白・改行を入れるメリット
ここでは、インスタのキャプションなどに空白・改行を追懐することのメリットを説明します。せっかく投稿したのに見てもらえない、なかなかいいねが増えないのはツライですよね。メリットを理解して、上手に空白・改行を使いましょう。
伝えたい文章を強調できる
文章に、例えば商品名などの読者に印象付けたい単語が含まれている場合でも、普通に文章を書いた場合は、一目見ただけでは、他の単語と区別がなく、商品名が含まれていることには気が使いないでしょう。
きちんと文章を読んでもらえば商品名として理解してもらえるでしょうが、ここは、ぱっと見でも、商品名に目が行くようにしたいものです。そんな時は、商品名の前後に空白を入れるとよいでしょう。
空白を入れて商品名を文章から浮かび上がらせることで商品名を目立つようにすることができるのです。まず、商品名で目を引き、それをきっかけに、文章を読んでもらうように誘導するのです。
文章自体が読みやすくなる
スマホなどで画面を開いた時に、画面全体にびっしりと文字が埋まっていたら、読む気になるでしょうか?
きっと、見ただけで嫌気がさしてスキップされてしまうでしょう。これでは、どんなに読者のメリットになることが書いてあっても何の役にも立ちません。
文章は内容が良いことは当然ですが、読みたいと思えるように、読みやすいなと感じてもらえるように書くことが重要なのです。そのためには、改行などで読みやすい段落構成とし、ポイントとなる単語や文章を空白を使って強調するなどの工夫も必要です。
可読性が上がり、コンバージョン率の向上が見込める
写真や動画で商品に対する興味を引き購入しようかなという気持ちにさせて、さらにキャプションで魅力やメリットをきちんと伝えることができれば、実際に購買してもらう確率を高めることができます。キャプションはこのように、購買意欲を行動に結びつける重要なツールなのです。
すなわち、インスタのコンバージョン率を高めることができるのです。
【iPhone/Android】空白・改行の入れ方
インスタでは、空白や改行は特別な扱いとなっており、テキストにおける空白や空行とは扱いが異なるので注意しましょう。以下では、インスタの各パートごとに空白・改行の入れ方を説明します。なお、iPhoneとAndroidでは操作方法が異なる場合もあるので、その場合は、それぞれについて操作手順を示します。
インスタでは、インスタの画面でスマホのキーボードを使っての改行ができませんでした。キャプションやメモ帳アプリなどで改行入りの文章を作成し、それをコピペするしか方法がなかったのです。しかし、2019年1月から、スマホに表示されるキーボードの改行ボタンを押すことで改行を入力できるようにバージョンアップされています。
プロフィール(iPhone=Android)
プロフィール編集画面では、改行をキーボードを使って直接入力できます。しかし、改行を2回続けてキー入力することで空白行を作ろうとしても、編集段階では空白行ができたように見えますが、投稿すると空白行はつめられてしまいます。
どうしても空白行を作りたい場合は、1文字目に全角ブランクやハングル文字のブランクを入力しその後にキーボードの改行を押すようにします。なお、半角の空白1文字は投稿すると削除されてしまいますので使えません。