ホームページ作成/Webサイトのユーザビリティ

問題なく読めるのに「隠し文字」?(2ページ目)

スタイルシートでのデザインとHTMLでのデザインを混ぜて使っていると、気づかないところで「隠し文字」を作ってしまっている可能性があります。普段、背景色と文字色の指定はどうしていますか?確認してみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

背景色と文字色が同色だと検索エンジンスパム?

検索エンジンは、スパム対策をいろいろ行っています。 「ブラウザ上では見えないけど(色情報が無関係である)検索エンジンには読める文字」(=隠し文字)は、 代表的な検索エンジンスパムです。 この「隠し文字」は、検索エンジンからかなり嫌われます。
※検索件数の高そうなキーワードを隠し文字で列挙しておくことで、無関係な検索キーワードでの検索結果にもヒットさせられます。 これを許すと、正しい検索結果が表示できなくなるため、検索エンジンはこの方法を嫌います。

先ほどのソースは、人間にも問題なく読めるデザインなので、検索エンジンスパムとはいえません。
しかし、スタイルシートを読まなければ、背景色と文字色が同色なために「読めない文字」になってしまいます。 検索エンジンは、おそらくこの記述を「隠し文字」だと判断してしまうでしょう。 つまり、検索エンジンスパムだと解釈されてしまう可能性があります。

スパムだと判定されてしまうと、検索結果の表示から除外されたり、除外されなくても上位には表示されなくなったり、 様々なペナルティが課せられてしまいます。 せっかく作ったページが、そのような誤解を受けるのはイヤですよね。

デザインはスタイルシートのみで

そう誤判定されないように、デザインはすべてスタイルシートで行っておきましょう。
冒頭のソースの問題点は、次のようにデザインをすべてスタイルシートで記述することで解決できます。 (しかも、ソースは短くなっています。)

スタイルシート:
div.samplebox {
   background-color: green; color: white;
}
HTML:
<div class="samplebox">
   全部スタイルシートでデザイン
</div>

ブラウザ上での表示は、先ほどのソースとまったく同じです。 しかし、こちらは背景色と文字色の両方をスタイルシートで指定しているため、スタイルシートを無視しても、文字はちゃんと読めます。

関連記事

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます