BLOG MENU

クローラリビティとは？GoogleのSEO・クローラーを意識した画面設計

皆さんがよく使うGoogleやYahoo!などの検索エンジンではクローラーと呼ばれるプログラムが、あらゆるWebサイトからページを収集しています。クローラーが収集したページを検索表示アルゴリズムでランキングされ、皆さんがよく見る検索結果が表示されています。

クローラーがWebサイトのページを収集しやすくすることをクローラビリティと言います。Webサイトのページに辿り着けないと検索エンジンに収集されないことになるため、当然インデックスもされません。

クローラーがページを収集できるように、リンクを貼れば良いじゃない？と思われた方、素晴らしい、かなりWebサイトに関する知識が高いです！
では、ワイヤーフレーム設計する際、どのような形でクローラビリティを考慮する必要があるのかを紹介したいと思います。

検索結果を表示する時、クローラビリティを考慮する

検索結果ってSEO対策に関係あるのでしょうか？

HR、旅行、賃貸、グルメなどマッチングサイト、商品検索など検索結果がSEOのLP（ランディングページ）になるケースが多いです。特に「地域名×サービス」「ブランド×商品カテゴリ」など直接コンバージョンに結びつくワードが多くあります。
例えばグルメサイトで「渋谷×寿司」など検索したことがあると人も多いと思います。

何故この検索結果でクローラビリティを意識したワイヤーフレームが必要になるのかご紹介します。
例えば地域を選択する時に「地域を探す」というリンクを貼るとします。そして、遷移したページで「都道府県を選択」と言うプルダウンボタンがあり「東京都」を選択、次に「市区町村を選択」で「渋谷区」を選択します。
クローラーは、「地域を探す」のリンクを辿って検索結果ページへとたどり着きます。しかし、プルダウンは遷移しませんのでクローラーは巡回できずに検索結果のページで止まります。「東京都」以下のページは収集できずに検索結果に反映されなくなります。

では、どうすればクローラーが「渋谷区」のページにたどり着くのでしょうか？
答えは簡単！リンクを貼れば良いです！
関東→東京→渋谷区のリンクをクローラが辿れるようにします。これはワイヤーフレーム設計時にやっておかないと、誰も気づかずにそのままスルーしてしまいます。

非同期通信で表示する時、クローラビリティを考慮する

非同期通信はJavaScriptとJSONでよく実装されます。JavaScriptで実装するときは特にリンク構造に注意をしましょう。

HTMLとは別に外部ファイルとしてJavaScriptを呼び出すケースが多いです。非同期通信の場合はリンク構造もJavaScriptの内部に記述するケースが多いため、クローラーはリンクを辿れなくなります。

そんな時はHTMLにJavaScriptを直書きするか、リンク構造だけHTMLに記述して「document」オブジェクトを活用してHTMLの要素をJavaScriptで取得して表示させましょう。

この内容は画面設計にも反映できないため、必ず画面設計書のどこかに仕様として残しておきましょう。ある意味、JavaScript内で処理する方が通常の実装方法なので、SEOを考慮できないエンジニアが実装をすると、いっさいクロールされないページになってしまうので注意が必要です。

検索にない項目のSEO画面設計

例えば、アルバイトのマッチングサイト、画面設計をしている時、「カフェ」や「カラオケ」などフリーワードでしか表示されない画面でも、キーワードとしてはニーズが高いなどのワードもありますね。

このキーワードも「カフェ×渋谷」などのワードがコンバージョンに繋がります。その時は基本的には「カフェ」というワードのリンクをTOPページに設置します。よくあるパターンとしては以下の３パターンがあげられます。

「カフェ」特集などレコメンドアルバイトとしてTOPにリンクを設ける
「よく検索されているキーワード」などでリンクを設ける
タグなどを利用してリンクを設ける

色々なウェブサイトを見るとこのようなリンクが貼られているケースが多く見受けられます。クローラビリティではリンクが重要ですが、ユーザビリティを損ねるようなリンクは避けましょう。不要なリンクはGoogleからマイナスの判定を受けることもあります。

画像でリンクを貼る、alt属性のSEO効果

画像からリンクを貼るときに「alt属性」で問題ないかの議論をよく聞きます。基本的には「alt属性」は画像表示時に利用するHTMLタグのimg要素です。簡単に言ってしまえば画像の情報となります。

ではリンクではないのかと言うと以前Googleのサポートページに以下のような記述があります。

この属性を使用するのは、ユーザーがスクリーンリーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。
もう1つの理由は、画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカーテキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。最後に、画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。

Googleでは「alt属性」はリンクと見なしていると言っています。クーシーでも画像に「alt属性」を付けることは推奨しています。しかし、ナビゲーションを画像などで表示して「alt属性」を付ければ良いとは考えていません。

SEOはHTMLのソースコードをクローリングして取得するものであり、HTMLの構造化を無視しているためです。みなさまご存知の通り、Googleのアルゴリズムは日々変化します。基本に忠実なHTMLを構築することをお勧めいたします。
いかがでしたか？ただリンクを貼るだけですが、画面設計で意識しないとSEO対策ができなくなります。もちろんリンク構造だけでなく、最近では特にユーザビリティの必要性が高まっています。両方意識した良い画面設計を心がけましょう。