COLUMNコラム
空白文字とは？基礎知識や空白文字の打ち方、SEOへの影響などについて解説
空白文字とはその名の通り、空白を空けたいときに使うものです。
しかし、具体的にどのようなときに、どのような方法で使用すればよいのか悩んでいる方も多いのではないでしょうか。
そこで本記事では、空白文字の基礎知識や打ち方、SEOへの影響などについて詳しく解説します。
空白文字とは
空白文字とは、行頭やテキスト間に余白を作るための文字のことです。
適切な箇所に適切な方法で空白文字を打てば、ユーザーや検索エンジンからの評価が高まります。
ただし、空白文字を多用すると読みにくくなるなど、逆効果となるので注意が必要です。
また、スペースキーを押しての空白文字の入力もseo評価に悪影響を及ぼす可能性があります。
空白文字の打ち方
空白文字を打つ方法は複数あります。
ここでは、それらについてそれぞれ解説します。
全角スペースを使用する
全角スペースを使って空白文字を打つ方も多いのではないでしょうか。
全角スペースは、スペースキーを押すだけで打ち込めます。
例えば「いろは にほへと」のように、空白を空けたい分だけスペースキーを押せば、そのまま打ち込めます。
ただし、この方法で空白文字を打ち込むとSEOに悪影響が出てしまうので、全角スペースの使用は避けましょう。
CSSで文字を透明にする
CSSで文字を透明にすることでも空白文字を打ち込めます。
例えば、「いろは<span class=”kuuhaku”>あかさたな</span>にほへと」と入力し、CSSで「あかさたな」を透明にする方法です。
見た目上は「いろは」と「にほへと」の間に空白を作れます。
コードは以下の通りです。
HTMLいろは<span class="kuuhaku">あかさたな</span>にほへと
CSS.kuuhaku{
color:transparent;
}
上記のように指定することで、見た目上の空白を作成できます。
ただし、この方法もSEOにマイナスに作用してしまうので、使用は避けましょう。
CSSのinline-block要素を使用する
CSSのinline-block要素を使用することで、空白を作成できます。
具体的には、空白文字を打ちたい箇所に<span>タグを打ち込み、CSSのinline-block要素で幅を指定するだけです。
コードは以下の通りです。
HTMLいろは<span class="kuuhaku"></span>にほへと
CSS.kuuhaku{
display:inline-block;
width:15px;
}
上記のように指定することで、空白を作れます。
CSSの「width:15px;」の箇所の数字を変えることで、空白の幅を自由に設定することも可能です。
ただし、文字を入力していないので、途中にコードを打ち込んで空白を作っても、その単語は分断されません。そのため、SEOへの悪影響を最小限に抑えられます。
文字実体参照を使用する
文字実体参照を使用して空白文字を打ち込むこともできます。
文字実体参照とは、HTML上で、あらかじめ決められたキーワードで指定することです。「&」と「;」の間にキーワードを入れることで、指定できます。
文字実体参照で空白文字を打ち込むためのキーワードは、以下の4つです。
-  
4つのうち、幅がもっとも狭い空白。 -
半角スペースと同じ幅の空白。改行・無視されることがない。 -  
「 」より少し幅が広い空白。「n」と同じ幅。 -  
「 」
より少し幅が広い空白。「m」と同じ幅。
上記の文字列をHTML上で入力することで、空白を表現可能です。
また、上記の文字列を連続して入力することで、入力した分だけ空白文字を出力できます。
なお、半角スペースは、スペースキーで2つ以上入力しても1つ分にされてしまいます。半角スペース2つ分以上の空白を出力したい場合には、実体文字参照の「 」を使用して空白を出力しましょう。
空白文字のSEOへの影響
空白文字の使用は、SEOへ悪影響を与える場合があります。
ここでは、使用を避けるべき空白文字と、空白文字を打つときにおすすめの方法について解説します。
全角スペース・透明文字・ハングルフィラーの使用は避ける
前述したように、全角スペースはSEOにマイナスに作用します。
Googleはクロールして内容を判断しますが、運営者の意図までは推測できません。そのため、「レストラン 神奈川 人気」といったように全角スペースを用いてtitleタグ（タイトル）やpタグ（段落）を作成すると、「単語を詰め込んでいるだけ」と評価されてしまう可能性があります。
また、透明文字もSEOに悪影響を及ぼします。
Googleは、隠しリンクや隠しテキストを配置しているページの検索順位を下げるアップデートを行ってきました。そのため、透明文字を使用すると「隠しテキストが使われている」と判断され、検索順位を下げられてしまう可能性があるでしょう。
さらに、ハングルフィラーもSEO評価的にはマイナスとなります。
ハングルフィラーを使用すると、Googleに「意味をなさない文字列がある」と判断されてしまうからです。
以上の理由から、全角スペース、透明文字、ハングルフィラーの使用は控えましょう。
空白文字を打ちたい場合はCSSのinline-block要素を使用する
空白文字を打ちたい場合は、CSSのinline-block要素を使用するようにします。
CSSで空白を調整すると、Googleから「デザインを整えるための空白」と判断されるので、SEOへの悪影響のリスクを最小限に抑えられます。CSSのinline-block要素を使用すれば空白の幅も自由に調整できるので、デザインの点からみても他の方法より好ましいです。
空白文字の使用シーン
空白文字はどういった場面で使うことが多いのでしょうか。ここでは、空白文字の一般的な使用シーンを2つ例示します。
氏名（名字と下の名前の間）
一般的な空白文字の使用箇所として、名字と下の名前の間が挙げられます。
氏名で空白文字を使う場合のコードは、以下のようになります。
HTML鈴木<span class="kuuhaku"></span>一郎
CSS.kuuhaku{
display:inline-block;
width:5px;
}
空白の幅は「width:5px;」としてありますが、この箇所の数字は自由に調整可能です。
会社名（会社の種類と会社名の間）
会社名に空白文字を使用したい場合、コードは以下のようになります。
HTML有限会社<span class="kuuhaku"></span>○○
CSS.kuuhaku{
display:inline-block;
width:5px;
}
この場合も、「width:5px;」の箇所の数字を変更することで、空白の幅を自由に調整できます。
まとめ
ここまで、空白文字の基礎知識、打ち方、SEOへの影響などについて解説しました。
空白文字を打ち込みたいときは、CSSのinline-block要素を使用すると、SEOへの悪影響を抑えられます。
テキストの可読性を上げるためにも、適切な空白文字の使用を心がけましょう。