페이지의 렌더링된 소스 보기

개요

페이지를 방문하면 웹사이트에서 브라우저로 HTML 코드를 전송합니다. 이 소스 코드는 스크립트와 같은 추가 리소스를 포함하는 경우가 많습니다. 이러한 추가 리소스는 로드되어야 하고, 페이지 코드를 변경할 수도 있습니다.

'소스 표시'를 마우스 오른쪽 버튼으로 클릭하면, 일반적으로 스크립트 및 기타 리소스가 로드되고 실행되기 전에 브라우저에 반환된 원본 페이지 코드만 표시됩니다. 리소스가 모두 로드되고 모든 스크립트가 실행되고 나면 브라우저에서 렌더링된 최종 페이지의 코드를 확인해야 하는 경우가 많은데, 이는 페이지 문제를 해결할 때 특히 그렇습니다. 예를 들면 다음과 같습니다.

• 인증에 사용된 Google 애널리틱스 또는 Google 태그 관리자 태그를 검색하려는 경우
• 페이지 로드 및 화면을 디버그하려는 경우(즉, 로드하려는 모든 라이브러리 및 기타 리소스가 있는지 확인하려는 경우)
• 제공된 페이지에서 구조화된 데이터를 확인하려는 경우

렌더링된 소스를 보는 방법

다음은 웹페이지의 렌더링된 소스 코드를 확인하는 몇 가지 방법입니다.

• Chrome 브라우저:  페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 렌더링된 페이지의 모든 HTML을 확인합니다. Ctrl + F(Windows) 또는 Command + F(Mac)를 사용하여 렌더링된 HTML에서 항목을 검색합니다.
• 내 사이트의 페이지: 
  1. URL 검사 도구에 URL을 직접 입력하거나 Search Console 보고서 대부분에 표시되는 URL 옆의 검사 링크 를 클릭하여 URL을 검사합니다.
  2. 실제 URL 테스트 > 테스트된 페이지 보기를 클릭합니다.
  3. HTML 탭에 페이지의 렌더링된 HTML이 표시됩니다.
• 모든 사이트의 페이지(소유한 사이트 포함):
  1. 모바일 친화성 테스트를 엽니다.
  2. 페이지의 URL을 입력합니다. 페이지는 로그인하지 않아도 Google이 접근할 수 있어야 하며, robots.txt에 의해 차단되어서도 안 됩니다.
  3. 테스트된 페이지 보기를 클릭합니다.
  4. HTML 탭에 페이지의 렌더링된 HTML이 표시됩니다.