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

スポンサーリンク

関連記事

サイトの表示スピードを早くしたい!

サイトの表示スピードを上げるぞ!CSS・js圧縮、画像最適化でどの位早くなるかな?

ブラウザからサイトを閲覧する際には、CSS(カスケーディング・スタイル・シート)やjs(ジャバス

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

地域名SEOに再注目!

地域名でSEO!ドアウェイページが一掃されてチャンス到来?

商圏エリアが限られるビジネスをされている方々に朗報です。 地域に根ざした商売をする方にとってプ

記事を読む

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

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

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

記事を読む

タイムスタンプのみ更新すれば、新鮮なサイトだと判定されるの?

SEO対策効果を高めるためにサテライトサイトのタイムスタンプを更新するべき?

今回のお話は『タイムスタンプ』です。 先日(といっても、1ヶ月近く経過してしまった)とあるアフ

記事を読む

alt属性の最適化でSEO効果は?

alt属性にSEO効果を期待するなかれ

alt属性について誤った理解をされているケースが散見されますが、alt属性は写真や画像が表示

記事を読む

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

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

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

記事を読む

トップレベルドメインってなに?

被リンク元サイトのトップレベルドメイン名が偏るとSEO対策スパム?ドメインの一覧付き

皆さんが普段見かけるドメインはどういったものですか? .comや.netはよく見かけますね

記事を読む

重複コンテンツはSEOスパム?

SEOエンジニア視点でどこからが重複コンテンツ?ペナルティー対象?リライトは?

重複コンテンツは絶対ダメ! ただコピー&ペーストした記事が完全なアウトであることは皆さんご

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑