さらなる「#!」URL批判

このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/
以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。

lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。

#!について

  • 「#!」は何で呼ぶの？ shebangと綴られる。
    • Hash=# Bang=!の略
    • 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係)
  • 以下「#URL」は：
    • サイト内のロケーション情報を#の後に置いてJavaScriptとナビゲートする構造を言う
    • 例: http://lifehacker.com/#!5753509/hello-world-this-is-the-new-lifehacker
    • ページ内のセクションを#fragで指す伝統的な使い方はその対象外
  • #!
    • グーグルが公開した#URLをクロールできるようにするスペックのこと
    • #URLの殆どは#!と表記されているで#URLと#!URLã‚’interchangablyに呼んでいる。

#!の短い歴史

  • #フラグメントでAjaxアプリの状態をURLバーに表示するというのは少くとも２年前から行われている
    • 当時一緒にサイト作りをやっていた奴がflickrがこれやっているのを発見して興奮してこの手法を使いたがっていたのを覚えている
  • 上の手法が広がるがクローラがアクセスできないので、サイトはSEO効果を失いGoogleはコンテンツを失なうことになる
  • GoogleはボットにJavaScriptによるナビゲーションを理解させようとしたが断念
    • これは憶測。証明するURLはないが、クローラを営んでいるところは大抵試みるものだ。JavaScriptをナビゲートするのはGoogleできなかったようだ。
  • BotによるJavaScriptナビゲーションを諦めたグーグルのエンジニアは渋々「#!の後をクエリストリングとして渡すからそれに相当するコンテンツを返せ」というspecを公開した。
  • これを#!に対するGoogleの奨励と勘違いしたデベロッパーたちは#!URLを「唯一の真実の道」として歩み始める

Googleの警告

Googleは上記の#!スペックで"progressive enhencement"を奨励している。まず、基本的なURLとHTMLでナビゲーションできるようにする。さらにユーザの体験を向上させたかったらその上でJavaScript・AJAXを使う。これらが揃っていない環境(クローラやJavaScript非対応ユーザエージェント)などでもコンテンツがアクセスできることが原則のサイト作りを奨励している。

なんか勘違いしているんじゃない？

つまり、#!はサイトのアーキテクチャを根本的に間違え(GoogleBotに見えなくなりSEO効果を逃し)たサイトに投げられた命綱だ。しかしFacebook、TwitterそしLifehackerなどのデベロッパはこの命綱をゴーサインと勘違いして#!街道を爆進しはじめた。

lifehacker URLの変遷

あまりカッコよくない。なんか昔のaspのURLみたい。10年にわたるクリーンなURLの実績を捨ててASPサイトのような醜いURL構造にしたことになる。全然綺麗なURLなんかじゃない。googleの#!スペックでは#!URLを「綺麗なURL」と呼んでいるがその背後には汚いものが潜んでいる。

#!サイトの問題

  • GoogleBot以外の(#!スペックに準じていない)クローラ、アグリゲータなどのボットがサイトをコンテンツをアクセスできなくなる
  • ブラウザ外のキャッシュができなくなる (これは深刻)
  • Microformatsが使い難くなる
  • FacebookのLike widgetsなどが難しくなる
  • Refererにページレベルの情報が無くなる (これも深刻だ)

完璧なJavaScriptに依存するコンテンツ

  • エラーのない完璧なJavaScriptがないと何も見れなくなる
  • lifehacker等の月曜の5時間のダウンタイムはJavaScriptのエラーによるものだった
  • arrayの終りに,が残っているだけでIEユーザには真っ白な画面しかみえなくなる
  • デベロッパがconsole.logを間違えて残してしまうと殆どのユーザが真っ白な画面を見ることになる
  • サイト管理者のコントロール下にない広告のJavaScriptにエラーがあるとコンテンツが見れなくなる

以下テングの結論

結論1: gmailみたいに個人情報を扱うアプリなら#!使ってもいい

  • gmailみたいにプライベートな情報を扱うアプリなら#URL使ってもよし。誰でも見れる情報系サイトでは#URLは使わない方がいい。
    • ただし、こういう状況だと#!も必要なくなるね
  • #URLはgmailのようなajaxアプリケーションがその状態をURLバーに表示するときに使う
    • そうするとブックマークできるようになるらしい
  • パスワードに守られユーザ特有の情報だけを持つアプリケーションの場合は#で状態管理するのはアリ
  • プライベート情報の場合クロール・キャッシュ問題、JavaScriptへの依存などの#URLの弊害が適応しないから

結論2: 情報公開系サイトでは#!を使わない方がいい

  • アプリケーション以外、特にテキストやメディアをパブリックに公開する出版系サイトでの#URLの利用はナンセンス
  • JavaScript(広告による第三者のバギーなものも含めて)が完璧でないと静的なコンテンツまで表示できないことになる
  • #!スペックでGoogleBotはクロールできるが、これに準じていないボットには見えなくなる
  • ブラウザ外でキャッシュできない
  • Refererがサイト内のロケーション情報を失う

そもそも出版系サイトにおける#URLの意味がわからない。HTML再ロード無しにページを変えて、それをURLバーに表示したいから？ それって、HTMLのロードが重いサイトのパフォーマンス問題をajaxカバーするためのまやかしなんじゃない？ 理由はともあれ、#URLの乱用に対するバックラッシュは英語圏ブログ界や日本でも感じられる。
若いデベロッパーはとにかく新しいものに飛び付く傾向があって、そのお陰、進歩があっていいんだが、「URLとドキュメントの対応」という昔からの原則に少し恐れを抱いた方がいいと思う。

最後に:「コンテンツがcurlでロードできなければそのサイトは壊れている」-Ben Ward

反応