SEOスパム?守るべき背景色と文字色の明度差

公開日: : 最終更新日:2015/06/08 SEO, スパム

背景色と文字色の推奨される明度差は?

先日、googleガイドラインって何?Googleガイドラインを完結にまとめてみたにおいて、隠しテキストや隠しリンクに関し言及しました。

この話、非常に簡単な内容ですが念のため詳しくポイントを整理した記事を書いておこうと思い、今回のポストとなりました。

この記事では次のことをまとめています

  • 隠しテキストとは?と具体的な例
  • 隠しリンクとは?と具体的な例
  • 背景色と文字色の必要な明度差は?

隠しテキストとは?

隠しテキストとは、人間の目には見えないテキストであったり、スタイルシートを悪用することで人間の目には見えないが検索エンジンには読ませる手法の総称です。

隠しテキストの具体的な例

・背景色が白でその上に白の文字や限りなく白に近いグレー文字を配置する行為(白背景に灰色はどの濃さまでがセーフなの?という疑問の答えが明度差です。)
・文字を含むブロックの、下段ブロックをマイナスマージン(ネガティブマージン)等でかぶせる行為
例として、下記へhtmlソースを記載します。

・スタイルシートでtext-indent:-9999px;を使う
・フォントサイズを小さくする。font-size:0;など

隠しリンクとは?

隠しテキストと考え方は同一です。
人の目には見えない、もしくは意図的に見づらくしたリンクを指します。

隠しリンクの具体的な例

こちらも隠しテキストどほぼ同一です。
隠しリンクの場合に利用されることが多い事例として
・リンクカラーやリンク装飾を通常文字と見分けがつかないようにする(背景色と同一色も当然アウトです)
文字色が黒の時に、リンクのカラーを黒にし、アンダーラインやマウスオーバー時の装飾を意図的に消す行為も隠しリンクに含まれる場合があります。ソースの例です。

・noscriptタグ内にリンクを埋め込む
こちらも悪例をひとつ。

・クリックが難しい記号( – や ’ )をアンカーテキストにする
・iframeタグを設置し、縦横幅を極小とし、タグ内へリンクを設置する
こちらも典型的なスパム例ソースを下記へ。

背景色と文字色の必要な明度差は?

W3Cの推奨値である「明度差125以上、色差500以上」が必要な差であると言えます。
一応、W3Cから原文を引用します。

The rage for color brightness difference is 125. The range for color difference is 500.

明度差125ってどのくらい?

背景が白(#ffffff)であれば、文字色(#777777)で明度差136となり、ほぼギリギリです。
下の画像は明度差のセーフとアウトを分かりやすいよう作ってみました。
明度差を表したグラデーションと文字色の例

色差500ってどのくらい?

背景が白(#ffffff)であれば、文字色(#555555)で色差510となり、ほぼギリギリです。
下へ色々なカラーで色差を調べた結果を掲載します。参考にしてみてください。
色差500未満、以上のカラー例

ここまで見てもらって、明度差と色差を推奨値にすることはかなりデザインの幅を制限することにお気づきになるでしょう。
文字と背景は黒と白の組み合わせがSEO上は推奨です。デザイナー泣かせとなるかもしれませんが、より多くのユーザーにデザインを見てもらう上では、色弱の方にも優しいデザインが求められます。
また、紙媒体と異なりWEBデザインはユーザーの環境により見え方が異なる点に注意が必要です。
(これはブラウザやOSに起因するものではなく、モニタ環境や室内外でのサイト閲覧環境を指しています。)

明度差と色差をチェックするツールとしてカラー・コントラスト・アナライザー(クリエイティブ・コモンズライセンスにより配布)等が有名です。上記リンクはGitHubです。
明度差と色差の計算式については利用する機会がないかと思いましたので割愛しました。
明度差などを確認できるwebツールも多数公開されています。簡易なチェック方法として良いでしょう。

スポンサーリンク

関連記事

検索エンジンのユーザーシェアはどこが多い?

検索エンジンシェアをアンケートとって調べてみた

先日検索エンジンの利用調査アンケートを実施しました。 簡単に言えば「どこの検索エンジンを使

記事を読む

タイピングミスを放置すると順位が落ちる?

コンテンツ内に入力ミス(誤字脱字)があるとSEO視点で減点になるの?

ブログやサイトへコンテンツの追加を行う。作業内でタイピングミスが発生し、そのまま放置されてい

記事を読む

サイトの信頼性を高めるページを整備しよう

ウェブサイトの信頼性向上を達成させ、アクセスを増やす方法

Googleの順位決定要素には、ウェブサイトの信頼性やウェブサイト管理者の信頼性を評価する考

記事を読む

インハウスSEOのチェックシート

インハウスSEO用に84項目のチェックリスト(内部SEO中心)を公開しました

新年度も始まったということで、内部SEOを中心とした対策箇所のチェックリストを公開しました。

記事を読む

発リンクは多いとダメ?

【SEO要素】発リンクは多すぎるとペナルティーを受けるのか

2009年頃までは発リンクはページあたり100本までと言われていました。というのも、Goog

記事を読む

タダで使える優良SEOツールはこれ!

無料のSEOツール!プロが使う七つ道具!(順位チェック・被リンクチェック・検索ボリュームの取得・サイト表示速度・他)

インハウスでSEOを進めるなら、活用したいツールを一挙にご紹介。 日頃の作業を効率よく進めるた

記事を読む

リンクネットワークって何?

リンクネットワークとは?SEOスパムに無意識に参加するリスク

知らずにリンクネットワークとつながり、手動スパム判定を受けることのないよう注意が必要です。

記事を読む

スマホ最適化すると上位表示する?

スマホ最適化がSEO要素(順位決定要素)になる事が決定!

一言で言えば、「スマホ対応していると順位が上がる」というお話。 難しく言えば、モバイルフレ

記事を読む

モバイルフレンドリーで大きな影響は出た?

モバイルフレンドリー要素追加での検索順位変動[現在のSEOへの影響]

4/21の新要素追加から早いもので1週間が経過しました。 リリース直前での案内では数日から1週

記事を読む

トップページが検索結果に出てこない場合の解決方法

トップダウンペナルティー(TDP)とトップページが上位表示しない場合の対処法

YSTのトップダウンペナルティー、Googleのトップダウンペナルティーで大慌てなサイト管理

記事を読む

スポンサーリンク
スポンサーリンク
2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO

SEOとキーワード数
SEOとキーワード数(メタタグ・タイトル・1ページ内)の正しい設計

この記事は、ご自身でサイト上位表示に取り組む方向けの内容です。

SEMって何?
SEMとは?SEOとの違い

ネット界隈はカタカナや3文字略称が頻繁に出てきます。 ここでは、

キーワードプランナーに仕様変更?
キーワードプランナーの不具合?稼働キャンペーンのないアカウントで検索数が正常に取得できない

今月の上旬に、キーワードプランナーに少し変更があったようです。

WordPressの一覧ページSEO
WordPressサイトの一覧ページ(アーカイブページ)のSEOについて(noindexの扱いなど)

今回はWordPressのお話です。 オウンドメディア、コンテン

→もっと見る

PAGE TOP ↑