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




앵귤러js 단점 (12)

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

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

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

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


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

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

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

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

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


크롤러는 풍부한 기능의 예쁜 스타일의 GUI를 필요로하지 않으며, 단지 내용을보고 싶기 때문에 인간을 위해 만들어진 페이지의 스냅 샷을 제공 할 필요가 없습니다.

내 솔루션 : 크롤러가 원하는 것을 크롤러에게 제공하려면 다음과 같이하십시오.

크롤러가 원하는 것을 생각하고 그에게만 제공해야합니다.

팁 뒤통수를하지 마십시오. 동일한 API를 사용하여 서버 측 frontview를 조금 추가하십시오.


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

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



크롤러 (또는 봇)는 웹 페이지의 HTML 콘텐츠를 크롤링하도록 설계되었지만 비동기 데이터 가져 오기를위한 AJAX 작업으로 인해 페이지를 렌더링하고 동적 콘텐츠를 표시하는 데 시간이 걸리는 문제가있었습니다. 마찬가지로 AngularJS 는 비동기 모델을 사용하므로 Google 크롤러에 문제가 발생합니다.

일부 개발자는 실제 데이터가있는 기본 html 페이지를 만들고 크롤링 할 때 서버 측에서 이러한 페이지를 제공합니다. 우리는 _escaped_fragment_ 가있는 서비스 측면에서 PhantomJS 동일한 페이지를 렌더링 할 수 있습니다 (Google은 사이트 URL에서 #! 를 찾아 #! 다음에 모든 것을 취하고 _escaped_fragment_ 쿼리 매개 변수에 추가하기 때문에). 자세한 내용은이 blog 를 참조하십시오.



이 질문이 제기 된 이래로 상황이 상당히 바뀌 었습니다. 이제 Google에서 AngularJS 사이트의 색인을 생성 할 수있는 옵션이 있습니다. 가장 쉬운 옵션은 http://prerender.io 무료 서비스를 사용하여 crwalable 페이지를 생성하고이를 검색 엔진에 제공하는 것입니다. 거의 모든 서버 측 웹 플랫폼에서 지원됩니다. 나는 최근에 그것들을 사용하기 시작했고 지원도 훌륭합니다.

나는 그 (것)들과 어떤 제휴도 없다, 이것은 행복한 사용자에게서오고있다.


나는 당신의 기지 대부분을 덮을 수있는 우아한 해결책을 찾았습니다. 나는 그것에 대해 처음에 here 쓴 그것은 비슷한 다른 질문에 here 에 그것을 참조하십시오.

참고이 솔루션은 Javascript가 크롤러에 의해 선택되지 않는 경우를 대비하여 하드 코드 된 대체 태그도 포함합니다. 명시 적으로 설명하지는 않았지만 올바른 URL 지원을 위해 HTML5 모드를 활성화해야한다고 언급 할 가치가 있습니다.

또한 참고 사항 :이 파일은 전체 파일이 아니며 관련 파일의 중요한 부분 일뿐입니다. 다른 곳에서 찾을 수있는 지시문, 서비스 등에 대한 상용구 작성에 도움이 필요한 경우. 어쨌든, 여기 간다 ...

app.js

여기서 각 경로 (제목, 설명 등)에 대한 맞춤 메타 데이터를 제공합니다.

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js (서비스)

사용자 정의 메타 데이터 옵션을 설정하거나 기본값을 폴백으로 사용합니다.

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (지시문)

뷰에 대한 메타 데이터 서비스 결과를 패키지화합니다.

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

Javascript를 가져올 수없는 크롤러의 경우 앞서 언급 한 하드 코드 된 대체 태그를 완성하십시오.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

이것은 대부분의 검색 엔진 사용 사례에서 극적으로 도움이됩니다. Javascript 지원이 필요한 경우 소셜 네트워크 크롤러에 대해 완전히 동적 인 렌더링을 원한다면 다른 답변에서 언급 한 사전 렌더링 서비스 중 하나를 사용해야합니다.

희망이 도움이!



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

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

저는 Crawlable Ajax Spec을 서비스로 구현하는 회사 인 https://ajaxsnapshots.com 에서 일하고 있습니다.이 보고서의 정보는 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 라우트와 컨트롤러를 복제하고 있습니다.

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



Angular Universal을 사용하면 앱의 방문 페이지를 생성하여 전체 앱처럼 보이게 한 다음 앵귤러 앱을로드 할 수 있습니다.
Angular Universal은 순수한 HTML을 생성하여 서버 측에서 자바 스크립트가없는 페이지를 의미하며 지연없이 사용자에게 제공합니다. 따라서 크롤러, 봇 및 사용자 (이미 CPU 및 네트워크 속도가 낮은 사용자)를 처리 할 수 ​​있습니다. 링크 / 버튼을 사용하여 이미로드 된 실제 각도 앱으로 리디렉션 할 수 있습니다. 이 솔루션은 공식 사이트에서 권장합니다. - SEO 및 Angular Universal에 대한 추가 정보 -





google-search