「シングルページ」JSウェブサイトとSEO 質問する

開発者にとっては、2 番の方が「簡単」かもしれませんが、検索エンジンのクロールしか提供されません。また、Google が別のコンテンツを提供していることを発見した場合、ペナルティを受ける可能性があります (私はその分野の専門家ではありませんが、実際に起こったという話は聞いたことがあります)。

SEO とアクセシビリティ (身体障がい者だけでなく、モバイル デバイス、タッチ スクリーン デバイス、その他の非標準コンピューティング/インターネット対応プラットフォーム経由のアクセシビリティ) はどちらも、同様の基本理念を持っています。つまり、さまざまなブラウザーすべてに対して「アクセス可能」(つまり、アクセス、表示、読み取り、処理、その他の使用が可能) な意味的にリッチなマークアップです。スクリーン リーダー、検索エンジン クローラー、または JavaScript が有効になっているユーザーは、すべて問題なくサイトのコア機能を使用/インデックス作成/理解できる必要があります。

pushState私の経験では、この負担が増えることはありません。これは、これまでは後回しにし、「時間があれば」と考えていたことを、Web 開発の最前線に持ち込むだけです。

オプション 1 で説明した内容は、通常は最善の方法ですが、他のアクセシビリティや SEO の問題と同様に、pushStateJavaScript を多用するアプリ内でこれを実行するには事前の計画が必要であり、そうしないと大きな負担になります。最初からページとアプリケーションのアーキテクチャに組み込む必要があります。後付けは面倒で、必要以上に重複が発生します。

最近、いくつかの異なるアプリケーションで SEOに取り組んできましたpushStateが、良いアプローチだと思われるものを見つけました。基本的には項目 1 に従いますが、HTML / テンプレートが重複しないように考慮されています。

ほとんどの情報は、次の 2 つのブログ投稿で見つかります。

http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/

そして

http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/

要点は、ERB または HAML テンプレート (Ruby on Rails、Sinatra などを実行) をサーバー側レンダリングに使用し、Backbone が使用できるクライアント側テンプレートと Jasmine JavaScript 仕様を作成することです。これにより、サーバー側とクライアント側の間のマークアップの重複が排除されます。

そこから、サーバーによってレンダリングされた HTML で JavaScript が機能するように、いくつかの追加手順を実行する必要があります。これは、配信されたセマンティック マークアップを取得して JavaScript で拡張する、真のプログレッシブ エンハンスメントです。

たとえば、私は を使って画像ギャラリー アプリケーションを構築していますpushState。/images/1サーバーからリクエストすると、サーバー上の画像ギャラリー全体がレンダリングされ、HTML、CSS、JavaScript がすべてブラウザーに送信されます。JavaScript が無効になっている場合は、完全に正常に動作します。実行するすべてのアクションはサーバーに異なる URL をリクエストし、サーバーはブラウザーのすべてのマークアップをレンダリングします。ただし、JavaScript が有効になっている場合は、JavaScript は既にレンダリングされた HTML とサーバーによって生成されたいくつかの変数を取得し、そこから処理を引き継ぎます。

次に例を示します。

<form id="foo">
  Name: <input id="name"><button id="say">Say My Name!</button>
</form>

FooView = Backbone.View.extend({
  events: {
    "change #name": "setName",
    "click #say": "sayName"
  },

  setName: function(e){
    var name = $(e.currentTarget).val();
    this.model.set({name: name});
  },

  sayName: function(e){
    e.preventDefault();
    var name = this.model.get("name");
    alert("Hello " + name);
  },

  render: function(){
    // do some rendering here, for when this is just running JavaScript
  }
});

$(function(){
  var model = new MyModel();
  var view = new FooView({
    model: model,
    el: $("#foo")
  });
});

<ul id="user-list">
  <li data-id="1">Bob
  <li data-id="2">Mary
  <li data-id="3">Frank
  <li data-id="4">Jane
</ul>

UserListView = Backbone.View.extend({
  attach: function(){
    this.el = $("#user-list");
    this.$("li").each(function(index){
      var userEl = $(this);
      var id = userEl.attr("data-id");
      var user = this.collection.get(id);
      new UserView({
        model: user,
        el: userEl
      });
    });
  }
});

UserView = Backbone.View.extend({
  initialize: function(){
    this.model.bind("change:name", this.updateName, this);
  },

  updateName: function(model, val){
    this.el.text(val);
  }
});

var userData = {...};
var userList = new UserCollection(userData);
var userListView = new UserListView({collection: userList});
userListView.attach();