가이드로 돌아가기

JavaScript 렌더링: 앱이 부트하기 전에 크롤러가 보는 것

크롤러는 앱이 부트하기 전에 귀하의 HTML을 읽으며, 대부분의 AI 크롤러는 JavaScript를 실행하지 않습니다. 렌더 일치를 확인하고 서버 응답의 격차를 닫는 방법.

검색 엔진은 먼저 귀하의 HTML을 가져와 렌더링한 뒤, 별도의 패스에서 JavaScript를 렌더링합니다. 수화 후에만 존재하는 것은 첫 번째 패스에서 보이지 않으며, 두 번째 패스까지의 지연은 많은 사이트에서 수일 단위입니다. AI 크롤러는 더 엄격합니다: 대부분 JavaScript를 전혀 실행하지 않으므로 원시 HTML이 전체 페이지가 됩니다. 이는 렌더 일치를 답해야 할 질문입니다. 제공된 HTML이 렌더링된 DOM과 동일한 제목, H1, 정규화, 메타 설명, 구조화된 데이터 및 본문 복사본을 포함합니까? 서버 렌더링 사이트에서는 구조적으로 그렇습니다. 클라이언트 렌더링 앱에서는 HTML이 하나의 div와 스크립트 태그의 쉘일 때가 많으며, 일치 격차는 총입니다. 쉘은 우리 엔진이 얇은 콘텐츠로 표시하는 것과 동일합니다. 두 개가 외부적으로 구분되지 않기 때문입니다. 40단어 HTML 문서는 나머지 2,000단어가 나중에 도착하든 없든 40단어 문서입니다. 아래 검사는 원시 HTML을 가져와 동일한 페이지 요소를 한 줄씩 렌더링된 버전과 비교하고, 두 요소가 다를 때 보고합니다. 차이가 있으면 해당 요소를 서버 응답에 포함시키고 크롤러가 기다리게 하지 마십시오.

콘텐츠가 클라이언트 측 하이드레이션을 필요로 함

왜 중요한가

검색 엔진과 AI 크롤러는 JavaScript를 실행하지 않을 수 있습니다. 핵심 콘텐츠가 하이드레이션 이후에만 나타나면 색인되지 않을 수 있고 사용자는 페이지를 보기까지 더 오래 기다리게 됩니다.

어떻게 체크하는가

초기 HTML에서 빈 앱 셸, 로딩 플레이스홀더, 핵심 SEO 콘텐츠를 확인했습니다.

어떻게 해결하는가

핵심 SEO 콘텐츠를 서버에서 렌더링하세요. React 또는 TanStack Start의 경우 SSR 중에 보고서 데이터를 가져와 점수, H1, 메타 설명, Canonical 태그, 구조화된 데이터를 클라이언트 측 하이드레이션을 기다리는 대신 초기 HTML에 포함하세요.

렌더 일치 불일치

왜 중요한가

크롤러와 AI 시스템이 페이지의 상충되는 버전을 보지 않도록 원시 HTML과 렌더링된 DOM은 동일한 SEO 정보를 전달해야 합니다.

어떻게 체크하는가

원시 HTML과 렌더링된 DOM을 비교하여 핵심 요소를 확인했습니다.

어떻게 해결하는가

원시 HTML과 렌더링된 DOM에 동일한 핵심 SEO 요소(제목, H1, Canonical, 메타 설명, 구조화된 데이터)가 포함되도록 하세요. 콘텐츠가 JavaScript로 주입된다면 서버 측 렌더링으로 옮겨 크롤러가 즉시 볼 수 있도록 하세요.

얇은 콘텐츠 셸 감지됨

왜 중요한가

검색 엔진은 제목, 링크 및 콘텐츠를 읽기 전에 깨끗한 페이지 응답이 필요합니다.

어떻게 체크하는가

샘플링된 페이지에서 HTTP 200을 반환하지만 렌더링된 콘텐츠가 비어 있거나 거의 없는 경우를 확인했습니다.

어떻게 해결하는가

HTTP 200을 반환하지만 보이는 텍스트가 없는 페이지에 의미 있는 렌더링 콘텐츠를 추가하거나, 페이지가 존재하지 않는다면 올바른 404 상태를 반환하세요. 이 점이 중요한 이유: Google은 비어 있는 200 상태 페이지를 소프트 404로 취급해 크롤링 예산을 낭비하고 색인을 방해합니다.

사이트 순위 확인하기

실행 가능한 인사이트와 우선 순위 수정을 포함한 무료 AI 기반 SEO 보고서를 받아보세요.

가입 필요 없음.