Google 검색의 자바스크립트 문제를 디버깅하기 위한 웹 개발자 도구

개별 페이지 또는 전체 사이트의 검색엔진 최적화 문제를 디버깅하는 방법

Google은 Google 검색의 자바스크립트 검색엔진 최적화 문제를 디버깅하는 데 도움이 되는 많은 도구를 제공합니다. 이 가이드에서는 사용 가능한 도구의 개요와 각 도구를 사용해야 하는 경우에 대한 제안사항을 설명합니다.

Lighthouse의 기본적인 검색엔진 최적화 문제 찾기

첫 번째 조사에는 Lighthouse를 사용합니다. 다양한 검색엔진 최적화 감사가 함께 제공됩니다.

Lighthouse의 검색엔진 최적화 감사 스크린샷

Lighthouse 검색엔진 최적화 감사는 웹사이트의 단일 페이지를 우선적으로 확인하는 매우 기본적인 검사입니다. 가장 흔한 실수를 파악하고 검색엔진의 검색 가능 여부에 대한 웹사이트의 첫인상을 알 수 있게 해줍니다. Lighthouse는 브라우저에서 실행되므로 Googlebot이 웹페이지를 보는 방식을 정확하게 나타내지는 않습니다. 예를 들어 브라우저 (및 Lighthouse)는 robots.txt를 사용하여 네트워크에서 리소스를 가져올 수 있는지 여부를 판단하지 않지만 Googlebot은 가져옵니다. 따라서 Lighthouse에서 잠재적인 문제를 발견하면 해결해야 하지만 다른 도구를 사용하여 문제를 추가로 디버그해야 할 수도 있습니다.

Google 검색 테스트 도구로 페이지 유효성 검사하기

Google 검색은 Googlebot이 웹 콘텐츠를 보는 방식을 테스트하는 도구 모음을 제공합니다.
이러한 도구 중 일부는 개발 환경에서 테스트할 때 특히 유용합니다.

local-tunnel 또는 ngrok 같은 도구와 함께 사용하면 로컬 개발 환경에서 임시 공개 URL을 만들고 Google의 테스트 도구로 테스트하는 동안 빠르게 반복할 수 있습니다.

이러한 테스트 도구는 다음과 같은 여러 유용한 정보를 제공합니다.

  • Googlebot이 색인 생성에 사용할 렌더링된 HTML입니다.
  • 로드된 리소스 개요 및 리소스를 로드할 수 없는 이유에 관한 설명
  • 스택 트레이스가 있는 콘솔 로그 메시지 및 JavaScript 오류
모바일 친화성 테스트의 스크린샷

Google Search Console URL 검사 도구로 페이지 상태에 관한 자세한 정보를 확인할 수도 있습니다.

URL 검사 도구의 스크린샷

여기에서 확인할 수 있는 내용은 다음과 같습니다.

  • URL이 Google 검색 색인에 있거나 나중에 색인을 생성할 수 있는 경우
  • 최근 크롤링에서 렌더링된 HTML의 모습
  • 페이지를 새로 크롤링하기 위해 렌더링된 HTML이 표시되는 방식
  • 페이지 리소스에 관한 정보
  • JavaScript 로그 메시지 및 스택 트레이스 관련 오류
  • 스크린샷
  • 모바일 사용 편의성 문제
  • 페이지에서 감지된 구조화된 데이터 및 유효한지 여부

이러한 도구를 사용하면 대부분의 문제를 파악하고 해결할 수 있습니다. 또한 Google 검색은 Google 검색 관련 자바스크립트 문제 해결에 관한 문서를 제공하여 문제의 원인을 확인한 후 취해야 할 조치를 자세히 안내합니다.

Google Search Console로 사이트 상태 조사하기

마지막 섹션의 도구는 웹사이트의 한 페이지에서 특정 문제를 해결하는 데 효과적이지만, 전체 웹사이트를 더 포괄적으로 파악하려면 Google Search Console을 사용하면 됩니다.

범위 보고서

범위 보고서는 웹사이트에서 색인이 생성된 페이지와 문제가 있는 페이지를 보여줍니다.

범위 보고서의 스크린샷

코어 웹 바이탈 보고서

코어 웹 바이탈 보고서를 사용하면 코어 웹 바이탈 측면에서 웹사이트 페이지의 실적을 간략히 확인할 수 있습니다.

코어 웹 바이탈 보고서의 스크린샷

이러한 도구를 개발자 도구의 일부로 만들기

이 도움말에서는 페이지를 게시하기 전에 페이지를 테스트하는 것부터 실제 웹사이트의 페이지를 모니터링하는 것까지 다양한 목적을 위한 일련의 도구를 살펴봤습니다. 이를 통해 Google 검색에서 내 웹사이트가 어떻게 검색되는지 투명하게 확인할 수 있습니다. 이러한 도구 중 일부는 개발 툴킷의 유용한 부분이 될 수 있고, 다른 도구는 문제의 원인을 파악하고 영향을 받은 페이지를 수정하는 임시 도구와 같을 수 있습니다. 개발자를 위한 Google 검색 또는 JavaScript 검색엔진 최적화에 대해 자세히 알아보려면 공식 개발자를 위한 검색 문서를 확인하세요.