Moz - SEOとインバウンドマーケティングの実践情報

アクセシビリティとSEO共通の最適化――「隠しテキスト」「キーワードの詰め込み」

まずは「隠しテキスト」「キーワードの詰め込み」について解説

Moz 2016/9/26 7:00 SEO | 解説／ノウハウ

47 112 36

この記事の内容はすべて筆者自身の見解であり（ありそうもないことだが、筆者が催眠状態にある場合を除く）、Mozの見解を反映しているとは限らない。

検索エンジン最適化（SEO）が進化してきた背景には、次のようなものがある：

検索エンジンが、ウェブサイトの分類と順位付けを自動的に行うアルゴリズムを生み出し改善する動き
SEO業者が、こうしたアルゴリズムの抜け道を利用しようとする動き

一方、アクセシビリティは、支援技術（AT）によって人と情報を結びつけ、誰もが情報にアクセスできるようにしたいという願いから生まれた。

この2つの分野を、「機械によるウェブページの読み取り」という点に限って考えると、いくつか共通点が浮かび上がってくる。この記事では、この共通点について取り上げていく。

検索エンジンへの最適化を適切に行うことは、同時にスクリーンリーダーや支援技術を利用している人々のサイト体験にも影響を与えることになるのだ。

アクセシビリティとSEOを扱う今回の記事では、人の目には見えなくても機械には見えるテキスト、色、リンク、コンテンツの書式設定といったページの要素について深く掘り下げる。

なお、前回の記事では構造における共通点について取り上げたが、今日の記事に続く次回の記事では、画像、動画など非テキスト要素をテーマとする予定だ。

※Web担編注：今回の記事以外の翻訳は未定。この記事の人気によって判断します。

隠しテキスト

インフォグラフィックの多くは、情報が画像として記載されているため、ページ上の情報やコンテキストを、ボットやスクリーンリーダーが読めない場合がある。テキストやグラフ、さらにコンテキスト全体がすべて画像の中にあるからだ。

こういう場合、スクリーンリーダーやボットが理解できるように、情報やコンテキストを「テキスト形式」で提供する必要がある（目に見える形であれ見えない形であれ）。

「テキスト情報」を、目に見えるすべての画面から意図的に隠しながら、ボットやスクリーンリーダーには読めるようにしたい理由は、他にもいろいろあるだろう。

たとえば、マーカーをクリックしたときにだけ新たな段落の文章が表示されるような場合だ。

図内の丸で囲んだ部分をクリックすると、隠れていた情報が表示される。

デフォルトでは、マーカーがクリックされるまでは、この文章は表示されないように隠しておきたい。しかし、スクリーンリーダーやボットに関しては、何もしなくてもこの文章を認識できる状態にしたい。

次の表は、さまざまな手法の隠しコンテンツが、「視覚障害のないユーザー」「スクリーンリーダー」「検索エンジン」からどのように認識されるかを示したものだ。私はアクセシビリティのエキスパートではないため、間違っている点や追加すべき点があれば知らせてほしい。

隠しテキストの手法	それぞれの手法でデフォルトのコンテンツを見られるのは？
隠しテキストの手法	視覚障害のないユーザー	スクリーンリーダー	Google^※ （リンク先は各手法のGoogleキャッシュの例）
CSSのvisibility:hidden	見えない	見えない	見える
CSSのdisplay:none	見えない	見えない	見える
CSSのtext-indent:-10000	見えない	見える	見える
CSSのclipプロパティ	見えない	見える	見える
CSSのpositionプロパティで画面から隠す手法	見えない	見える	見える
HTML5のhidden属性	見えない	見えない	？
aria-hidden="true"	見える	見える（一部）	？

※こうした隠しテキストの手法をスパム目的のためだけに使用することのないように強く注意喚起したい。

現在は、Googleが隠しテキストをインデックス化したとしても、隠されていないテキストと同じように重み付けしたり、検索順位のために考慮したりすることはない。

また、隠しテキストが悪用されたり、手作業での確認が必要になったりした場合は、困った事態に陥る可能性がある。

隠しテキストに関して、実際によくある例を2つ取り上げてみよう。

インフォグラフィック用のテキスト ―― 主要なコンテンツが画像に含まれているため、スクリーンリーダーやボットが利用できるよう隠しコンテンツを作る必要があるケース。
隠し補助テキスト――主要なコンテンツがデフォルトでは表示されないようにしながら、スクリーンリーダーやボットには見つけられるようにしたいケース。

それぞれについて解説する。

インフォグラフィック用のテキスト

SEO担当者が好むであろう例は、インフォグラフィックの情報やコンテキストをスクリーンリーダーやボットに提供する場合だ。最も簡単なやり方は、この例のように、ページ上でインフォグラフィックの下にテキストを追加することだ。

だが、これらの例を作成したテッド・ドレーク氏はアクセシビリティの専門家であり（この連載記事やアクセシビリティ全般に関する私の取り組みにとって、彼の支援は欠かせないものとなっている。ありがとう、テッド）、情報を視覚障害のないユーザーに見えない形でスクリーンリーダーやボットに提供する別の方法も、ここでは提示している。

具体的には、インフォグラフィックは、このページにiframe要素によって埋め込まれており、iframeで読み込んでいるコンテンツには、テキストも含まれているのだ。

このインフォグラフィックを共有する場合、同様にiframe要素を組み込むことで、インフォグラフィックの画像だけでなくすべての説明文をコンテンツに含められる。

ちなみに彼は、インフォグラフィック上のコンテンツを読める視覚障害のないユーザーには説明文を隠し、インフォグラフィックを理解できないスクリーンリーダーやボットは説明文にアクセスできる別バージョンのページも作っている。

確認してみてほしい。このページは、Googleで「The days are longer, but you're still not able to find time to plan those much-needed getaways.」というインフォグラフィックテキストで検索すると表示される。だが、このテキストはページ上に目に見える形では表示されていない。

補足：テキストがページ上に表示されているバージョンよりも、テキストが表示されていないバージョンの方が、検索順位が高いことに注意してほしい。

※本文の記述にあわせてWeb担編集部で確認・キャプチャしなおしたもの（原文と画面キャプチャが異なる）

この上位に表示されている隠しテキストバージョンでは、インフォグラフィック自体は別のHTMLページ上で提供されている画像だが、テキスト情報は1ピクセルのCSSクリップに記述されており、そのテキストがiframe要素を介して検索結果のページに読み込まれている。

一見したところ、iframeで埋め込まれているページには画像しかないように思われるが、HTMLコードを見ると、コンテンツをクリップするCSSの「visually-hidden」クラス内にテキストが隠されている。また、セマンティックなマークアップによって、このテキストは、スクリーンリーダーのユーザーが読んだりコピーしたりできるものになっている。ページ上に直接テキストを記述する方法に代わる、非常に便利でインタラクティブな方法だ。

Mac OS X搭載のスクリーンリーダー、VoiceOverを使ったときの動作は次のようになる。

これを読んでいるスパム志向のSEO担当者が期待を高めることになるのはわかっている。ここで、Googleでスパム対策にあたっている担当者もこの手法は承知しており、この具体例さえ知っているということを指摘しておきたい。

彼らは、隠しテキストスパムに対するGoogleの対策は強力だと自信を持っているし、私としては良心に恥じるところなくこの例を紹介しているのであって、これでスパム行為はしないようにと釘を刺しておきたい。

Googleは常に監視している。この手法は、アクセシビリティのため、特にインフォグラフィックをテキストとともに共有するためにあるのだと、ぜひ認識してほしい。

隠し補助テキスト

視覚障害のないユーザーに一部の文章を表示し、マーカーやボタンをクリックさせることで、ユーザーが望んだときにだけ追加の文章を表示させる場合がある（望まなければ、最初の文章に目を通しただけで、ページの他の部分に移っていける）。

私が以前監査したサイトでは、この機能を（視覚障害のないユーザー向けに）実装していたが、コーディング方法のせいでコンテンツがインデックス化されていなかった。

この目的に利用できるのは、CSSの「display:none」だ。デフォルトで非表示にする文章にこのプロパティを使えば、追加の文章はスクリーンリーダーのユーザーや最初のテキストしか読まないユーザーには表示されなくなるが、キャレットやリンクをクリックすれば表示できるようになる。

次の例はNetflixのヘルプページで、コンテンツを展開してアクセスしない限り、そのコンテンツは視覚障害のないユーザーとスクリーンリーダーのどちらにも表示されない。このページでは、「display:none」がCSSで使用されている。このキャレットのコンテンツは、スクリーンリーダーも視覚障害のないユーザーもアクセスできるうえ、検索エンジンによってインデックス化されている。三者いずれにも好都合だ。

隠しテキストですべきこと、すべきでないこと

隠しテキストをスパム目的で使ってはいけない ―― SEO担当者としてうまくやっていこうと考えているなら、隠しキーワードをページに埋め込むことはお勧めできない。また、スクリーンリーダーユーザーをひどい目に遭わせる可能性がある。
視覚障害のないユーザーとあるユーザー、双方を考慮しよう ―― テキストを隠す必要がある場合は、スクリーンリーダーには見られて視覚障害のないユーザーには見られないようにするのか、すべてのユーザーに見られないようにするのかによって、どの手法を使うのが最適かを検討しよう。

キーワードの詰め込み

キーワードの詰め込みは、一般的にはもはや古びたSEOの手法だが、いまだに利用されている。

この手法がよく使われているのは、過去も現在も、「画像を多用するサイト」と「古いFlashのページ」だ。また、標準的なコンテンツのページであっても、開発者がテキストベースのキーワードを増やしたいと考えた場合によく使われている。

これは検索エンジンのためだけの行為であり、スクリーンリーダーではない訪問者がやってきたとしても、何も問題はない。

うれしいことに、最近ではキーワードの詰め込みの露骨な例は見つかりにくくなっている。そのため、@Joeartdotcomが、典型的な例として2007年のパタゴニアのアーカイブを送ってくれた。

ここには、1枚の大きな画像があるだけでコンテンツはほとんどなく、検索インデックス用のページ説明テキストが大量に記述されている。スクリーンリーダー（ChromeのChromeVoxやFirefoxのFangs）でこのページを読み上げてみてほしい。視覚障害のないユーザーは、Wayback Machineに保存されたページでこのテキストを見て、自分で読み上げてみることもできる。また、下の動画で聞くことも可能だ。

2016年現在、キーワードの詰め込みは、2007年当時ほど大きな問題にはなっていないと思いたいところだ。しかし、今も利用可能な方法であり、利用すればスクリーンリーダーのユーザーをわずらわせる可能性が非常に高い。

キーワードの詰め込みですべきこと、すべきでないこと

作成前によく検討する ―― そもそも検索エンジンの注目を得るためだけにキーワードを作成するような状況は避け、インデックス化されやすい適切な情報が掲載された、アクセスしやすいページを作成しよう。
自然体で記述する ―― 誰にとってもこれがベストなやり方だ。キーワードを悪用するのではなく、適切に利用すればいい。

この記事は、前後編の2回に分けてお届けする。後編となる次回は、「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について説明する。→後編を読む