Meta Checker는 현재 브라우저에 그려진 페이지와 서버가 처음 보낸 HTML을 나란히 비교합니다. 자바스크립트가 메타데이터를 뒤늦게 바꿨다면 그 차이가 상태 칩으로 나타납니다.
현재 DOM과 최초 HTML은 무엇인가요?
서버가 브라우저에 처음 보내는 문서를 최초 HTML 응답이라고 합니다. 브라우저는 이 문서를 받은 뒤 자바스크립트를 실행해 내용을 추가하거나 바꿀 수 있습니다. 실행이 끝난 뒤 개발자 도구에서 보이는 구조가 현재 DOM입니다.
최초 HTML이 식당 문 앞의 인쇄 메뉴판이라면, 현재 DOM은 손님이 자리에 앉은 뒤 태블릿에서 보는 최신 메뉴판과 비슷합니다. 둘이 다르면 어떤 손님이나 크롤러는 서로 다른 정보를 볼 수 있습니다.
Google처럼 자바스크립트를 실행할 수 있는 검색엔진도 있지만, 모든 검색봇·AI 크롤러·공유 카드 수집기가 같은 방식으로 렌더링하는 것은 아닙니다. 중요한 제목, 설명, canonical, robots, 구조화된 데이터는 가능하면 최초 HTML에도 넣는 편이 안전합니다.
Same, New, Changed, Removed 읽기
| 상태 | 뜻 | 무엇을 확인하나요? |
|---|---|---|
| Same | 현재 DOM과 최초 HTML 값이 같습니다. | 가장 예측하기 쉬운 상태입니다. |
| New | 현재 DOM에만 값이 있습니다. | 자바스크립트 실행 전에도 필요한 정보인지 확인합니다. |
| Changed | 두 값이 서로 다릅니다. | 어느 값이 의도한 최종 값인지 결정합니다. |
| Removed | 최초 HTML에는 있었지만 현재 DOM에서는 사라졌습니다. | 페이지 코드나 태그 관리자가 삭제했는지 조사합니다. |
- 1왼쪽 탭에서 기본·콘텐츠·기술·스키마·이미지·링크 검사를 이동합니다.
- 2기본 정보에는 제목, 메타 설명, canonical 같은 핵심 신호가 모입니다.
- 3Changed 행에는 현재 값과 Before 값이 함께 표시됩니다.
첫 검사, 그대로 따라 하기
검사할 일반 웹페이지를 엽니다
Chrome의 chrome:// 페이지나 확장 프로그램 스토어처럼 보호된 페이지는 검사할 수 없습니다. 공개 웹페이지를 먼저 여세요.
도구 모음에서 Meta Checker를 엽니다
팝업 상단 URL이 지금 검사하려는 페이지와 같은지 확인합니다. 다르면 원하는 탭을 다시 활성화한 뒤 새로고침하세요.
기본 탭의 값과 상태 칩을 읽습니다
값이 N/A라면 없는 것입니다. Same, New, Changed, Removed 중 하나가 보이면 현재 DOM과 최초 HTML의 차이를 확인하세요.
</> 버튼으로 실제 태그를 봅니다
오른쪽 코드 버튼을 누르면 복사해 개발자나 CMS 설정 담당자에게 전달할 수 있는 원본 태그가 펼쳐집니다.
왼쪽 탭을 한 번씩 훑습니다
콘텐츠의 제목 구조·Open Graph, 기술의 robots·HTTP, 스키마의 JSON-LD, 이미지·링크 문제 개수를 차례로 봅니다.
문제를 발견한 뒤 개선하는 순서
- 의도한 값을 먼저 문장으로 정합니다. 예: “이 글의 대표 URL은
/guide다.” - CMS SEO 설정이나 HTML
<head>에서 해당 값을 수정합니다. - 캐시가 있다면 비우고 페이지를 새로고침합니다.
- Meta Checker의 새로고침 버튼을 눌러 같은 행을 다시 봅니다.
- 값이 맞는지, 최초 HTML에도 포함되는지, 다른 신호와 충돌하지 않는지 확인합니다.
완료 체크리스트
- 팝업의 URL이 검사 대상과 같다.
- 네 가지 상태의 차이를 설명할 수 있다.
- 코드 버튼을 열어 실제 태그를 확인했다.
- 왼쪽의 여섯 개 탭을 모두 열어 보았다.
- 수정 뒤에는 페이지와 Meta Checker를 다시 새로고침한다.