backbone.js - Backbone.jsにより、ルーターがSEOに対応します

Question

私はbackbone.jsを初めて使用するので、これは簡単な質問かもしれません。

ルーターは意味的に意味のあるURLを使用しているようですが、あまりユーザーフレンドリーではありません。

私が見た例では、彼らは以下を使用しています。

local.com/post/id/1

しかし、ワードプレスでは、これを次のように書き直すことにします。

local.com/2012-11-03-backbone-js-router-question.html

これは大きな書き換えテーブルを介して実行され、適切なコントローラー/アクションに変換されます。ルーターをそのような目立つユーザーに公開したくありません。

この質問に対する私の最後のアプリケーションは、eコマースを念頭に置いています。

cmsページlocal.com/about-us.html
製品ページlocal.com/blue-tooth-headset.html
カテゴリページlocal.com/phones.html
カテゴリページによる製品local.com/phones/blue-tooth-headset.html

だから私の質問は、backbone.jsを使用しているときにどのようにしてきれいなURLを取得するのでしょうか？

オプションについての私の考えは次のとおりです。

あなたはseoフレンドリーなURLを取得しません
あなたはいくつかの巨大な地図を持っています、そしてそれはクライアントの上に座らなければなりません:(
URLを変更しようとするたびに、pretty-urlをすばやくajaxで検索し、pretty-urlが返されるのを待ってからpushStateを実行する必要があります。
セクションの前には文字が付いています。つまり、local.com / p / product-name.htmlであり、pは実際にはどのルーターを区別するのに役立ち、別のルーターはカテゴリのcになります。

score 4 · Accepted Answer

バックボーンルートはほとんど何でもかまいません。eコマースについては、単語の多いURLを使用する必要があります。

<category>/<product-name>
television/samsung-i178

しかし、それは実際にはSEOに関してあなたが気にかけるべきことではありません。Googleは、昨年の「パンダ」の更新後、URLキーワードの価値を大幅に減らしました。

本当に考慮すべきことは、JavaScriptが有効になっていない場合でも、フォールバックとコンテンツがページに提供されるようにすることです。しかし、問題は、サイトを2回コーディングしたくないということです。フロントエンドのテンプレート/ページングエンジンと、バックエンドの同じものです。

node.js（Mojito、Meteorなど）を使用してこの問題を活用するのに役立つ今後のテクノロジーがありますが、現時点では、それらは最も安定したプロジェクトではありません。そして、これらを本番環境で使用するのは少し早いかもしれません。サーバーを稼働させ、必要に応じてそれらのプロジェクトをデバッグするための本当に有能なチームがいない場合。

とにかく、私が言いたいのは、プロジェクトでSEOの重みが大きい場合は、バックボーンを使用しないでください。

編集： あなたがあなたの質問に何を追加するかについて、私はそれを概念化するのはかなり簡単だと思います。

バックボーンでは、次のように可変ルーターを使用します。

routes: {
  "product/:url" : "product" 
}

product: function( prettyUrl ) {
  console.log( prettyUrl );

  // Then you fetch your server
  server.fetch( prettyUrl );
}

次に、サーバーデータベースで、次のような製品のかなりのURLでデータベースをフェッチしますSELECT * FROM product WHERE prettyurl=$prettyURL（またはこれに似たもので、mySQLを使用してから長い時間がかかりました）。

このように、クライアント側でマップを保持する必要はありません。サーバーから提供されたきれいなURLを使用するだけで、完全な製品を取得できます。

したがって、コレクションで呼び出すfetchと、サーバーは次のように戻ります。

{
  id: 1,
  name: "Product XYZ",
  prettyUrl: "product-xyz"
},
{
  id: 2,
  name: "Mac Book Pro",
  prettyUrl: "mac-book-pro"
}

このように、すべてのきれいなURLは、ルーターではなく、彼のモデルで管理されます。そして、それは間違いなくそのようなURLを管理するための方法です。そして、それはほとんどの場合、WordpressやDrupalのやり方です。彼らだけがバックエンド側でそれを行います。

score 2 · Accepted Answer

バックボーン内でURLをきれいに保つことができるHTML5のみのソリューションがあります。

pushStateを設定してBackbone.historyを初期化します。 http://documentcloud.github.com/backbone/#History-start

注意：

If your application is not being served from the root url / of your domain, be sure to tell
History where the root really is, as an option:
Backbone.history.start({pushState: true, root: "/public/search/"})

次に、history.navigateを次のように呼び出します。

navigateToTodo () {
    Backbone.history.navigate('/todos/' + this.model.toJSON().id, {trigger: true});
    return this;
},

または、アプリ全体で従来のhrefリンクを使用します。

ここでの例と説明： HashbangsからHTML5PushStateへ

IEのフォールバック：IEのフォールバック

編集：しばらくして、同じような問題に頭を悩ませた今、私はあなたの質問を理解していると思います。あなたが望むのはバックボーンとは関係ありませんそれはこのようなテキストを変換することです：

"Marissa Mayer can't stop acquiring things" to this "marissa-mayer-can-t-stop-acquiring..."

**バックボーンがあなたのためにこれを行っていると思っていたので、あなたの質問は誤解を招きますが、そうではありません。したがって、答えは次のとおりです。必要なのはUrlifyです（他にもありますが、私の経験ではそれほど良くありません）。

https://github.com/aliem/urlify

-これを検索した人を助けたようですので、古い答えは残しておきます-

backbone.js - Backbone.jsにより、ルーターがSEOに対応します

2 に答える 2

Related

Reference