2017-04-02 11 views
11

Angular2 기반 웹 앱에서 작업하고 있습니다. Angular CLI를 사용하여 앱을 생성 한 다음 자극을 위해 빌드했습니다. AWS S3 & Cloudfront에서 웹 사이트를 호스팅했습니다. 웹 마스터에서 'Fetch as Google'도구를 사용하면 Loading... 만 표시됩니다. Angular2 App : Fetch As Google에서 페이지 콘텐츠를로드하지 않습니다.

enter image description here

내 웹 사이트를 크롤링 할 수 Googlebot이 아닌가요?

+0

웹 사이트는 프론트 엔드 전용입니까? 파일을 제공 할 백엔드가 없으면이 문제가 발생할 수 있습니다. –

+0

프런트 엔드에 Angular2를 사용했으며 AWS 클라우드 프런트를 통해 제공됩니다. 백 엔드는 nodej이며 다른 하위 도메인에서 호스팅됩니다. Angular2 앱은 nodejs 앱에 대한 API 요청을 통해 콘텐츠를 렌더링합니다. –

+0

프론트 엔드가 백엔드에 의해 서비스되고 있습니까? 또는 그것은 귀하의 도메인에 앉아있는 벌거 벗은 index.html입니까? –

답변

10

도 비슷한 문제가있었습니다. Google Bot이 현대 JS를 지원하지 않는다고 생각합니다. 나는 단순히 스크립트 헤더에 angular.io 참조 https://angular.io/docs/ts/latest/guide/browser-support.html 추천 및 추가 된 모든 심을 활성화 :

<script src=https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js</script> 

정말 잘 모르겠어요 그들 모두가 필요하지만, 어쨌든 나이가 IE에 대한 지원이 필요합니다.

모든 검색 봇에서 작동하는 경우 매우 명확하지 않습니다. 지원해야하는 경우 https://prerender.io/을 사용해보십시오. 그러나 그들은 또한 단지 shim으로 그것을 렌더링 할 수 있습니다

희망이 도움이됩니다.

+0

이것은 결국 내 문제의 해결책이되었습니다. 이 솔루션을 공유해 주셔서 감사합니다. 내가 공유 한 cdn 링크를 사용했지만, "angular.io에서 권장하는 모든 shim을 활성화 한 방법"에 대해 궁금합니다. 조금 설명 할 수 있니? –

+1

그래서이 문제를 해결하려면 CDN이 충분하다고 생각하십니까? 그럼 angular.io 프로젝트에는 https://angular.io/docs/ts/latest/guide/browser-support.html의 모든 shim이 주석 처리 된 "polyfills.ts"라는 파일이 있어야합니다. 기본적으로 IE와 관련이있는 모든 클래스에 대한 주석을 제거했습니다. 모든 core-js/es6/*, web-animations-js 및 classlist.js가 될 것입니다. 희망이 도움이 – Krosan

+0

"구글로 가져 오기"를 사용하여 내 4 각도 사이트를 렌더링 할 수없는 googlebot과 동일한 문제가 발생했습니다. 내가 뭘 했든 상관없이 공백으로 돌아왔다. shim을 포함한 해결책은 마침내 나를 위해 문제를 해결 한 것입니다. 이것을 허용 된 대답으로 만드는 것을 고려하십시오. – brinch

2

프런트 엔드가 서버 측 언어로 제공되지 않기 때문에 초기로드시 정적 HTML 사이트를 게재하려면 Angular2-Universal을 사용하는 것이 좋습니다.

quickstart 가이드를 체크 아웃하고 빠르게 작동시킬 수 있습니다.

+2

일반 사용자가 브라우저에서 보는 것을 렌더링하는 Googlebot이 아닌가요? –

+0

@NileshG 예, 정상적인 사용자는 초기로드 화면 인 것을 정확히 알고 있습니다. –

+0

나는 범용 페이지를 선호합니다. 그러나 그것은 단지 그것으로 작업하고 있다는 것은 사실이 아닙니다. 위의 내 대답을 참조하십시오. – Krosan