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

 

関連記事

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

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

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

記事を読む

SEOとキーワード数

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

この記事は、ご自身でサイト上位表示に取り組む方向けの内容です。 htmlタグのお話が登場します

記事を読む

コンテンツ最適化シートってなに?

コンテンツ最適化シートとは?(COS:Content Optimization Sheet)

オウンドメディアを立ちあげたい場合、自社サービスサイトのトラフィックを増やしたい場合、コンテ

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

プログレッシブ エンハンスメントとは?

プログレッシブ エンハンスメントとは?Googleの推奨するサイト構築法

2014年10月末にGoogleはウェブマスター向けに技術に関するウェブマスター向けガイドラ

記事を読む

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

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

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

記事を読む

SSLメールフォームにすると順位は上がる?

SSL導入でSEO効果アップ?順位アップ!?

今回は、はじめにメールフォームや決済情報入力ページをSSL化するとSEO効果があるのかについ

記事を読む

リンクのアンカーテキストが偏ったら危ない?

リンクのアンカーテキスト分散割合。このラインを超えたら危険

ここ数日、リンクに関する投稿が多めです。 今日は、アンカーテキストの割合についてです。

記事を読む

サイトを多言語化する際の注意点

多言語化は気をつけないとコンテンツスパム?翻訳記事の扱いについて

2020年開催の東京オリンピックを控え、日本を訪れる観光客向けのサイト準備も重要度が増してき

記事を読む

 
 
2019年のSEO
2019年のSEO。私が頑張りたい4要素。

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑