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視点で減点になるの?

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

記事を読む

上位表示されない!困った!

サイトやブログが上位表示されない時、初めに確認すべき5つのこと

あなたのサイトやブログは上位表示していますか? サイト全体で狙っているキーワード、ページ単

記事を読む

ドメイン移転時のリダイレクト設定とは

ドメイン移転の際は、.htaccessファイルでリダイレクト設定を忘れずに【必須手順】

ウェブサイトの運営過程で、サイトドメインを変更するケースもあるでしょう。 中には、あるどメイン

記事を読む

フラッシュサイトは検索結果から外される?

フラッシュ利用サイトは順位が落ちる?スマホ検索で【Flashを使用。お使いの端末で動作しない場合があります。】

今回のテーマは『フラッシュ(Flash)』です。 リッチなコンテンツを用意する上で重要

記事を読む

エグジフ情報をGoogleは読んでるの?

検索エンジンはExif情報(画像ファイルのプロパティ)を取得しているかの実験

今回は画像ファイルにあるExif情報を検索エンジンは読み込み、検索結果を決定する上で使用して

記事を読む

オーサーランクを上げるのが大事なの?

オーサーランクは気にするな!多過ぎる勘違い

Googleがオーサーシッププログラムを終了した現在において、オーサーランクにおける勘違いを

記事を読む

h1タグにキーワード入れるとSEO効果あるの?

h1タグのSEO効果。実験してみたらこうだったな話

タイトルタグの重要性は調査するまでもなく超重要ですが、見出しタグの効果はどうも実感できないと

記事を読む

スマホ検索の順位変動はまだ?

モバイルフレンドリー要素が組み込まれる日時について

今日という日。4/21はGoogleが宣言したXデーです。(Xデーという言葉が合っているかは別と

記事を読む

9月26日のパンダアップデートで順位が下落した?

2014/09/26のパンダアップデートについて(Googleアップデート)

もう10月ではありますが、僅かながらアップデートの影響を感じる点や、今後のアップデートの方向

記事を読む

職種SEOコンサルタントって?

SEOコンサルタントとはどんな仕事?なるには要件や資格が必要?

SEOコンサルタントになろうか考えている方、SEOコンサルタントを雇うべきか考えている方のご参考

記事を読む

スポンサーリンク
スポンサーリンク
2019年のSEO
2019年のSEO。私が頑張りたい4要素。

昨年(2018年)は書くのを忘れました。今年は書いておこうと

Googleの個人名「ナレッジパネルの認証を受ける」の申請方法・編集

Googleで個人名検索をした際に表示される「ナレッジパネル

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑