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となり、ほぼギリギリです。
下へ色々なカラーで色差を調べた結果を掲載します。参考にしてみてください。
ここまで見てもらって、明度差と色差を推奨値にすることはかなりデザインの幅を制限することにお気づきになるでしょう。
文字と背景は黒と白の組み合わせがSEO上は推奨です。デザイナー泣かせとなるかもしれませんが、より多くのユーザーにデザインを見てもらう上では、色弱の方にも優しいデザインが求められます。
また、紙媒体と異なりWEBデザインはユーザーの環境により見え方が異なる点に注意が必要です。
(これはブラウザやOSに起因するものではなく、モニタ環境や室内外でのサイト閲覧環境を指しています。)
明度差と色差をチェックするツールとしてカラー・コントラスト・アナライザー(クリエイティブ・コモンズライセンスにより配布)等が有名です。上記リンクはGitHubです。
明度差と色差の計算式については利用する機会がないかと思いましたので割愛しました。
明度差などを確認できるwebツールも多数公開されています。簡易なチェック方法として良いでしょう。
関連記事
-
-
SEO効果の高いURLの決め方。日本語?英語?数字?長さは?
もしあなたが、新規にホームページやブログを立ち上げるタイミングで、ドメインやファイル名の決定
-
-
URLの正規化はSEOの基本(wwwありなし・index.htmlありなしの統一)
今回のテーマは『URLの正規化』です。 運営開始から間もないサイトでも、運用歴の長いサイト
-
-
検索エンジンはExif情報(画像ファイルのプロパティ)を取得しているかの実験
今回は画像ファイルにあるExif情報を検索エンジンは読み込み、検索結果を決定する上で使用して
-
-
SEOコンサルタントとはどんな仕事?(弊社サービス紹介も少し)なるには要件や資格が必要?
SEOコンサルタントになろうか考えている方、SEOコンサルタントを雇うべきか考えている方のご参考に
-
-
【SEO要素】発リンクは多すぎるとペナルティーを受けるのか
2009年頃までは発リンクはページあたり100本までと言われていました。というのも、Goog
-
-
多言語化は気をつけないとコンテンツスパム?翻訳記事の扱いについて
2020年開催の東京オリンピックを控え、日本を訪れる観光客向けのサイト準備も重要度が増してき
-
-
検索に引っかからない時、サイト管理者が確認すべきこと
あなたのサイト(ホームページ)やブログが検索エンジンに引っかからない場合、このポストにそいチ
-
-
SEOに効く404エラーページを作成しよう!WordPress設定の仕方も
古いページを削除したため404エラーが発生している場合や、誰かが張ってくれたリンクのパスが誤
-
-
サイトの表示スピードを上げるぞ!CSS・js圧縮、画像最適化でどの位早くなるかな?
ブラウザからサイトを閲覧する際には、CSS(カスケーディング・スタイル・シート)やjs(ジャバス
-
-
トップダウンペナルティー(TDP)とトップページが上位表示しない場合の対処法
YSTのトップダウンペナルティー、Googleのトップダウンペナルティーで大慌てなサイト管理