동적 렌더링 시작하기

현재는 자바스크립트를 처리하기가 어렵고, 일부 검색엔진 크롤러만 성공적으로 또는 즉시 자바스크립트를 처리할 수 있습니다. 향후 문제가 해결되기를 기대하며 그 전에 이 문제의 해결 방법으로 동적 렌더링을 사용하는 것이 좋습니다. 동적 렌더링이란 특정 사용자 에이전트를 위한 클라이언트 측에서 렌더링된 콘텐츠와 사전에 렌더링된 콘텐츠 간의 전환을 의미합니다.

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

동적 렌더링은 빠르게 변화하며 색인을 생성하는 공개 자바스크립트 생성 콘텐츠 또는 원하는 크롤러에서 지원하지 않는 자바스크립트 기능을 사용하는 콘텐츠에 유용합니다. 모든 사이트가 동적 렌더링을 사용해야 하는 것은 아닙니다. 동적 렌더링은 크롤러 관련 해결 방법입니다.

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

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

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

동적 렌더링 구현

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

  1. 동적 렌더러를 설치하고 구성하여 크롤러가 더 쉽게 사용할 수 있는 정적 HTML로 콘텐츠를 변환합니다. 몇 가지 일반적인 동적 렌더러에는 Puppeteer, Rendertron, prerender.io가 있습니다.
  2. 정적 HTML을 수신해야 한다고 생각하는 사용자 에이전트를 선택하고 사용자 에이전트를 업데이트하거나 추가하는 방법과 관련된 구성 세부정보를 참조합니다. 다음은 Rendertron 미들웨어의 일반적인 사용자 에이전트 목록 예입니다.
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      '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에서 콘텐츠를 볼 수 있는지 확인합니다.

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

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

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

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

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

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

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

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

문제해결

콘텐츠가 모바일 친화성 테스트에서 오류를 표시하거나 Google 검색결과에 표시되지 않는 경우 아래 표시된 가장 일반적인 문제를 해결해 보세요. 그래도 문제가 계속되는 경우 웹마스터 포럼에 새로운 주제를 게시하세요.

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

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

done 문제 해결: 특정 렌더링 솔루션에 관한 문서를 참조하여 동적 렌더링 설정을 디버깅하세요.

응답 속도가 느림

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

done 문제 해결

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

구조화된 데이터가 없음

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

done 문제 해결

  1. 구조화된 데이터용 테스트 도구를 사용해 구조화된 데이터가 페이지에 표시되는지 확인합니다. 그런 다음 구조화된 데이터용 테스트 도구를 위한 사용자 에이전트를 구성하여 사전 렌더링된 콘텐츠를 테스트합니다.
  2. 콘텐츠의 동적 렌더링된 HTML에 JSON-LD 스크립트 태그가 포함되어 있는지 확인합니다. 자세한 내용은 렌더링 솔루션 문서를 참조하세요.

다음에 대한 의견 보내기...