AJAXを使用してLast.fmデータベースにクエリを実行し、HTMLキャンバスに結果のグラフを動的に描画するサイトがあります。検索機能には、window.location.hashを検索パラメーターに設定するコマンドがあります。また、URLにハッシュが提供されているかどうかを確認し、提供されている場合はページを生成する機能もあります。
たとえば、 http://www.thenlistento.com/#!/led+zeppelin は、Led Zeppelinの検索ページに自動的に移動します。
私の質問は、このセットアップをSEO用にどのように最適化するのですか?それはまったくできますか? Google Webmaster Docsを見て、hashbangプロトコルに目を通しましたが、自分の状況にそれを適用する方法がまったくわかりません。
どんな助け/提案でも大歓迎です。
サイトへのリンク: http://www.thenlistento.com
RL Rewriting と永続的な画像を使用して、ここで優れたGoogle SEOを取得できると思います。
http://www.thenlistento.com/bands-similar-to/led-zeppelin
URL RewritingまたはProxyを使用して、これを次のようにします。
http://www.thenlistento.com/#!/led+zeppelin
次に、上記のページに優れたメタ記述があることを確認してください。
誰かが実際にページにアクセスするとき、グラフも永続的な画像に変えて、ページ上でそれを再現する必要があります。 Bands-similar-to-led-zeppelin.png、おそらくテキストの横の上部のどこかでサイズを変更しました。
これにより、Googleにページに関するインデックスを作成するためのユニークな情報が提供されます。
ハッシュバンを使用して動的に取得する応答を提供するために、サーバーで「?_escaped_fragment_」を使用する必要があるように思えます。
たとえば、次のURLが要求された場合:
http://www.thenlistento.com/?_escaped_fragment_=/led+zeppelin
サーバーは、ここにアクセスして取得するコンテンツと同じコンテンツを提供します。
http://www.thenlistento.com/#!/led+zeppelin
これは、Led Zeppelinをデフォルト値として使用し、おそらく類似のアーティストの単純な順序付きリストをアニメーションの下のテキストとして使用することを意味する場合があります。クライアント側のコードは、入力ボックスのデフォルト値を調べて、何かがある場合はアニメーションをロードし、ない場合は何もしません。シンプルなテキストリストは、アクセシビリティの理由と、少なくともGoogleに噛み付くものを提供するのに役立ちます。
単純なソリューションではありません。要件を理解し、徹底的に吟味するためには多少の作業が必要です。
Ajaxのクロールに関するGoogle Developersのドキュメントは、それを実際に破壊しています。その情報を消化し、それを理解するだけです。
基本的に、Googleでその動的コンテンツをクロールする場合、ハッシュバンの代わりに_escaped_fragmentを使用して要求されたときに、そのコンテンツを通常のHTMLとしてレンダリングおよび表示する方法が必要です。これは、サーバー側で行う必要があります-Ajax応答の代わりにこれらのリクエストを異なる方法で処理するか、ヘッドレスブラウザーを使用してポストJavaScriptの結果を取得し、それらを処理します。