Google 크롤러는 자바스크립트를 어떻게 크롤링하나요?

국내 브라우저와 검색 도구는 웹페이지 정보를 크롤링하기 위해 크롤러를 사용하는 것으로 알고 있는데, 구글 크롤러는 자바스크립트를 어떻게 크롤링할까요? 오늘은 여러분과 함께 심도 있는 연구와 토론을 해보겠습니다.

Google 크롤러가 JavaScript를 크롤링하는 방법을 테스트하여 알아낸 내용은 다음과 같습니다.

Google이 JavaScript를 처리할 수 없다고 생각하시나요? 다시 생각해 보세요. Audette Audette는 그와 그의 동료들이 Google에서 어떤 유형의 JavaScript 기능을 크롤링하고 포함할지 테스트한 일련의 테스트 결과를 공유했습니다.

긴 이야기

1. 일련의 테스트를 수행한 결과 Google에서 다양한 방식으로 JavaScript를 실행하고 포함할 수 있음을 확인했습니다. 또한 Google은 전체 페이지를 렌더링하고 DOM을 읽을 수 있어 동적으로 생성된 콘텐츠를 포함할 수 있음을 확인했습니다.

2. DOM의 SEO 신호(페이지 제목, 메타 설명, 표준 태그, 메타 로봇 ​​태그 등)에 모두 주의를 기울입니다. DOM에 동적으로 삽입된 콘텐츠도 크롤링 및 포함될 수 있습니다. 게다가 어떤 경우에는 DOM이 HTML 소스 코드 명령문보다 우선할 수도 있습니다. 이를 위해서는 더 많은 작업이 필요하지만 우리가 테스트한 몇 가지 작업 중 하나입니다.

소개: Google은 JavaScript를 실행하고 DOM을 읽습니다

이르면 2008년 초에 Google은 JavaScript를 성공적으로 크롤링했지만 아마도 특정 방식으로 제한되었을 것입니다.

오늘 분명한 것은 Google이 크롤링하고 포함하는 JavaScript 유형을 전략화할 수 있었을 뿐만 아니라 전체 웹 렌더링에 있어서(특히 지난 12~18개월 동안) 상당한 진전을 이루었다는 것입니다.

Merkle의 SEO 기술 팀은 Google 크롤러가 크롤링하고 포함할 수 있는 JavaScript 이벤트 유형을 더 잘 이해하고 싶었습니다. 연구 결과, 우리는 눈에 띄는 결과를 발견했으며 Google이 다양한 JavaScript 이벤트를 실행할 수 있을 뿐만 아니라 동적으로 생성된 콘텐츠도 포함할 수 있음을 확인했습니다. 어떻게? Google은 DOM을 읽을 수 있습니다.

DOM이란 무엇인가요?

많은 SEO 사람들은 DOM(문서 개체 모델)이 무엇인지 이해하지 못합니다.

브라우저가 페이지를 요청하면 어떤 일이 발생하며 DOM은 어떻게 참여합니까?

웹 브라우저에서 사용될 때 DOM은 본질적으로 데이터(예: HTML 및 XML)를 마크업하고 구조화하기 위한 애플리케이션 프로그램 인터페이스 또는 API입니다. 이 인터페이스를 사용하면 웹 브라우저가 이를 결합하여 문서를 구성할 수 있습니다.

DOM은 구조를 얻고 작동하는 방법도 정의합니다. DOM은 언어 중립적인 API(특정 프로그래밍 언어나 라이브러리에 연결되지 않음)이지만 JavaScript 및 동적 콘텐츠용 웹 애플리케이션에서 일반적으로 사용됩니다.

DOM은 웹 페이지를 프로그래밍 언어에 연결하는 인터페이스 또는 "브리지"를 나타냅니다. HTML을 파싱하고 JavaScript를 실행한 결과가 DOM입니다. 웹페이지의 콘텐츠는 소스 코드일 뿐만 아니라 DOM입니다. 이것은 매우 중요합니다.

JavaScript가 DOM 인터페이스를 통해 작동하는 방식.

Google이 DOM을 읽고 신호를 구문 분석하며 제목 태그, 페이지 텍스트, 헤드 태그, 메타 주석(예: rel = canonical)과 같이 동적으로 삽입된 콘텐츠를 분석할 수 있다는 사실을 알고 기뻤습니다. 자세한 내용은 여기에서 읽어보실 수 있습니다.

이 일련의 테스트 및 결과

어떤 종류의 JavaScript 기능이 크롤링되고 포함될지 알고 싶어서 Google 크롤러에 대한 일련의 테스트를 별도로 만들었습니다. 컨트롤을 생성하여 URL 활동을 독립적으로 이해할 수 있는지 확인하십시오. 아래에서는 몇 가지 흥미로운 테스트 결과를 자세히 분석해 보겠습니다. 5가지 범주로 나뉩니다.

JavaScript 리디렉션

JavaScript 링크

콘텐츠의 동적 삽입

메타 데이터 및 페이지 요소의 동적 삽입

rel = “nofollow”의 좋은 예

Examp 르 : Google 크롤러의 JavaScript 이해 능력을 테스트하는 데 사용되는 페이지입니다.

1. JavaScript Redirect

먼저 일반적인 JavaScript 리디렉션을 테스트했습니다. 다양한 방식으로 표현된 URL의 결과는 무엇인가요? 두 가지 테스트를 위해 window.location 개체를 선택했습니다. 테스트 A는 절대 경로 URL로 window.location을 호출하고 테스트 B는 상대 경로를 사용합니다.

결과: Google은 리디렉션을 빠르게 추적했습니다. 색인 생성 관점에서 볼 때 이는 301로 해석됩니다. 최종 URL은 Google 색인 생성의 리디렉션 URL을 대체합니다.

다음 테스트에서는 신뢰할 수 있는 웹페이지에서 정확히 동일한 콘텐츠를 사용하여 JavaScript를 사용하여 동일한 사이트의 새 페이지로 리디렉션을 완료했습니다. 그리고 원본 URL은 Google 인기 검색어의 첫 번째 페이지에 순위가 매겨집니다.

결과: 물론 Google에서 리디렉션을 추적했지만 원본 페이지는 색인화되지 않았습니다. 새 URL이 포함되어 동일한 쿼리 페이지 내에서 동일한 위치에 즉시 순위가 지정됩니다. 이는 우리에게 놀라운 일이었으며 순위 관점에서 보면 JavaScript 리디렉션이 (때때로) 영구 301 리디렉션과 매우 유사하게 동작한다는 것을 나타내는 것 같습니다.

다음번에 귀하의 고객이 웹 사이트에 대한 JavaScript 리디렉션 이동을 원할 경우 “하지 마세요”라고 대답하거나 대답할 필요가 없을 것입니다. 왜냐면 이적 순위 신호 관계가 있는 것 같거든요. 이 결론을 뒷받침하는 내용은 Google 가이드라인의 인용문입니다.

JavaScript를 사용하여 사용자를 리디렉션하는 것은 법적 관행일 수 있습니다. 예를 들어, 로그인한 사용자를 내부 페이지로 리디렉션하는 경우 JavaScript를 사용하여 이 작업을 수행할 수 있습니다. JavaScript나 기타 리디렉션 방법을 다시 확인할 때 사이트가 가이드라인을 따르고 의도를 고려했는지 확인하세요. 웹사이트로의 301 리디렉션이 가장 좋다는 점을 기억하세요. 하지만 웹사이트 서버에 액세스할 수 없는 경우 이를 위해 JavaScript 리디렉션을 사용할 수 있습니다.

2. JavaScript 링크

다양한 인코딩 방법을 사용하여 다양한 유형의 JS 링크를 테스트했습니다.

드롭다운 메뉴에 대한 링크를 테스트합니다. 지금까지 검색 엔진은 이러한 유형의 링크를 추적할 수 없었습니다. onchange 이벤트 핸들러가 추적되는지 확인하고 싶습니다. 중요한 것은 이는 특정 유형만 적용하며 위의 JavaScript 리디렉션을 강제하는 대신 다른 변경 사항의 영향을 인식해야 한다는 것입니다.

예: Google Work 페이지의 언어 선택 드롭다운 메뉴.

결과: 링크가 완전히 크롤링되고 추적되었습니다.

일반적인 JavaScript 링크도 테스트했습니다. 다음은 가장 일반적인 유형의 JavaScript 링크이며, 기존 SEO에서는 일반 텍스트를 권장합니다. 이러한 테스트에는 JavaScript 링크 코드가 포함됩니다.

외부 href 키-값 쌍(AVP)에 대해 작동하지만 태그("onClick") 내에서 작동합니다.

내부 AVP("javascript:window.location")에 작동합니다.

작동 a 태그 외부에서, href

내부에서 AVP("javascript: openlink()")를 호출하는 등

결과: 링크가 완전히 크롤링되고 추적됩니다.

다음 테스트는 위에서 테스트한 onchange와 같은 이벤트 핸들러를 추가로 테스트하는 것입니다. 특히 마우스 이동 이벤트 핸들러를 활용한 다음 이벤트 핸들러 함수(이 경우 onmousedown 및 onmouseout)가 실행될 때만 실행되도록 URL 변수를 숨기려고 합니다.

결과: 링크가 완전히 크롤링되고 추적되었습니다.

링크 구성: Google이 JavaScript를 실행할 수 있다는 것을 알고 있지만 코드에서 변수를 읽을 수 있는지 확인하고 싶습니다. 따라서 이 테스트에서는 URL 문자열을 구성하는 문자를 연결합니다.

결과: 링크가 완전히 크롤링되고 추적되었습니다.

3. 동적으로 콘텐츠 삽입

분명히 핵심 사항은 다음과 같습니다. 텍스트, 이미지, 링크 및 탐색을 동적으로 삽입합니다. 고품질 텍스트 콘텐츠는 검색 엔진이 웹 페이지의 주제와 콘텐츠를 이해하는 데 매우 중요합니다. 역동적인 웹사이트 시대에 웹사이트의 중요성은 의심의 여지가 없습니다.

이 테스트는 두 가지 시나리오에서 동적으로 텍스트를 삽입한 결과를 확인하도록 설계되었습니다.

1. 검색 엔진이 동적으로 삽입된 텍스트를 계산할 수 있는지 테스트하고 해당 텍스트는 페이지의 HTML 소스 코드에서 가져옵니다.

2. 검색 엔진이 페이지 HTML 소스 외부(외부 JavaScript 파일)에서 동적으로 삽입된 텍스트를 계산할 수 있는지 테스트합니다.

결과: 두 경우 모두 텍스트가 크롤링되어 포함되었으며 페이지 순위는 해당 콘텐츠에 따라 결정되었습니다. 시원한!

이에 대해 자세히 알아보기 위해 JavaScript로 작성된 클라이언트 측 전역 탐색을 테스트했으며 탐색의 링크가 document.writeIn 함수를 통해 삽입되었으며 완전히 크롤링 및 추적이 가능함을 확인했습니다. Google은 AngularJS 프레임워크와 HTML5 History API(pushState)를 사용하여 구축된 웹사이트를 해석하고, 렌더링하고, 색인을 생성하고, 기존의 정적 웹페이지처럼 순위를 매길 수 있습니다. 이것이 Google 크롤러가 외부 파일 및 JavaScript를 가져오는 것을 차단하지 않는 것이 중요한 이유이며 아마도 Google이 Ajax 지원 SEO 지침에서 이를 제거하는 이유일 것입니다. 전체 페이지를 간단히 렌더링할 수 있는데 HTML 스냅샷이 필요한 사람은 누구입니까?

테스트 결과 어떤 유형의 콘텐츠라도 결과는 동일하다는 것을 확인했습니다. 예를 들어 이미지는 DOM에 로드된 후 크롤링되고 포함됩니다. data-vocabulary.org 구조 데이터를 동적으로 생성하고 이를 DOM에 삽입하여 탐색경로를 만드는 테스트도 수행했습니다. 결과는? 성공적으로 삽입된 탐색경로가 검색 엔진 결과 페이지에 나타납니다.

Google에서는 이제 JSON-LD 마크업을 사용하여 구조화된 데이터를 형성할 것을 권장한다는 점에 주목할 필요가 있습니다. 앞으로도 이를 기반으로 한 콘텐츠가 더 많이 나올 것이라고 확신합니다.

4. 메타 데이터 및 페이지 요소를 동적으로 삽입합니다.

SEO에 중요한 다양한 태그를 DOM에 동적으로 삽입합니다.

제목 요소

메타 설명

메타 로봇

표준 태그

결과: 모든 경우에 태그는 크롤링되었으며 HTML 소스 코드의 요소처럼 작동했습니다.

우선순위를 이해하는 데 도움이 되는 흥미로운 보완 실험입니다. 상충되는 신호가 있을 때 어느 쪽이 승리할까요? 소스 코드에 noindex 및 nofollow 태그가 있고 DOM에 noindex 및 follow 태그가 있으면 어떻게 되나요? HTTP x-robots 응답 헤더는 이 프로토콜에서 어떻게 다른 변수로 작동합니까? 이는 향후 포괄적인 테스트의 일부가 될 것입니다. 그러나 테스트 결과 충돌이 발생하면 Google은 DOM을 선호하여 소스 코드의 태그를 무시하는 것으로 나타났습니다.

5. rel="nofollow"의 중요한 예

우리는 소스 코드와 DOM의 링크 수준에 나타나는 nofollow 속성을 Google이 어떻게 처리하는지 테스트하고 싶었습니다. 따라서 nofollow가 적용되지 않은 컨트롤을 만듭니다.

nofollow의 경우 소스 코드와 DOM에서 생성된 주석을 별도로 테스트합니다.

소스 코드의 nofollow는 예상대로 작동합니다(링크는 따라가지 않습니다). 그러나 DOM의 nofollow가 실패합니다(링크가 따라가고 페이지가 포함됨). 왜? DOM의 href 요소 수정이 너무 늦게 발생하기 때문에 Google은 rel="nofollow"를 추가하는 JavaScript 함수를 실행하기 전에 링크를 크롤링하고 URL을 대기열에 추가할 준비가 되어 있습니다. 그러나 href = "nofollow"인 a 요소가 DOM에 삽입되면 nofollow와 link가 동시에 삽입되므로 추적됩니다.

Results

역사적으로 모든 종류의 SEO 권장사항은 가능할 때마다 '일반 텍스트' 콘텐츠에 초점을 맞추는 것이었습니다. 그리고 동적으로 생성된 콘텐츠, AJAX 및 JavaScript 링크는 주요 검색 엔진의 SEO에 해를 끼칠 수 있습니다. 분명히 이것은 더 이상 Google의 문제가 아닙니다. JavaScript 링크는 일반 HTML 링크처럼 작동합니다(이것은 단지 표면일 뿐이며 뒤에서 무슨 일이 벌어지고 있는지는 알 수 없습니다).

JavaScript 리디렉션은 301 리디렉션과 유사하게 처리됩니다.

동적으로 삽입된 콘텐츠, 심지어 rel 표준 주석과 같은 메타 태그도 HTML 소스 코드에서나 초기 HTML이 구문 분석된 후 DOM을 생성하기 위해 JavaScript가 트리거될 때 동일한 방식으로 처리됩니다.

Google은 소스 코드뿐만 아니라 페이지를 완전히 렌더링하고 DOM을 이해할 수 있는 능력에 의존합니다. 정말 대단해요! (Google 크롤러가 외부 파일과 JavaScript를 가져올 수 있도록 허용하는 것을 잊지 마세요.)

Google은 다른 검색 엔진을 뒤쫓는 등 놀라운 속도로 혁신을 이루어왔습니다. 우리는 다른 검색 엔진에서도 동일한 유형의 혁신을 볼 수 있기를 바랍니다. 웹의 새로운 시대에도 경쟁력을 유지하고 실질적인 발전을 이루려면 HTML5, JavaScript 및 동적 웹사이트에 대한 지원이 향상되어야 합니다.

SEO에 대해서는 위의 기본 개념과 구글 기술을 아직 이해하지 못한 분들도 최신 기술을 따라잡기 위해 잘 공부하고 배워야 합니다. DOM을 고려하지 않으면 지분의 절반을 잃을 수도 있습니다.

관련 권장 사항:

배열 탐색을 위한 JavaScript 메서드 요약

JavaScript는 어떻게 배열을 생성합니까?

JavaScript 시작을 위한 기본 튜토리얼

위 내용은 Google 크롤러는 자바스크립트를 어떻게 크롤링하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!