Googlebot은 JavaScript를 읽을 수 있습니다. SEO는 어떻게 반응해야 할까요?

전통적으로 검색 엔진은 웹사이트의 HTML 코드를 읽고 렌더링만 했습니다. 이것은 HTML 코드를 최적화하는 것이 SEO가 집중해야 하는 것임을 의미했습니다. Googlebot이 이제 JavaScript도 크롤링하고 색인을 생성할 수 있다면 검색 엔진 최적화에 어떤 의미가 있습니까? 우리는 몇 명의 업계 전문가에게 알아보도록 요청했습니다.

Googlebot 및 JavaScript: 전문가의 의견

Googlebot 및 JavaScript 주제에 대한 다양한 관점을 얻기 위해 전문가에게 다음 질문을 했습니다.

• Google은 Googlebot이 JavaScript를 기반으로 하는 웹사이트를 크롤링할 수 있다고 말합니다. SEO에 어떤 도전과 기회가 있습니까?
• JavaScript 웹사이트 재출시를 계획하고 있다면 어떤 특정한 측면을 고려해야 합니까?
• Chrome의 웹 렌더링 업데이트로 인해 효율성과 정확성 측면에서 어떤 변화가 예상되나요?

그리고 여기에 답이 있습니다.

마틴 타우버

Marketing Factory GmbH 관리 파트너

자바스크립트 기반 웹사이트는 더 빠르고 더 인터랙티브하게 사용하기 때문에 사용자 경험 측면에서 큰 기회를 제공합니다.

그러나 Googlebot은 JavaScript를 해석하는 데 여전히 어려움을 겪고 있습니다. 즉, 불쾌한 놀라움을 피하려면 개발이 매우 깨끗해야 하고 SEO 부서와의 긴밀한 협력에 기반을 두어야 합니다.

도미닉 보이치크

전무 이사, Trust Agents

이제 두 개의 개별 프로그래밍 세계(예: 이스케이프된 조각)가 없어 깨끗한 코드와 깨끗한 웹 환경에 집중할 수 있는 기회가 있습니다. 개발자가 점진적인 향상을 고려하고 그에 따라 웹 애플리케이션을 개발하는 한 Google은 잘 대처할 수 있습니다.

그러나 숨겨진 과제가 있습니다. 어떤 프레임워크가 사용되고 있습니까? 클라이언트 측 렌더링이 있습니까 아니면 서버 측 렌더링을 구현할 수 있습니까? 동형 자바스크립트를 구현하는 것이 가능할까요? JavaScript가 내부적으로 구현되어 있습니까, 아니면 외부적으로 구현되어 있습니까? SEO로서 우리는 Google이 원하는 대로 페이지를 인덱싱하고 가중치를 부여할 수 있도록 엄청난 양의 테스트와 다양한 시도를 해야 합니다.

다시 시작하기 전에 사용할 프레임워크를 신중하게 결정해야 합니다. 크롤링 가능성과 성능을 모두 고려해야 합니다. 이상적으로는 클라이언트 측 렌더링을 사용하는 경우 외부에서 현재 개발을 테스트할 수 있는 테스트 환경을 만들어야 합니다. 즉, 서버 측 렌더링도 사용하는 것이 좋습니다. 이는 서버 성능에 영향을 미치지만 위험을 최소화해야 합니다. 무엇보다도 Googlebot이 무엇을 찾고 색인을 생성하고 크롤링하는지 보려면 가져오기 및 렌더링을 사용하여 실제로 테스트, 테스트 및 테스트해야 합니다.

Google이 마침내 V49보다 높은 Chrome 버전으로 전환하면 Rendertron과 같은 것과 함께 헤드리스 Chrome을 사용하여 Googlebot의 설정과 유사한 설정을 시뮬레이션할 수 있는 테스트 환경을 만들 수 있습니다. 이렇게 하면 Google에서 해석하는 방법과 내용을 더 잘 이해하는 데 도움이 됩니다. 이렇게 하면 SEO가 훨씬 쉬워집니다.

바르토시 고랄비츠

Elephate 공동 설립자 및 SEO 책임자

2017년 11월 Searchmetrics Summit에서 Elephate의 Bartosz Goralwicz는 Googlebot과 JavaScript의 관계에 대해 다음과 같이 말했습니다.

스테판 치쉬

Trust Agents 설립자 및 전무 이사

우리는 SEO(또는 대행사)가 사람들이 “그런데 우리는 곧 JavaScript로 전환할 것입니다. SEO와 관련하여 생각해야 할 사항이 있습니까? 있어야 하지, 있어야 합니까? 그러나 월요일에 새 사이트를 라이브로 시작하기 전에 간단히 살펴볼 수 있다면 좋을 것입니다.” 이 시나리오는 필연적으로 완전한 혼란으로 끝날 것입니다. Bartosz는 [위의 비디오에서] JavaScript와 SEO라는 주제를 훌륭하게 살펴보았습니다.

Google이 무엇을 렌더링할 수 있는지 묻는 것 외에도 SEO는 웹사이트를 다시 시작할 때 봇이 볼 수 있는 것과 이전 웹사이트와 다른 점을 확인해야 합니다. 나는 최근에 이전 사이트의 링크 로직이 이월되지 않았기 때문에 JavaScript 재실행 후 전체 내부 링크 시스템이 엉망이 된 웹 사이트를 처리했습니다. hreflang 문제도 있었습니다. 따라서 원하는 "SEO 기능"의 체크리스트로 작업하는 것이 필수적입니다. 또한 JavaScript 렌더링이 실제로 어떤 의미인지 물어봐야 합니다. 웹사이트에 액세스하기 위해 어떤 하드웨어를 사용하고 있으며 로드 시간에 어떤 영향을 미칠까요? 이 주제에 대한 자세한 내용은 Addy Osmani의 이 기사를 추천할 수 있습니다.

세바스찬 아들러

SEO 컨설턴트 , jump.de

JavaScript 크롤링 기능이 향상되었더라도 Google은 리소스를 덜 차지하기 때문에 순수한 HTML 콘텐츠를 선호합니다. 문제는 Google이 JS를 읽고 렌더링할 수 있는지 여부가 아니라 귀하가 Google의 손에서 일부 작업을 수행할 수 있고 원하는지 여부입니다. 내 콘텐츠를 읽을 수 있고 JS 없이도 빠르고 완벽하게 작동하고 로드할 수 있다면 그게 더 좋습니다.

렌더링 능력은 항상 그 뒤에 있는 기술에 달려 있으며 Bartosz가 말했듯이(그가 실험과 연구에 쏟는 모든 노력에 경의를 표합니다!) 기술을 최대한 활용하려면 기술을 완전히 이해해야 합니다. . 여기서 좋은 기회는 중요한 콘텐츠를 HTML로 제공하고 추가 기능을 위해 의도한 대로 JS만 사용하여 위험을 최소화하는 것입니다. 가장 큰 어려움은 JavaScript에 완전히 커밋하면 오류를 찾는 것입니다.

페이지를 다시 시작할 때 순위를 매길 콘텐츠가 JavaScript 없이 작동하는지 확인하십시오. 여기에는 주요 콘텐츠뿐만 아니라 탐색 요소도 포함됩니다. JS가 비활성화되면 많은 페이지에 메뉴가 없습니다. 모든 멋진 기능을 포함하는 것이 아니라 해당 기능이 귀하의 비즈니스와 대상 고객에게 실제로 필요한지 묻는 것이 합리적입니다. 특정 기능이 작동하지 않으면 어떤 영향을 미치나요? 그런 다음 관련 테스트를 수행합니다.

Google이 웹 렌더링 업데이트를 웹마스터에게 잘 전달할 것이라고 기대하지 않는다는 사실 외에도 가장 크게 달라지는 것은 오류에 대한 민감도일 것으로 예상합니다. Chrome과 프레임워크는 정말 빠르게 개발되며 새 버전에서는 새로운 버그가 RWS에 나타날 가능성이 높습니다.

몇 가지 사항은 더 빨리 처리되거나 더 깔끔하게 렌더링되어야 합니다. 그러나 주요 문제는 동일하게 유지됩니다. 오류가 많은 코드(사용 중인 엔진의 관점에서)는 해석할 수 없습니다. 엔진이 코드를 해석하는 방법을 찾아야 합니다. 개발하는 동안 이것은 디버깅에 사용해야 하는 도구를 변경합니다. 그러나 가장 중요한 자산이 빠르게 로드되는 HTML(등) 파일과 같은 경우에는 걱정할 필요가 없습니다. 적절한 SEO 작업에 집중할 수 있습니다.

비욘 베스

전문 서비스 이사, Searchmetrics

크롤링과 인덱싱을 구별해야 합니다. Google은 JavaScript를 크롤링할 수 있지만 순수 HTML을 크롤링하는 것보다 훨씬 더 많은 리소스가 필요합니다. Search Console의 Fetch & Render와 유사한 방식으로 WRS(웹 렌더링 서비스)의 도움으로 크롤러에서 수신하는 링크(URL)를 렌더링하는 인덱서의 경우 더 문제가 됩니다. 이를 위해 Google은 자체 Chrome 브라우저(버전 41)를 사용합니다. 브라우저의 도움으로 DOM(문서 개체 모델)을 만들고 브라우저에 표시되는 것과 같은 방식으로 페이지를 해석합니다. 예를 들어, Google(Distilled 및 Bartosz Goralewicz가 실행한 테스트에서 볼 수 있음)이 코드 문제에 대처할 수 없거나 렌더링 시 다른 큰 문제가 발생하여 Google이 5초 후에 페이지에서 렌더링을 중지하는 등의 문제가 발생할 수 있습니다. . 이것은 Screaming Frog가 수행한 테스트에서 나타났습니다.

기본적으로 JavaScript는 크롤링과 인덱싱을 훨씬 더 복잡하게 만들고 둘 사이에 매우 비효율적인 관계를 만듭니다. SEO가 중요한 경우 봇이 가능한 한 빠르고 효율적으로 페이지를 읽을 수 있는지 항상 확인해야 합니다.

HTML 기반 웹사이트에서 JavaScript 기반 프레임워크 또는 라이브러리로 다시 시작하기 전에 서브 사이드 렌더링이 포함되어 있는지 확인해야 합니다. 예를 들어 React는 renderToString이라는 자체 솔루션과 함께 제공됩니다. 이것은 서버에서 JavaScript를 렌더링하고 DOM을 생성하여 봇에 보내는 브라우저 독립적인 DOM 인터페이스를 사용합니다. AngularJS는 Angular Universal을 사용합니다. 이것은 미리 렌더링된 HTML로 중요한 모든 것으로 클라이언트를 증명합니다. 그런 다음 클라이언트는 필요에 따라 JavaScript를 가져옵니다. 그러나 서버에서 헤드리스 Chrome으로 작업하고 미리 렌더링된 HTML을 봇에 보낼 수도 있습니다.

무엇보다도 Chrome 59에서 더 빠르고 효율적인 렌더링이 제공되어 순수 HTML과 동등한 성능을 기대합니다. 이것이 실제로 발생하는지 여부는 테스트를 통해서만 알 수 있습니다.

진흙탕을 헤매다: 웹사이트의 상태를 평가하십시오.

이제 Searchmetrics와 함께 JavaScript 크롤러를 포함한 사이트 구조 최적화로 HTML과 JavaScript를 모두 분석하십시오! 혜택:

• Angular 및 React를 포함한 모든 관련 JavaScript 프레임워크 크롤링
• 기술 문제의 우선 순위 목록을 통해 웹 사이트 성능 향상
• JavaScript 크롤링이 있거나 없는 크롤링 비교

JavaScript 크롤링에 대해 자세히 알아보기

그리고 어떻게 생각하세요?

5명의 전문가가 그렇게 생각하지만 이 블로그를 읽고 있는 전문가는 훨씬 더 많습니다. 자바스크립트에 대해 어떻게 생각하세요? 웹사이트를 이미 변경했습니까? 테스트에서 이미 흥미로운 것을 발견했습니까?