[javascript] “단일 페이지”JS 웹 사이트 및 SEO

# 2는 개발자에게는 “더 쉬울 수 있지만”검색 엔진 크롤링 만 제공합니다. 그렇습니다. Google이 귀하의 다른 콘텐츠를 제공하는 것을 알게되면 처벌을받을 수 있습니다 (전문가는 아니지만 그 일이 있다고 들었습니다).

SEO와 접근성 (장애인뿐만 아니라 모바일 장치, 터치 스크린 장치 및 기타 비표준 컴퓨팅 / 인터넷 가능 플랫폼을 통한 접근성)은 모두 유사한 기본 철학을 가지고 있습니다. 이러한 모든 브라우저에서 액세스, 조회, 읽기, 처리 또는 다른 방식으로 사용). 스크린 리더, 검색 엔진 크롤러 또는 JavaScript가 활성화 된 사용자는 모두 문제없이 사이트의 핵심 기능을 사용 / 색인화 / 인식 할 수 있어야합니다.

pushState내 경험에 따르면이 부담을 가중시키지 않습니다. 그것은 단지 웹 개발의 최전선에 “후 시간이 있다면”나중에 생각했던 것을 가져옵니다.

옵션 # 1에서 설명하는 것은 일반적으로 가장 좋은 방법이지만 다른 접근성 및 SEO 문제와 마찬가지로 pushStateJavaScript가 많은 앱 에서이 작업을 수행 하려면 사전 계획이 필요합니다. 그렇지 않으면 상당한 부담이 될 것입니다. 처음부터 페이지와 응용 프로그램 아키텍처에 구워 져야합니다. – 개조는 고통스럽고 필요한 것보다 더 많은 복제가 발생합니다.

나는 pushState최근 몇 가지 다른 응용 프로그램을 위해 SEO 와 함께 일해 왔으며 좋은 접근 방식이라고 생각하는 것을 발견했습니다. 기본적으로 항목 # 1을 따르지만 html / 템플릿을 복제하지 않는 이유가 있습니다.

대부분의 정보는 다음 두 블로그 게시물에서 찾을 수 있습니다.

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 등을 실행)을 사용하고 백본에서 사용할 수있는 클라이언트 측 템플릿과 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>

서버가 이것을 렌더링 한 후, JavaScript는 그것을 선택합니다 (이 예제에서는 Backbone.js 뷰를 사용합니다)

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")
  });
});

이것은 매우 간단한 예이지만, 나는 그것이 요점을 얻는다고 생각합니다.

페이지가로드 된 후보기를 인스턴스화하면 서버에서 렌더링 한 양식의 기존 내용을보기 인스턴스로보기 인스턴스에 el제공합니다. 나는 하지 렌더링 호출 또는 뷰가 발생 가진 el첫 번째보기를로드 할 때, 나를 위해. 뷰가 실행되고 페이지가 모두 JavaScript 인 후에 사용할 수있는 렌더링 방법이 있습니다. 필요한 경우 나중에 뷰를 다시 렌더링 할 수 있습니다.

JavaScript가 활성화 된 상태에서 “내 이름 말하기”버튼을 클릭하면 경고 상자가 나타납니다. JavaScript가 없으면 서버에 다시 게시되고 서버는 이름을 html 요소에 어딘가에 렌더링 할 수 있습니다.

편집하다

첨부해야 할 목록이있는 더 복잡한 예를 고려하십시오 (아래 주석에서)

<ul>태그 에 사용자 목록이 있다고 가정하십시오 . 이 목록은 브라우저가 요청했을 때 서버에서 렌더링되었으며 결과는 다음과 같습니다.

<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>

이제이 목록을 반복하고 각 <li>항목에 백본보기 및 모델을 연결해야 합니다. 이 data-id속성을 사용하면 각 태그의 모델을 쉽게 찾을 수 있습니다. 그런 다음이 HTML에 자신을 첨부 할만큼 똑똑한 컬렉션보기 및 항목보기가 필요합니다.

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();

이 예제에서는 UserListView모든 <li>태그를 반복하고 각 태그에 대해 올바른 모델로보기 객체를 연결합니다. 모델의 이름 변경 이벤트에 대한 이벤트 핸들러를 설정하고 변경이 발생할 때 요소의 표시된 텍스트를 업데이트합니다.

서버가 렌더링 한 html을 가져 와서 내 JavaScript로 가져 와서 실행하는 이런 종류의 프로세스는 SEO, 접근성 및 pushState지원을 위해 롤링 할 수있는 좋은 방법 입니다.

희망이 도움이됩니다.

답변

<%= render :partial => 'some_thingy', object: my_model %>

<%= template_include_tag 'some_thingy' %>

html = poirot.someThingy(my_model)

resources :articles
match "*path", "main#index"

<div id="no-js">
  <h1><%= @article.title %></h1>
  <p><%= @article.description %></p>
  <p><%= @article.content %></p>
</div>

$("#no-js").remove() # jQuery