SSR이 아니어도 괜찮아! Angular로 만든 웹 사이트를 Google에로드하는 방법

Google은 자바스크립트를 읽을 수 있지만.

Google의 진화는 빠르고, 「JavaScript 프레임워크는 검색에 약하다」라고 말해진 것은 지금은 옛날. JavaScript를 제대로 읽어 렌더링 후를 인덱스 하기 때문에, 지금은 검색 결과에 표시하기 위해서만 ServerSideRendering 나 pre-rendering 를 할 필요는 없어졌습니다.

단, 반면 Google 크롤러에서 채택한 JavaScript 버전은 낮습니다. ES5를 사용하는 모양. ES6 이상을 사용하여 작성한 JavaScript 코드는 Google 크롤러가 인식하지 못할 수 있습니다.

Angular는 ES5와의 호환성을 기본적으로 제거합니다.

Angular에는 ES5 호환을 위해 스타터 템플릿에 src/polyfills.ts가 포함되어 있습니다. 이 기능을 사용하면 ES5와의 호환성이 지원됩니다. 그러나 언제부터인가 완전히 실망했지만(처음부터였을지도), 대부분의 호환성을 코멘트 아웃되고 있습니다.

"대부분의 브라우저는 ES6를 서포트하고 있기 때문에, 일부러 후방 호환을 위한 polyfills를 import해 버리면 번들 사이즈가 커진다"라고 하는 것은 알겠습니다만, 힘든 일에 이것에 의해, Google의 크롤러는 Angular 프로젝트를 로드할 수 없습니다.

Google 크롤러가 웹사이트를 어떻게 표시하는지 확인하는 'Fetch as Google'이라는 도구가 공개되어 있지만 초기에 아무것도 설정하지 않은 채 웹에 올리면 Google 크롤러 는 다음과 같이 인식합니다.



새하얀이 표시되고 있네요. 즉, 웹 사이트의 콘텐츠를로드하지 않는다는 것입니다 (아마도 JavaScript 오류로 처리가 중단되었을 것입니다).
물론, 웹 어플리케이션 등에서 「별로 읽어들일 필요 없고」라고 하는 시츄에이션은 많다고는 생각합니다만, 보통으로 Web 사이트를 PWA로 만들어 공개하는 것 등이 있다고 생각하므로, Google의 크롤러에 인식시키는 방법 소개합니다.
src/polyfills.ts 의 31행의 코멘트 아웃을 해제해 주세요.

src/polyfills.ts

- //import 'core-js/es6/array';
+ import 'core-js/es6/array';

이렇게 하면 Google 크롤러가 사이트를 인식할 수 있습니다.



Ionic v4 + Angular로 당사 웹사이트 네.

"Google 크롤러가 인식하기 위하여는, polyfills의 부분을 활성화한."

무언가의 기회로 도움이 되었으면 좋겠습니다.