동적 렌더링을 사용하여 대처

일부 웹사이트에서 자바스크립트가 브라우저에서 실행될 때 페이지에 추가 콘텐츠를 생성합니다. 이를 클라이언트 측 렌더링이라고 합니다. Google 검색이 자바스크립트를 실행하는 동안 Google 검색에는 제한이 있는 자바스크립트 기능이 있으며 일부 페이지에서는 렌더링된 HTML에 콘텐츠가 표시되지 않는 문제가 발생할 수 있습니다. 다른 검색엔진은 자바스크립트를 무시할 수 있으며 자바스크립트 생성 콘텐츠가 표시되지 않습니다.

동적 렌더링은 검색엔진에서 자바스크립트 생성 콘텐츠를 사용할 수 없는 웹사이트가 사용할 수 있는 임시방편입니다. 동적 렌더링 서버는 자바스크립트로 생성된 콘텐츠와 관련해 문제가 있을 수 있는 봇을 감지하여 이러한 봇에는 자바스크립트를 사용하지 않고 서버에서 렌더링된 버전을 제공하는 한편 사용자에게는 클라이언트 측 렌더링 버전의 콘텐츠를 표시합니다.

동적 렌더링은 임시방편이며, 상황을 더욱 복잡하게 만들고 추가적인 리소스도 필요하기 때문에 권장되는 해결책이 아닙니다.

동적 렌더링을 사용해야 하는 사이트

동적 렌더링은 빠르게 변화하며 색인 생성이 가능한 공개 자바스크립트 생성 콘텐츠 또는 원하는 크롤러에서 지원하지 않는 자바스크립트 기능을 사용하는 콘텐츠에 적용할 수 있는 임시방편입니다. 모든 사이트가 동적 렌더링을 사용해야 하는 것은 아니며, 웹 렌더링에 관한 이 도움말에 설명된 것처럼 동적 렌더링보다 더 나은 해결책이 있습니다.

동적 렌더링 작동 방식 이해하기

동적 렌더링을 사용하려면 웹 서버에서 크롤러를 감지해야 합니다(예: 사용자 에이전트 확인). 크롤러의 요청은 렌더러로 라우팅되고 사용자의 요청은 정상적으로 제공됩니다. 필요한 경우 동적 렌더러에서 크롤러에 적합한 콘텐츠 버전을 제공합니다(예: 정적 HTML 버전을 제공할 수 있음). 동적 렌더러는 모든 페이지에 또는 페이지별로 사용하도록 설정할 수 있습니다.

동적 렌더링 작동 방식을 보여주는 다이어그램입니다. 다이어그램은 브라우저에 직접 초기 HTML과 자바스크립트 콘텐츠를 제공하는 서버를 보여줍니다. 반대로 이 다이어그램은 렌더러에 초기 HTML과 자바스크립트를 제공하는 서버를 보여줍니다. 이 경우 렌더러는 초기 HTML과 자바스크립트를 정적 HTML로 변환합니다. 콘텐츠가 변환되면 렌더러가 정적 HTML을 크롤러에 제공합니다.

동적 렌더링은 클로킹이 아님

Googlebot은 일반적으로 동적 렌더링을 클로킹으로 간주하지 않습니다. 동적 렌더링이 유사한 콘텐츠를 생성하는 한 Googlebot은 동적 렌더링을 클로킹으로 간주하지 않습니다.

동적 렌더링을 설정하는 동안 사이트에 오류 페이지가 생성될 수 있습니다. Googlebot은 이 오류 페이지를 클로킹으로 간주하지 않으며 오류를 다른 오류 페이지와 마찬가지로 처리합니다.

동적 렌더링을 사용하여 사용자와 크롤러를 대상으로 완전히 다른 콘텐츠를 제공하는 것은 클로킹으로 간주될 수 있습니다. 예를 들어, 사용자에게는 고양이와 관련된 페이지를 제공하고 크롤러에는 개와 관련된 페이지를 제공하는 웹사이트는 클로킹으로 간주될 수 있습니다.

동적 렌더링 구현하기

콘텐츠에 동적 렌더링을 설정하려면 Google 일반 가이드라인을 따르세요. 구성은 구현에 따라 매우 다양하므로 특정 구성 세부정보를 참조해야 합니다.

  1. 동적 렌더기(예: Puppeteer, Rendertron 또는 prerender.io)를 설치하고 구성하여 크롤러가 더 쉽게 사용할 수 있는 정적 HTML로 콘텐츠를 변환합니다.
  2. 정적 HTML을 수신할 사용자 에이전트를 선택하고 사용자 에이전트를 업데이트하거나 추가하는 방법에 관한 구체적인 구성 세부정보를 참고합니다. 다음은 Rendertron 미들웨어의 일반적인 사용자 에이전트 목록 예입니다. 
    export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
  3. 사전 렌더링으로 인해 서버 속도가 느려지거나 사전 렌더링 요청 수가 많아진 경우 사전 렌더링된 콘텐츠의 캐시를 구현하거나 정상적인 크롤러에서 요청했는지 확인하는 것이 좋습니다.
  4. 사용자 에이전트에 데스크톱 또는 모바일 콘텐츠가 필요한지 확인합니다. 동적 게재를 사용하여 적절한 데스크톱 또는 모바일 버전을 제공할 수 있습니다. 다음은 구성에서 사용자 에이전트에 데스크톱 또는 모바일 콘텐츠가 필요한지 결정하는 방법의 예입니다. 
    isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])

    
if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
  5. 선택한 크롤러에 정적 HTML을 전달하도록 서버를 구성합니다. 기술에 따라 이 작업을 실행할 수 있는 여러 가지 방법이 있으며 다음은 몇 가지 예입니다.
    • 크롤러에서 동적 렌더러로 전달되는 프록시를 요청합니다.
    • 배포 프로세스의 일환으로 사전 렌더링하고 서버에서 크롤러에 정적 HTML을 제공하도록 합니다.
    • 맞춤 서버 코드에 동적 렌더링을 빌드합니다.
    • 사전 렌더링 서비스에서 크롤러로 정적 콘텐츠를 제공합니다.
    • 서버용 미들웨어(예: Rendertron 미들웨어)를 사용합니다.

구성 확인

동적 렌더링 구현이 끝나면 다음 테스트로 URL을 검사하여 모두 정상적으로 작동하는지 확인합니다.

  1. 모바일 친화성 테스트로 모바일 콘텐츠를 테스트하여 Google에서 콘텐츠를 볼 수 있는지 확인합니다.

    성공: 모바일 콘텐츠가 사용자에게 표시하려는 콘텐츠와 일치합니다.

    다시 시도: 표시되는 콘텐츠가 예상한 콘텐츠와 일치하지 않는 경우 문제 해결 섹션을 참고합니다.

  2. URL 검사 도구로 데스크톱 콘텐츠를 테스트하여 렌더링된 페이지에도 데스크톱 콘텐츠가 표시되는지 확인합니다. 렌더링된 페이지는 Google이 보는 페이지입니다.

    성공: 데스크톱 콘텐츠가 사용자에게 표시하려는 콘텐츠와 일치합니다.

    다시 시도: 표시되는 콘텐츠가 예상한 콘텐츠와 일치하지 않는 경우 문제 해결 섹션을 참고합니다.

  3. 구조화된 데이터를 사용하는 경우 구조화된 데이터가 리치 결과 테스트로 올바르게 렌더링되는지 테스트합니다.

    성공: 구조화된 데이터가 예상대로 표시됩니다.

    다시 시도: 구조화된 데이터가 예상대로 표시되지 않는 경우 문제 해결 섹션을 참고합니다.

문제 해결

콘텐츠가 모바일 친화성 테스트에서 오류를 표시하거나 Google 검색결과에 표시되지 않는 경우 가장 일반적인 문제를 해결해 보세요. 여전히 문제가 계속된다면 Google 검색 센터 도움말 커뮤니티에 새 주제로 게시하세요.

콘텐츠가 불완전하거나 다르게 보임

문제의 원인: 렌더러가 잘못 구성되었거나 웹 애플리케이션이 렌더링 솔루션과 호환되지 않을 수 있습니다. 시간 제한으로 인해 콘텐츠가 올바르게 렌더링되지 않는 경우도 있습니다.

문제 해결: 특정 렌더링 솔루션에 관한 문서를 참고하여 동적 렌더링 설정을 디버깅합니다.

응답 속도가 느림

문제의 원인: 요청 시 페이지를 렌더링하기 위해 헤드리스 브라우저를 사용하면 응답 시간이 길어져 크롤러가 요청을 취소하고 콘텐츠의 색인을 생성하지 못할 수 있습니다. 또한 응답 시간이 길어지면 크롤러가 콘텐츠를 크롤링하고 색인을 생성할 때 크롤링 속도를 낮출 수 있습니다.

문제 해결

  1. 사전 렌더링된 HTML을 위한 캐시를 설정하거나 빌드 프로세스의 일환으로 콘텐츠의 정적 HTML 버전을 만듭니다.
  2. 구성에 캐시를 사용 설정했는지 확인합니다(예: 크롤러가 캐시를 가리키도록 설정).
  3. 모바일 친화성 테스트 또는 webpagetest(Google 크롤러 사용자 에이전트 목록의 맞춤 사용자 에이전트 문자열 포함)와 같은 테스트 도구로 크롤러가 콘텐츠를 신속하게 크롤링하는지 확인합니다. 요청이 타임아웃되면 안 됩니다.

웹 구성요소가 정상적으로 렌더링되지 않음

문제의 원인: Shadow DOM이 페이지의 나머지 부분으로부터 분리되어 있습니다. Rendertron과 같은 렌더링 솔루션은 분리된 shadow DOM 내의 콘텐츠를 볼 수 없습니다. 자세한 내용은 웹 구성요소 권장사항을 참조하세요.

문제 해결

  1. 맞춤 요소 및 shadow DOM용 webcomponents.js 폴리필을 로드합니다.
  2. 모바일 친화성 테스트 또는 URL 검사 도구를 사용하여 콘텐츠가 렌더링 솔루션의 렌더링된 HTML에 표시되는지 확인합니다.

구조화된 데이터가 없음

문제의 원인: 구조화된 데이터 사용자 에이전트가 없거나 출력에 JSON-LD 스크립트 태그가 포함되지 않으면 구조화된 데이터 오류가 발생할 수 있습니다.

문제 해결

  1. 리치 결과 테스트를 사용하여 구조화된 데이터가 페이지에 있는지 확인합니다. 그런 다음 데스크톱 또는 모바일 Googlebot으로 사전 렌더링된 콘텐츠를 테스트하도록 사용자 에이전트를 구성합니다.
  2. 콘텐츠의 동적 렌더링된 HTML에 JSON-LD 스크립트 태그가 포함되어 있는지 확인합니다. 자세한 내용은 렌더링 솔루션 문서를 참조하세요.