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

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

   
 
   

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

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

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

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

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

隠しテキストとは?

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

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

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

<p>ここの文字が人には見えない</p>

<div style="margin-top:-100px;">
<p><img src="images/sample.jpg" /></p>
</div>

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

隠しリンクとは?

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

隠しリンクの具体的な例

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

p {
color: #000000;
}

a {
color: #000000;
text-decoration: none;
}

a:hover {
color: #000000;
text-decoration: none;
}

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

<script type="text/javascript">
<!--
document.write("Hello World!!");
// -->
</script>
<noscript>
<p>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
</p>
</noscript>

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

<iframe src="sample.html" height=1 width=1>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
</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ツールも多数公開されています。簡易なチェック方法として良いでしょう。

 

関連記事

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

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

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

記事を読む

こんなSEO企業が理想だね

理想のSEO企業とは?見極めるための4つの視点

皆さんはSEO企業と一緒に仕事をする際、どのような点を考慮しているでしょうか。 ミスマッチを避

記事を読む

ファイルの転送速度を上げるgzip圧縮

Page Speed Insightsの点数を上げる「圧縮を有効にする」の方法説明

昨年末に投稿したページ表示速度の改善方法【続編】内にて、gzip圧縮や画像の最適化について触れて

記事を読む

内部リンクの最適化方法は?

内部リンクを最適化しよう(実務者用ハイレベル)

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

記事を読む

2019年のSEO

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

昨年(2018年)は書くのを忘れました。今年は書いておこうと思います。情報を丁寧に書こうと

記事を読む

bとstrongの違い

bタグとstrongタグの違いをSEO観点とhtml(html5)観点で分かりやすく

今回はbタグとstrongタグ、その関連タグについて扱います。今回登場するタグは <

記事を読む

良いSEO会社の選定方法

目的にあったSEO業者の選び方

社内で実施せず外部に委託しようとなった際、どのように業者選定をすると良いのでしょうか。 SEO

記事を読む

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

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

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

記事を読む

発リンクは多いとダメ?

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

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

記事を読む

コンテンツ設計には、検索意図と本質的な希望の把握が大切

コンテンツ設計におけるサーチインテント(検索意図)と本質的な希望の違い

最近では、ウェブサイトの構築・メディアサイトの構築時に、各キーワードの検索数や難易度、ページ単位

記事を読む

 
 
no image
2022年サーチエンジンマーケティングと周辺の話

明けましておめでとうございます。2022年です。前回から2年経過です

2020年トレンド
2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始め

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑