SEO/SEM

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

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

ホームページなどで空白文字(ㅤ)を使いたいのに、「上手く空白にならない…」と悩んでいる人は多いです。

単純にスペースキー( )で空白文字が入力できれば良いのですが、それでは思っていた表現と違う場合や、ホームページの仕様で空白にならないこともあります。

そこで今回は、コピペで使える空白文字や、さまざまな空白文字の表現方法について解説していきます。この記事が空白文字のやり方で悩んでいる方の参考になれば幸いです。

コピペ用空白文字一覧

まず初めに、コピペで使えてどんな環境でも空白文字として表示される「コピペ用空白文字一覧」を提示しておきます。

説明不要で今すぐ空白文字のやり方が知りたい場合は、下記の空白文字をコピーして使ってください。

空白文字1個~5個

  • 1個:「ㅤ」
  • 2個:「ㅤㅤ」
  • 3個:「ㅤㅤㅤ」
  • 4個:「ㅤㅤㅤㅤ」
  • 5個:「ㅤㅤㅤㅤㅤ」

ここで打ち込んでいる空白文字は、「ハングルフィラー(HANGUL FILLER)」と呼ばれる文字です。

元々はハングル文字を表現するために使用される特殊な文字で、ハングルを使用せず単独で入力すると空白として表示されます。

そのため、日本やアメリカなどのハングル圏外の国では空白文字として活用される事が多いです。

ちなみに、Unicodeでの文字番号は「U+3164」です。日本語用キーボードでは打ち込むことができないため、常用するなら「くうはく」などで辞書登録することをおすすめします。

空白文字のその他のやり方

次に前項でお伝えした方法以外に空白文字を挿入するやり方を、4つ解説していきます。

基本的には、ハングルフィラーを使えば空白文字を挿入できるのですが、SEOの視点で見た場合「無意味な文字列」が突然文中に現れることになるため、悪影響を及ぼします。

SEOをしっかりと考えたサイトを運営されているようでしたら、ここで紹介する「文字実体参照で直接空白を指定する」「CSSのinline-block要素で空白を表現する」のどちらかを活用するのがおすすめです。

特にCSSのinline-block要素をで空白を表現する方法は、幅の調整や高さの調整など自由が効きますので、デザインを重視される方は活用してください。

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

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

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

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

  •  
  •  
  •  
  •  

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

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

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

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

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

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

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

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

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

CSS

.blank_space{
display:inline-block;
width:10px;
}

HTML

あいう<span class="blank_space"></span>えお

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

.kuhaku{
color:transparent;
}

HTML

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

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

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

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

空白文字はSEOに悪影響があるので注意

ホームページを運営していくうえで、空白文字は文字の配置や間隔などを微調整できて便利な方法です。

ですが、SEOの側面から考えると、文中に突然不要な空白が現れるため不自然で良くない表現方法であると言えます。

また、「HTMLは文字を打ち込むためのもの」「CSSはデザインを整えるもの」と定義されています。

そのため、空白文字をHTML上で使って無理やり見た目を整えるのは、SEO的には悪影響が多い方法です。

そこで、ホームページ運営でデザインを調整したいのであれば、空白文字でなくCSSを使ってデザインを整えることを強くおすすめします。

まとめ

今回は、空白文字のやり方について紹介してきました。

最も簡単な空白文字のやり方は、ハングルフィラー(ㅤ)を使う方法です。ですが、この方法はSEOの側面から見ると、あまりおすすめできません。

SEOをあまり意識していないようでしたらハングルフィラーをコピペして空白文字を表現するのが簡単で早い方法ですが、少しでもSEOを意識してホームページを運営されているようでしたら、CSSを使ってデザインの調整を行いましょう。

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
   

Seminarセミナー

現在受付中のセミナーはありません。

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。