背景色を変えた時は、ウェブマスターガイドライン違反となる隠しテキストにご注意下さい

サイトの背景色を変えるだけでも、サイトを見た時の印象が違うことも少なくありません。季節に合わせた色に変更したり、サイトのイメージチェンジをしてみようと考えて、サイトに使用しているテーマを変えたり、テーマの背景色を変えることもあります。

テーマの色を変更した時にヘッダーやフッター、コンテンツ内の一部のテキストの色と背景色が偶然、似た色調になってしまうことがあります。テキストが背景と同系色になると、文字やリンクが隠れてしまうことになります。この様な背景と同じ色でテキストやリンクが隠れてしまっている状態は、隠しテキストと隠しリンクと呼ばれています。

隠しテキスト・隠しリンクとは

隠しテキストや隠しリンクは、Googleのウェブマスター向けガイドラインの違反となる行為です。以下は隠しテキストの例です。

白の背景で白のテキストを使用する

テキストを画像の背後に置く

CSS を使用してテキストを画面の外に配置する

フォントサイズを 0 に設定する

小さな 1 文字（段落中のハイフンなど）のみをリンクにしてリンクを隠す

隠しテキストと隠しリンク – Search Console ヘルプ

検索キーワードをページ上に隠しておくようなスパム行為を禁止するためのガイドラインなのですが、背景色などを変更すると、意図せずに隠しテキストとなってしまうことがあるので、注意が必要です。

テーマの色を変えたために隠しテキストになってしまう例

先週、関連フォーラムサイトのブロギングライフBBのテンプレートの背景色を変更しました。後で、フッターのテキストやリンクが背景色と同系色で、隠しテキストの状態になってしまっていることに気づきました。下の画像の赤の下線部が隠しテキスト・リンクになっている箇所です。

モバイルページでも同様の状態です。

注意事項：
テンプレートがレスポンシブデザインの場合は、背景色を変えた場合、モバイルとデスクトップ両方で隠しテキストができます。モバイルかデスクトップの端末のどちらでも同じ状態となるため、比較的見つかりやすいです。一方、モバイルとデスクトップが異なるテンプレートデザインの場合は、どちらか片方で隠しテキストの状態になってしまうことがあります。見つかりづらいことがあるので、背景色を変えた時は注意が必要です。

隠しテキストの見つけ方

基本的には、ブラウザーでページを表示して、一通り目視でテキストが背景と同系色になって隠れている、見づらくなっていないか確認するのが基本です。

“Ctr + A” （Windows系）、”Command + A”などのショートカットキーで、コンテンツを全て選択するとページ上のテキストなどがハイライトされるので、見つけやすくなることもあります。(上の画像と比較すると、テキストの背景色がハイライトによって変わるため、隠れているテキストが見えます。）

隠しテキスト対処後

テキストとリンク時の色などを調整して、フッター部のテキスト色が背景とコントラストになるように変更しました。

隠しテキストの苦い思い出

先にお断りすると、かなり前の話です。2012年頃、ある日突然、サイトを訪問するユーザーの数が激減しました。翌日にはさらに訪問者が減り、通常の三分の一以下になりました。一体何が起きたのだろうと思い、サイトへの訪問が多い検索クエリ（キーワード）を使用して検索してみると、それまで上位に表示されていた検索クエリで、運営するサイトのページが表示されなくなっていることに気づきました。

翌日には、状況はさらに悪化して、サイト名で検索する以外には検索で表示されることはない状態にまで陥りました。一体何が起きてしまったのだろうと、必死に原因を探しました。2週間以上、懸命に問題を調べ、最終的にある1ページの中の文章がモバイルページで隠れてしまっていることに気が付きました。そのようなテキストが背景で隠れる状態は、隠しテキストと呼ばれる禁止事項だとその時に知りました。

そのサイトは、Bloggerを使用しており、パソコンの背景は黒、モバイル端末の背景はライトブルーに設定していました。ある時、文章の一部をハイライトさせるためにフォント色をライトブルーに変更しました。黒の背景にライトブルーの文字は、目立ちながらも過度ではなく、見やすくなったと思っていたのですが、モバイル端末で表示するとその箇所が背景に隠れてしまっていることに気が付きました。

すぐに文字色を変更しました。数日後から徐々にアクセスが戻りだしましたが、以前のアクセスに戻るまでに2ヶ月近くかかりました。今でもその時のことはトラウマとして記憶に残っています。

後で知ったのですが、隠しテキストはキーワードなどを隠して設置して検索ランキングを上げる手法として、過去（本当に昔）に流行ったことがあったそうです。しかし、現在は隠しテキストはSEO的に問題であることは明確となっているため、避けるべき手法であるとの認識が広まっています。

上に書いた経験は6年前のことです。当時と今では状況がかなり変わってきています。最近は、ページ上に隠しテキストがあっても、検索アルゴリズムの方でその部分を無視するようになっていると、John MuellerさんがWebmaster Central office-hours hangoutで話をされているのを見たことがあります。（見つけたら、該当部を添付します。）

隠しテキストがあっても、以前ほど厳しい対処はされなくなっているようですが、ウェブマスター向けガイドラインの違反であることは変わりません。また、ユーザーに対しても適切ではないので、隠しテキストができないように十分注意を払う必要があります。

テンプレートの色を変えたりした時は、隠しテキストができてしまっていないかご確認されることをお勧め致します。