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ツールも多数公開されています。簡易なチェック方法として良いでしょう。

スポンサーリンク

関連記事

ping送信でSEO効果はあるの?

【SEO効果】日に数回更新するブログにping送信は必要か?

あなたの運営されているブログは日に0回~5回/日程度の更新頻度ですか? であれば、ping

記事を読む

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

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

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

記事を読む

1ページで最適化するキーワード数は欲張るとダメ?

SEO対策をかけるキーワード数はページあたり何個まで?

あれもこれもと欲張りたくなるターゲットキーワード。 ここでは、1ページに対しいくつのキーワ

記事を読む

コンテンツSEOセミナー開催しました(過去形)

コンテンツSEOセミナーへのご参加ありがとうございました。

昨日(2015年2月24日火曜日)コンテンツSEOセミナーを開催させて頂きました。 急な開

記事を読む

発リンクは多いとダメ?

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

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

記事を読む

SEOの要因に直帰率は含まれるの?

SEOとの関係性。直帰率が高い、離脱率が高いと順位は落ちる?

この記事では、一般的なWEBサイトやLPへオーガニック経由でアクセスがあった場合の直帰率や離

記事を読む

2016年最新SEOトレンドは、この4つをおさえるべし

2016年も始まって2週間。やっと今年1記事目の高橋です。 今年もよろしくお願いします。

記事を読む

格安料金のSEOを使う前に知っておくべきこと

激安料金のSEOサービスにはリスクが伴う

激安価格のSEOサービスはなぜ超低価格で販売が出来るのか。 このカラクリをご紹介します。

記事を読む

順位変動はアップデートによるもの?

大きな順位変動2014-12-06 アップデートがあったのか?

ここ数日、順位に大きな変動が見うけられます。(2014/12/4~12/6付近で大きな変動が

記事を読む

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

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

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

記事を読む

スポンサーリンク
スポンサーリンク
検索意図ドリル
コンテンツマーケティング関連本「検索意図ドリル」書きました。

ドリルを書きました。 「は?ドリル?あの漢字とかの?」 こ

2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑