空白文字を打ち込もうと思っても、思っていた空白文字にならず、どのように空白文字を打ち込めば良いのか分からない方は多いのではないでしょうか。また、空白文字はSEOに悪影響を及ぼす危険性もあるため、サイトの運営者は適切な使い方を覚えることが必要です。
そこで本記事では、空白文字の概要と4種類の使い方を紹介します。また、空白文字が与えるSEOへの影響や空白文字を使う場面を解説しますので、ぜひ参考にしてください。
目次
空白文字とは
まずは、空白文字の概要から解説します。空白文字とは、文字通り行間や文字間などに空白の文字を打ち込み、スペースを作ることです。空白文字は、通常「スペースキー」や「Tabキー」などを使うことで打ち込めますが、SEOに悪影響を与えると言われています。
そのため、上記以外の方法として、brタグを挿入して空白を作ったり、CSSのmarginなどでpタグの間隔を調整したりします。空白を作りたい場面は多々あるかと思いますが、その時々に応じて使い分けることが大切です。
空白文字の打ち方（使い方）は4種類
一般的に、空白文字の打ち方（使い方）は4種類あります。
・ 全角スペース
・ CSSで透明にする
・ CSSのinline-block要素を使う
・ 文字実体参照
それぞれ順番に見ていきましょう。
全角スペース
まずは、全角スペースです。空白文字を打ち込む際、全角スペースを使う方も多いのではないでしょうか。スペースキーを打ち込めば、そのまま空白文字としてブラウザ上に表示されるため、最も簡単に空白文字を打つ方法だと言えるでしょう。
ただし、全角スペースはSEOに悪影響を与えると言われています。それは、意味のない空白文字に対して、Googleはペナルティを与える危険性があるためです。そのため、積極的に全角スペースを使うのは控えましょう。
関連記事：Googleペナルティとは？集客施策の観点から原因と解決方法を解説します
CSSで透明にする
空白文字は、通常のテキストをCSSで透明にすることでも打ち込めます。例えば「〇〇<span class=”kuhakumoji”>あいうえお</span>〇〇」と打ち込む際、あいうえおの部分を透明にする方法です。
実際のHTMLとCSSは次の通りです。
HTML
「〇〇<span class=”kuhakumoji”>あいうえお</span>〇〇」
CSS
.kuhaku{
color:transparent;
}
上記を設定することで、ブラウザ上ではあいうえおの文字列の部分が透明になります。しかし、この方法もGoogleからはペナルティを受けるリスクがあるため、SEO的には推奨できない方法です。
関連記事
・HTMLとは？簡単なHTMLタグの基本からCSSの基礎まで初心者にもわかりやすく解説
・CSSとは？基礎から基本的なコード例まで初心者向けに解説します。
CSSのinline-block要素を使う
CSSのinline-block要素を使うことで、空白文字を打ち込まなくとも、空白を実現することが可能です。また、SEO的にもリスクが最小限に抑えられているので、空白文字を作りたい場合に最も推奨できる方法と言えるでしょう。具体的には、下記のHTMLとCSSを打ち込みます。
HTML
〇〇<span class=”blank_space”></span>〇〇
CSS
.blank_space{
display:inline-block;
width:20px;
}
上記を打ち込むことで、〇〇と〇〇の間に空白が生まれます。また、CSSの「width:20px;」の数字を変更することで、空白のスペースを変更することも可能です。エンジニアでない方や、マークアップに知見のない方は、そのままコピー&ペーストで利用してみてください。
文字実体参照
最後に、文字実体参照を使って空白文字を打ち込む方法も存在します。文字実体参照とはマークアップ言語の1つで、エンティティ言語とも呼ばれます。文字実体参照を使うことで、空白文字を直接指定することができます。
 
 
 
上記のHTMLを、空白文字を作りたい部分にコピー&ペーストして使用してみてください。上から下になるにつれて、空白文字のスペースを大きくしています。また「    」と打ち込むと、打ち込んだ分だけ空白文字を打ち込めます。そのため、作りたい空白のスペースに合わせて、文字実体参照を組み合わせてみてはいかがでしょうか。
空白文字はSEOに影響を与える？
ここまで、空白文字の概要や使い方を解説してきました。本記事でも、空白文字はSEOに影響を与えると伝えていますが、具体的にどのような影響があるのでしょうか。ここからは、3つの空白文字におけるSEOへの影響を紹介します。
・ 全角スペースはSEOに悪影響を与える
・ 透明文字もペナルティを受ける危険性がある
・ 空白文字を使いたい場合はCSSで調整する
それぞれ順番に見ていきましょう。
全角スペースはSEOに悪影響を与える
まず、全角スペースはSEOに悪影響を与えます。Googleは、文字列や単語を見てコンテンツの内容を判断することはできるものの、運営者にどのような意図があって、現在のコンテンツや文字列になっているのかまでは判断できません。
それらを踏まえて全角スペースを使用してしまうと、例えば「不動産 東京 おすすめ 安い」など、全角スペースを使ってtitleタグやpタグを設定しまうと、ただ単に「キーワードを詰め込んでいるだけ」と認識されてしまう恐れがあります。なお、これは半角スペースでも同様です。
したがって、どうしても空白文字を打ちたい場合は、上述したCSSで調整する方法がおすすめです。
関連記事
・SEO対策の基本を解説します！やり方や基本的な概念をポイントで説明
・SEO対策をまずは自分でやるには？初心者がすぐに取り組める手法を解説！
透明文字もペナルティを受ける危険性がある
Googleは、過去にパンダアップデートやペンギンアップデートと呼ばれる、アルゴリズムアップデートを行ってきた背景があります。これらは、ユーザーが不利益を被るような隠しテキストを配置したり、リンクを隠したりして、意図せぬ結果を招く恐れがあるサイトの検索順位を落とすためのアップデートです。アップデート後は、いわゆる「ブラックハットSEO」と呼ばれる施策を打っているサイトには、ペナルティを与えるようアルゴリズムが変更されました。
そのため、透明文字を使って空白文字を表現しようとすると、上記の隠しテキストと認識される恐れがあり、ペナルティを受けるリスクが大幅に高まります。ペナルティを受けると検索順位が下落するとともに、サイト運営者の評価も落ちてしまうため、絶対に避けるべきだと言えるでしょう。
関連記事：アルゴリズムの意味とは？検索アルゴリズムの基礎から順位決定の要素まで詳しく解説
空白文字を使いたい場合はCSSで調整する
ここまで解説したSEOへの悪影響を踏まえると、2022年時点では、空白文字を使いたい場合はCSSのinline-block要素で調整する方法が最もおすすめです。CSSに対して、Googleは「デザインを整えるもの」という認識をしているため、HTMLよりも、CSSで調整するのが最も安全だと言えます。
スペースキーで空白文字を打ち込むのは確かに楽ではあるものの、ペナルティを受けないサイト運営や、信頼性を高めるという本質的な目的から逸れることがないように注意しましょう。
空白文字を使う場面とは？
ここまで、空白文字の使い方やSEOへの影響などを解説してきました。最後に、空白文字を使う場面と、コピペで打ち込めるHTMLとCSSを紹介します。
姓と名の間
最も一般的な空白文字を使う場面として、姓と名の間が挙げられるでしょう。例えば「山田太郎」という名前の人物がいた際、姓と名の間に空白文字を打ちこむHTMLとCSSは次のとおりです。
HTML
山田<span class=”blank_space”></span>太郎
CSS
.blank_space{
display:inline-block;
width:10px;
}
空白文字の間は「10px」としてありますが、イメージしている空白スペースにならない場合は、サイズを調整して対応してみてください。
会社名・サービス名の間
会社名や、サービス名の間にも空白文字を使いたい場面があるでしょう。例えば「株式会社空白文字」という会社が存在した場合、空白文字のHTMLとCSSは以下になります。
HTML
株式会社<span class=”blank_space”></span>空白文字
CSS
.blank_space{
display:inline-block;
width:10px;
}
すでにお気づきかと思いますが、CSSのinline-block要素を使う場合は、空白文字を作りたい前後のHTMLテキストの間に、<span class=”blank_space”></span>を設定するだけです。後は、CSSをコピペして打ち込めば、SEOに悪影響の少ない空白文字を実現できます。
まとめ
本記事では、空白文字について解説をしてきました。空白文字は、通常の全角スペースや、CSSでの透明プロパティを使って空白文字を打ち込んでしまうと、SEOに悪影響を及ぼします。そのため、結果的に空白文字の影響で検索順位が落ちてしまうと、空白文字は使わなければ良かったという事態にもなりかねません。
空白文字を使う際は、基本的にCSSで調整しながら、簡易化したい場合は文字実体参照を使いましょう。
