空白文字とは？コピペで簡単な空白文字のやり方やSEOに与える影響を解説

文字実体参照で直接空白を指定する

文字実体参照は、キーボードで直接入力できない文字をHTML上で表現する手法です。

実は“空白”という文字は、HTMLでも定義されています。そのため、文字実体参照で空白文字を直接指定すれば、SEOへの影響を最小限に抑えて空白文字を打つことができます。

文字実体参照では、下記の4つが空白を表現する文字にあたります。

•  
•  
•  
•  

これらの文字列をHTMLファイルやWordPressのテキストエディタに入力すると、それぞれ下記の幅のスペースが表示されます。

• 細いスペース
• 改行禁止スペース
• nの文字幅のスペース
• mの文字幅のスペース

上から順に、空白の幅が狭い順に並べているので、それぞれコピペして確認してみて自分のイメージに近いものを活用してください。

また、これらの空白文字を「               」のように横並びに打ち込むと、打ち込んだ個数分の空白が挿入されます。

そのため、同じ空白文字を繰り返したり細いスペースと改行禁止のスペースを組み合わせたりすることで、自分のイメージに合った幅の空白文字を表現することも可能です。

CSSのinline-block要素で空白を表現する

CSSのinline-block要素で空白を表現する方法は、自由度が高く、SEOへの影響を最小限に抑えた手法です。

やり方は簡単で、空白文字を挿入したい文字と文字の間にinline-block要素で幅を指定した空白の<span>タグを挿入するだけです。

下記に、実際に使うCSSとHTMLの例を提示するので、CSS初心者の方はコピペして活用してください。

CSS

HTML

CSSのwidth:10px;の部分の数字をwidth:20px;のように変えることで、空白文字を自由な幅に変えることができます。

また、文字を入力している訳ではないので「SE　　　　　O対策」のように、単語が「SE」と「O対策」に分断されることもなくSEOへの悪影響を最小限に抑えることができます。

全角スペースを使う

全角スペースで空白文字を表現する方法は、簡単で最も一般的と言えますが、SEOへの悪影響があるためおすすめできません。

全角スペースで空白文字を表現するためには、「あいう　　　　えお」のように、空白文字を入れたい文字と文字の間に好きな数だけ全角スペースを打ち込めば良いだけです。

この時、半角スペースを入力してしまうと何個入力しても1個の半角空白としか判定されないため注意が必要です。

この方法は、見てわかる通り「SE　　　　O対策」のように単語がスペースで分断されてしまいます。一般的にスペース（　）は文字の余白を調整するための文字なので、「SE　　　　　O対策」のように単語を分断してしまうと、Googleにきちんと単語が認識されない可能性が高いです。

その結果、Googleが文脈を読めなくなりSEOに悪影響を及ぼしてしまいます。

CSSで文字を透明にする

CSSで文字を透明にする方法も簡単ではありますが、SEOへの悪影響があるためおすすめできない空白文字のやり方です。

その方法は簡単で、「あいう<span class="kuhaku">ダミー文字列</span>えお」のように入力し「ダミー文字列」の色をCSSで透明にするだけです。

実際のコードは次のようになります。

CSS

HTML

transparentは透明を表す文字色なので、上記指定をすることで「ダミー文字列」が透明になり、見た目上では「あいう」と「えお」の間に空白が入っているように見えます。

また、透明の文字列で空白を表現しているので<span class="kuhaku"></span>の間に入れる文字の幅で自由に空白の幅を調整でき、便利な方法ではあります。

ただし、見た目上空白に見えるだけで、Googleには「あいうダミー文字列えお」と認識されるため、SEOに悪影響を及ぼしてしまいます。