html5 - 최적화 - 검색 엔진은 AngularJS 응용 프로그램을 어떻게 처리합니까?




앵귤러js 단점 (10)

검색 엔진 및 검색 엔진 관련 AngularJS 응용 프로그램과 관련된 두 가지 문제점이 있습니다.

1) 맞춤 태그는 어떻게됩니까? 검색 엔진이 해당 태그 내의 전체 콘텐츠를 무시합니까? 내가 가지고 있다고 가정 해 보자.

<custom>
  <h1>Hey, this title is important</h1>
</custom>

사용자 정의 태그 안에 있더라도 <h1> 이 색인 생성됩니까?


2) 색인 생성의 검색 엔진이 글자 그대로 {{}} 바인딩되는 것을 피할 수있는 방법이 있습니까? 즉

<h2>{{title}}</h2>

나는 내가 뭔가를 할 수 있다는 것을 안다.

<h2 ng-bind="title"></h2>

그러나 실제로 크롤러가 제목을 "보게"하려면 어떻게해야합니까? 서버 측 렌더링이 유일한 해결책입니까?


AngularJS 및 SEO에 대한 최종 결정을 내리 자.

Google, Yahoo, Bing 및 기타 검색 엔진은 기존 크롤러를 사용하여 전통적인 방식으로 웹을 크롤링합니다. 로봇 은 웹 페이지에서 HTML을 크롤링하여 길을 따라 정보를 수집합니다. 그들은 재미있는 단어를 유지하고 다른 페이지에 대한 다른 링크를 찾습니다 (이 링크, 그 양과 그 수가 SEO와 관련되어 나타납니다).

그렇다면 왜 검색 엔진은 자바 스크립트 사이트를 다루지 않습니까?

대답은 검색 엔진 로봇이 헤드리스 브라우저를 통해 작동하며 페이지의 자바 스크립트를 렌더링하는 자바 스크립트 렌더링 엔진이 없는 경우가 대부분입니다. 대부분의 정적 페이지는 JavaScript가 페이지를 렌더링하는 것에 관심이 없기 때문에 대부분의 페이지에서 사용할 수 있습니다.

그것에 대해 무엇을 할 수 있습니까?

운 좋게도 더 큰 사이트의 크롤러는 JavaScript 사이트를 크롤링 할 수있는 메커니즘을 구현하기 시작했지만 사이트 변경을 구현해야합니다 .

hashPrefix#! 변경하면 #! 단순히 # 대신 현대 검색 엔진이 #! 대신에 _escaped_fragment_ 를 사용하도록 요청을 변경합니다 #! . (HTML5 모드 (즉, 해시 프리픽스가없는 링크가있는 경우 백엔드의 User Agent 헤더를보고이 동일한 기능을 구현할 수 있습니다).

즉, 다음과 같은 일반 브라우저의 요청 대신 :

http://www.ng-newsletter.com/#!/signup/page

검색 엔진은 다음을 사용하여 페이지를 검색합니다.

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

ngRoute 의 내장 메소드를 사용하여 Angular 앱의 해시 프리픽스를 설정할 수 있습니다.

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

html5Mode 사용하는 경우 메타 태그를 사용하여 구현해야합니다.

<meta name="fragment" content="!">

알림, $location 서비스로 html5Mode() 를 설정할 수 있습니다 :

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

검색 엔진 처리

정적 HTML로 검색 엔진에 실제로 콘텐츠를 전달하는 방법을 결정할 수있는 많은 기회가 있습니다. 우리는 백엔드를 스스로 호스팅 할 수 있고, 백엔드 호스팅 서비스를 사용할 수 있으며, 프록시를 사용하여 컨텐츠를 전달할 수 있습니다. 몇 가지 옵션을 살펴 보겠습니다.

자체 호스팅

phantomjs 또는 zombiejs와 같은 헤드리스 브라우저를 사용하여 자신의 사이트를 크롤링하고, 렌더링 된 데이터로 페이지의 스냅 샷을 찍어 HTML로 저장하는 서비스를 작성할 수 있습니다. 검색 요청에서 검색어 문자열 인 ?_escaped_fragment_ 가 표시 될 때마다 미리 렌더링 된 페이지 대신 JS에서만 수행 한 정적 HTML 스냅 샷을 전달할 수 있습니다. 이를 위해서는 중간에 조건부 논리를 사용하여 페이지를 전달하는 백엔드가 있어야합니다. prerender.io's 백엔드 같은 것을 우리 스스로 실행하기위한 출발점으로 사용할 수 있습니다. 물론 프록시와 스 니펫 처리를 처리해야하지만 좋은 시작입니다.

유료 서비스로

검색 엔진에 콘텐츠를 가져 오는 가장 쉽고 빠른 방법은 위의 콘텐츠 렌더링을 호스팅하는 좋은 예인 Brombone , seo.js , seo4ajaxprerender.io's 입니다. 이것은 서버 / 프록시 실행을 다루고 싶지 않은 시대에 좋은 옵션입니다. 또한 대개는 매우 빠릅니다.

Angular 및 SEO에 대한 자세한 내용은 http://www.ng-newsletter.com/posts/serious-angular-seo.html 에서 광범위한 자습서를 작성했으며 Google 도서 북에서 더 자세히 설명했습니다 . Angular의 Complete Book . ng-book.com 에서 확인하십시오.


PushState 및 사전 컴포지션 사용

이를 수행하는 현재 (2015) 방법은 JavaScript pushState 메소드를 사용하는 것입니다.

PushState는 페이지를 다시로드하지 않고 상단 브라우저 막대의 URL을 변경합니다. 탭이있는 페이지가 있다고 가정 해보십시오. 탭은 내용을 숨기고 표시하며 AJAX를 사용하거나 display : none 및 display : 블록을 설정하여 올바른 탭 내용을 숨기고 표시하도록 내용이 동적으로 삽입됩니다.

탭을 클릭하면 pushState를 사용하여 주소 표시 줄의 URL을 업데이트하십시오. 페이지가 렌더링되면 주소 표시 줄의 값을 사용하여 표시 할 탭을 결정합니다. 각도 라우팅이 자동으로 수행됩니다.

사전 합성

PushState Single Page App (SPA)을 두 가지 방법으로 사용할 수 있습니다.

  1. 사용자가 PushState 링크를 클릭하고 컨텐츠가 AJAXed 된 PushState를 통해
  2. URL을 직접 타격하여.

사이트의 초기 히트에는 URL을 직접 누르는 것이 포함됩니다. 이후의 히트는 PushState가 URL을 업데이트 할 때 콘텐츠의 AJAX에 불과합니다.

크롤러는 페이지의 링크를 수집 한 다음 나중에 처리 할 수 ​​있도록 대기열에 추가합니다. 이것은 크롤러의 경우 서버의 모든 히트가 직접 히트이며 Pushstate를 통해 탐색하지 않는다는 것을 의미합니다.

사전 컴포지션은 초기 페이로드를 서버의 첫 번째 응답 (가능하면 JSON 객체)으로 묶습니다. 이렇게하면 검색 엔진이 AJAX 호출을 실행하지 않고 페이지를 렌더링 할 수 있습니다.

Google이 AJAX 요청을 실행하지 않을 수도 있다는 증거가 있습니다. 이것에 더 많은 것 여기에서 :

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

검색 엔진은 자바 스크립트를 읽고 실행할 수 있습니다.

Google은 JavaScript를 당분간 파싱 할 수 있었기 때문에 Chrome을 처음 개발하여 Google 스파이더 용 헤드리스 브라우저로 사용할 수있었습니다. 링크에 유효한 href 속성이 있으면 새 URL을 색인 할 수 있습니다. 더 할 일이 없습니다.

추가 링크를 클릭하면 pushState 호출이 시작되고 PushState를 통해 사용자가 사이트를 탐색 할 수 있습니다.

PushState URL에 대한 검색 엔진 지원

PushState는 현재 Google과 Bing에서 지원됩니다.

Google

SEO를위한 PushState에 대한 Paul Irish의 질문에 대한 Matt Cutts의 답변 :

http://youtu.be/yiAF9VdvRPw

다음은 Google에서 거미에 대한 전체 JavaScript 지원을 발표 한 것입니다.

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

결론은 Google이 PushState를 지원하고 PushState URL의 색인을 생성한다는 것입니다.

Google 웹 마스터 도구의 Googlebot으로 가져 오기를 참조하십시오. 자바 스크립트 (Angular 포함)가 실행되는 것을 볼 수 있습니다.

다음은 2013 년 3 월 12 일에 발표 된 예쁜 PushState URL에 대한 Bing의 발표입니다.

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

HashBangs #를 사용하지 마십시오!

Hashbang URL은 개발자가 특별한 위치에 사이트의 미리 렌더링 된 버전을 제공하도록 요구하는 추한 임시 방편이었습니다. 여전히 작동하지만 사용하지 않아도됩니다.

Hashbang URL은 다음과 같습니다.

domain.com/#!path/to/resource

이것은 다음과 같은 메타 태그와 쌍을 이룹니다 :

<meta name="fragment" content="!">

Google은이 양식에 색인을 생성하지 않지만 대신 _escaped_fragments_ URL에서 정적 버전의 사이트를 가져 와서 색인을 생성합니다.

푸시 스테이트 URL은 일반 URL처럼 보입니다.

domain.com/path/to/resource

차이점은 Angular가 JavaScript에서 처리하는 document.location에 대한 변경을 가로 채서 처리한다는 점입니다.

PushState URL을 사용하고 싶다면 (그리고 아마도 그렇게 할 것입니다) 이전의 해시 스타일 URL과 메타 태그를 모두 꺼내어 config 블록에서 HTML5 모드를 활성화하면됩니다.

사이트 테스트하기

Google 웹 마스터 도구에는 이제 URL을 Google로 가져오고 Google에서 렌더링 할 때 JavaScript를 렌더링 할 수있는 도구가 포함되어 있습니다.

https://www.google.com/webmasters/tools/googlebot-fetch

각도로 PushState URL 생성하기

# 접두사가 아닌 Angular로 실제 URL을 생성하려면 $ locationProvider 객체에 HTML5 모드를 설정하십시오.

$locationProvider.html5Mode(true);

서버 측

실제 URL을 사용하고 있기 때문에 유효한 모든 URL에 대해 서버에서 동일한 템플릿 (일부 사전 구성된 컨텐츠 포함)을 제공해야합니다. 이렇게하는 방법은 서버 아키텍처에 따라 다릅니다.

사이트 맵

앱에서 마우스를 올리거나 스크롤하는 것과 같은 비정상적인 형태의 탐색을 사용할 수 있습니다. Google에서 앱을 실행할 수있게하려면 앱에서 응답하는 모든 URL의 간단한 목록 인 사이트 맵을 만들어 보시기 바랍니다. 이 위치를 기본 위치 (/ sitemap 또는 /sitemap.xml)에 배치하거나 웹 마스터 도구를 사용하여 Google에 알려줄 수 있습니다.

어쨌든 사이트 맵을 갖는 것이 좋습니다.

브라우저 지원

Pushstate는 IE10에서 작동합니다. 오래된 브라우저에서는 Angular가 자동으로 해시 스타일 URL로 대체됩니다.

데모 페이지

다음 내용은 미리 컴포지션 된 푸시 스테이트 URL을 사용하여 렌더링됩니다.

http://html5.gingerhost.com/london

확인할 수 있듯이이 링크 에서 콘텐츠는 색인 생성되어 Google에 표시됩니다.

404 및 301 헤더 상태 코드 검색

검색 엔진은 모든 요청에 ​​대해 항상 서버를 공격하므로 서버의 헤더 상태 코드를 제공하고 Google에 표시되도록 요청할 수 있습니다.


Angular의 자체 웹 사이트는 검색 엔진에 간단한 콘텐츠를 제공합니다. http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Angular 앱이 /api/path/to/resource 와 같은 Node.js / Express 기반 JSON API를 사용한다고 가정 해 보겠습니다. 아마도 ?_escaped_fragment_ 를 사용하여 요청을 /api/path/to/resource.html 리디렉션하고 콘텐츠 협상 을 사용하여 JSON 데이터를 반환하는 대신 콘텐츠의 HTML 템플릿을 렌더링 할 수 있습니다.

유일한 방법은 각도 경로가 REST API와 1 : 1로 일치해야합니다.

편집 :이 REST API를 정말 진흙탕 수있는 잠재력이 있다는 것을 깨닫게되고 그것은 아주 자연스럽게 될 수있는 아주 간단한 사용 사례 밖에서 일을하지 않는 것이 좋습니다.

대신 로봇 친화적 인 콘텐츠를 위해 전혀 다른 경로와 컨트롤러 세트를 사용할 수 있습니다. 그러나 노드 / 익스프레스에서 모든 AngularJS 라우트와 컨트롤러를 복제하고 있습니다.

머리가없는 브라우저로 스냅 샷을 생성하는 방법에 대해 생각해 보았습니다.



당신은 정말로 블로그의 해에 SEO 친화적 인 AngularJS 사이트를 구축하는 방법에 대한 자습서를 확인해야합니다. 그는 Angular의 문서에 설명 된 모든 단계를 안내합니다. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

이 기술을 사용하면 검색 엔진은 사용자 정의 태그 대신 확장 된 HTML을 보게됩니다.


여기에있는 다른 답변에서 언급 한 것처럼 Google의 Crawlable Ajax Spec은 기본적으로 대답입니다.

다른 검색 엔진과 소셜 봇이 동일한 문제를 처리하는 방법에 관심이 있다면 http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html 하십시오.

저는 Crawlable Ajax Spec을 서비스로 구현하는 회사 인 https://ajaxsnapshots.com 에서 일하고 있습니다.이 보고서의 정보는 Google 로그에서 얻은 관측을 기반으로합니다.





2014 년 5 월 업데이트

이제 Google 크롤러가 javascript를 실행 합니다. Google 웹 마스터 도구 를 사용하여 Google에서 사이트를 렌더링하는 방법을 더 잘 이해할 수 있습니다.

원문 답변
앱을 검색 엔진에 맞게 최적화하려는 경우 불행하게도 미리 렌더링 된 버전을 크롤러에 게재 할 방법이 없습니다. 아약스 및 자바 스크립트가 많은 사이트에 대한 Google의 권장 사항에 대한 자세한 내용은 here .

이것이 옵션이라면 서버 쪽 렌더링과 함께 Angular에 대해 SEO를 수행하는 방법에 대해이 기사 를 읽는 것이 좋습니다.

크롤러가 맞춤 태그를 만났을 때 크롤러가 수행하는 작업에 대해 확실하지 않습니다.





google-search