空白文字とは？

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

文字実体参照は、キーボードで直接入力できない文字をHTML上で表現する方法です。“空白”という文字はHTMLでも定義されているため、文字実体参照を使って空白文字を指定すれば、SEOへの影響を最小限に抑えながら空白を挿入することができます。

以下の4つの文字実体参照は、それぞれ異なる幅の空白を表現します。

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

これらの文字列をHTMLファイルやWordPressのテキストエディタに入力すると、上記の幅に対応する空白が表示されます。各スペースの幅が異なるため、自分のイメージに最も近いものを選んで利用してください。

また、これらの空白文字を例えば「               」のように連続して入力することで、入力した個数分の空白が挿入されます。そのため、同じ空白文字を繰り返したり、細いスペースと改行禁止スペースを組み合わせたりすることで、必要な幅の空白を表現することも可能です。

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

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

やり方は簡単で、空白を挿入したい箇所に幅を指定したinline-block要素の<span>タグを挿入します。以下に、具体的なCSSとHTMLの例を示しますので、CSS初心者の方もコピペして活用してください。

CSS

.space {
display: inline-block;
width: 10px; /* 幅を自由に調整してください */
}

HTML

空白を挿入したい文字<span class=”space”></span>と文字の間に挿入します。

CSSのwidth:10px;の部分の数値をwidth:20px;のように変更することで、空白の幅を自由に調整することができます。
さらに、文字を入力しているわけではないため、「空白を挿入したい文字　　　　　と文字の間に挿入します。」のように単語が「空白を挿入したい文字」と「と文字の間に挿入します。」に分断されることもなく、SEOへの悪影響を最小限に抑えることができます。

全角スペースを使う

全角スペースで空白文字を表現する方法は簡単で一般的ですが、SEOへの悪影響があるため推奨されません。
全角スペースを利用するには、「あいう　　　　えお」のように、空白を入れたい部分に好きなだけ全角スペースを入力します。しかし、半角スペースを入力してしまうと、何個入力しても1個の半角空白としてしか認識されないため注意が必要です。
この方法を使うと「SE　　　　O対策」のように単語がスペースで分断されてしまいます。スペース（　）は文字の余白を調整するためのものであり、「SE　　　　O対策」のように単語を分断してしまうと、Googleが正しく単語を認識できない可能性が高くなります。

その結果、Googleが文脈を理解できず、SEOに悪影響を及ぼす可能性があります。

CSSで文字を透明にする

CSSで文字を透明にする方法も簡単で便利ですが、SEOへの悪影響があるため推奨されません。

この方法は、「あいう<span class=”kuhaku”>ダミー文字列</span>えお」のように入力し、CSSで「ダミー文字列」の色を透明にするだけです。実際のコードは以下の通りです。

CSS

.kuhaku {
color: transparent;
}

HTML

あいう<span class=”kuhaku”>ダミー文字列</span>えお

transparentは透明を表す文字色であり、この指定により「ダミー文字列」が透明になります。見た目上は「あいう」と「えお」の間に空白が入っているように見えます。
また、透明の文字列で空白を表現することで、<span class="kuhaku"></span> の間に入れる文字の幅によって自由に空白の幅を調整でき、便利な方法です。

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