Googlebot이 Discourse를 크롤링할 때 보는 내용

개발
1

요약하자면, Googlebot이 Discourse를 크롤링하는 방식을 재현하는 것은 반인간적으로(매우 어렵지만) 가능합니다. 시작하는 방법은 다음과 같습니다…

Googlebot이 되세요

  1. 시크릿(비공개) 창을 엽니다 (항상 새로운 환경에서 시작하세요)
  2. DevTools를 엽니다
  3. DevTools에서 Network Conditions(네트워크 조건)을 엽니다
  4. ‘Use browser default’(브라우저 기본값 사용) 체크박스를 해제합니다
  5. 드롭다운 메뉴에서 Googlebot Smartphone을 선택합니다
  6. https://meta.discourse.org로 이동합니다 (화면이 매우 다르게 보일 수 있습니다. Googlebot이나 봇은 이를 신경 쓰지 않으므로 큰 문제가 아닙니다)
  7. View > Developer > View Source(보기 > 개발자 > 소스 보기)로 이동합니다
  8. 소스를 복사하여 .html 파일에 붙여넣습니다

잘하셨습니다! 이제 인간들이 Googlebot이 크롤링하고 캐시한 내용을 확인하기 위해 참조하는 파일을 생성한 것입니다.

Googlebot의 역할은 끝났습니다. 이제 브라우저에서 캐시된 파일을 렌더링할 시간입니다.

Chrome이 되세요

  1. 터미널을 열고 npx http-server를 실행합니다
  2. 해당 파일로 이동합니다
  3. Chrome DevTools를 엽니다
  4. Elements(요소) 패널에서 <html...>를 우클릭하고 Copy outerHTML(외부 HTML 복사)을 선택합니다.
  5. 이것이 캐시된 것이 아니라 인덱싱될 콘텐츠입니다. 인덱싱, 인덱싱!

요약하자면, Googlebot은 HTML을 가져오고 Chrome은 이를 렌더링합니다. 렌더링된 HTML이 핵심입니다. 소중한 콘텐츠와 링크가 여기에 제대로 표시되는지 확인하세요.

2

“크롬과 하나가 되다” 섹션 아래 단계들의 목적은 무엇인가요?

첫 번째 목록의 7번 단계를 대신하여 “outerHTML 복사” 단계를 수행할 수 있지 않나요?

3

curl을 사용해서 가져올 수도 있습니다:

curl -s https://meta.discourse.org/ > page.html

("crawler" 클래스가 포함되어 있을 것입니다.)

그 다음 page.html 파일을 브라우저로 열면 됩니다.

또는 에디터에서 코드를 검사하려면:

curl -s https://meta.discourse.org/ | vim -
4

캐시된 HTML은 Chrome(헤드리스)에서 렌더링됩니다. 렌더링 시 JavaScript를 통해 추가 텍스트와 링크가 DOM에 삽입될 수 있습니다. Google은 인덱싱을 위해 렌더링된 정보를 고려합니다.

이것이 Googlebot이 JavaScript 중심의 애플리케이션에서 콘텐츠를 가져오는 방식입니다. Google에서 JavaScript로만 콘텐츠가 렌더링되는 것으로 알려진 항목을 검색한 후, 세 점 아이콘을 클릭하고 > 캐시 버튼을 클릭하고 > 소스 보기 버튼을 클릭한 다음, 이를 복사하여 Chrome에서 렌더링하면 DOM에 어떤 콘텐츠가 표시되는지 확인할 수 있습니다.

참고: Chrome에서 렌더링하기 전에 상대 경로(CSS 및 JS 리소스)를 절대 경로로 업데이트하세요 ^^

5

curl을 사용하면 훨씬 편하네요!

Googlebot 사용자 에이전트 문자열을 반드시 포함해야 합니다. 예를 들어, Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)처럼요. 서버가 Googlebot에게 다른 HTML을 전송할 수 있기 때문입니다.

6

출력은 같을 것 같지만, User Agent를 추가하는 데 해가 되지는 않습니다. Chrome은 잘 모르겠지만, Firefox에서는 네트워크 탭에서 요청을 우클릭한 뒤 "curl로 복사"를 선택하면 브라우저 요청을 모방하는 완전한 헤더 세트를 가져올 수 있습니다.