(번역) 구글이 색인 과정에서 자바스크립트를 처리하는 방법

원문: https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

MERJ와 버셀의 실증적 연구를 통해 구글의 렌더링 과정을 밝혀보겠습니다.

검색 엔진이 웹 페이지를 크롤링하고, 렌더링하고, 색인하는 방식을 이해하는 것은 사이트를 검색 엔진에 최적화하는 데 매우 중요합니다. 구글과 같은 검색 엔진들이 색인 과정을 변경함에 따라 무엇이 효과적이고 무엇이 그렇지 않은지 파악하기가 어려워졌습니다. 특히 클라이언트 사이드 자바스크립트와 관련해서 더욱 그렇습니다.

우리는 아래와 같은 오래된 믿음으로 인해 커뮤니티가 앱 SEO에 대한 최선의 방법을 확신하지 못하고 있다는 점을 알게 되었습니다.

1. “구글은 클라이언트 사이드 자바스크립트를 렌더링할 수 없습니다.”
2. “구글은 자바스크립트 페이지를 다르게 취급합니다.”
3. “렌더링 대기열과 타이밍이 SEO에 큰 영향을 미칩니다.”
4. “자바스크립트가 많이 사용된 사이트는 페이지 발견이 더 느립니다.”

이 믿음이 올바른지 검증하기 위해, 우리는 선도적인 SEO 및 데이터 엔지니어링 컨설팅 회사인 MERJ와 협력하여 구글의 크롤링 행동에 대한 새로운 실험을 수행했습니다. 우리는 구글의 SEO 능력을 테스트하고 검증하기 위해 다양한 사이트에서 10만건 이상의 구글봇 요청을 분석했습니다.

가장 먼저 구글의 렌더링이 어떻게 발전해 왔는지 살펴보겠습니다. 그런 다음, 우리의 연구 결과와 그것이 현대 웹 앱에 미치는 실제 영향에 대해 탐구해 보겠습니다.

목차.

• 구글 렌더링 기능의 진화
• 연구 방법론
• 오해 1: “구글은 자바스크립트 콘텐츠를 렌더링할 수 없습니다”
• 오해 2: “구글은 자바스크립트 페이지를 다르게 취급합니다”
• 오해 3: “렌더링 대기열과 타이밍이 SEO에 큰 영향을 미칩니다”
• 오해 4: “자바스크립트가 많이 사용된 사이트는 페이지 발견이 더 느립니다”
• 전반적인 시사점과 제안
• 새로운 정보를 바탕으로 나아가기
• MERJ 소개

구글 렌더링 기능의 진화

수년에 걸쳐 구글의 웹 콘텐츠 크롤링 및 색인 능력은 크게 변화했습니다. 이러한 진화를 살펴보는 것은 현대 웹 애플리케이션의 SEO 현황을 이해하는데 중요합니다.

2009년 이전: 제한적인 자바스크립트 지원

검색 엔진의 초기 시대에 구글은 주로 정적 HTML 콘텐츠만을 색인했습니다. 자바스크립트로 생성된 콘텐츠는 대부분 검색 엔진에 보이지 않았으며, 이에 따라 SEO 목적으로 정적 HTML이 광범위하게 사용되었습니다.

2009–2015: AJAX 크롤링 체계

구글은 AJAX 크롤링 체계를 도입하여 웹사이트가 동적으로 생성된 콘텐츠의 HTML 스냅샷을 제공할 수 있게 했습니다. 이는 개발자들이 페이지의 크롤링 가능한 별도 버전을 만들어야 하는 임시 해결책이었습니다.

2015–2018: 초기 자바스크립트 렌더링

구글은 헤드리스 크롬 브라우저를 사용하여 페이지를 렌더링하기 시작했는데, 이는 큰 진전이었습니다. 하지만, 이 구형 브라우저 버전은 여전히 최신 자바스크립트 기능을 처리하는 데 한계가 있었습니다.

2018-현재: 현대적 렌더링 기능

오늘날 구글은 최신 웹 기술에 발맞춰 최신 버전의 크롬을 렌더링에 사용합니다. 현재 시스템의 주요 특징은 다음과 같습니다.

1. 보편적 렌더링: 구글은 이제 일부가 아닌 모든 HTML 페이지를 렌더링하려 시도합니다.
2. 최신 브라우저: 구글봇은 최신 안정 버전의 크롬/크로미움을 사용하여 현대적인 자바스크립트 기능을 지원합니다.
3. 무상태 렌더링: 각 페이지 렌더링은 이전 렌더링의 쿠키나 상태를 유지하지 않는 새로운 브라우저 세션에서 발생합니다. 구글은 일반적으로 탭 콘텐츠나 쿠키 배너와 같은 페이지 내 항목을 클릭하지 않습니다.
4. 클로킹: 구글은 순위 조작을 위해 사용자와 검색 엔진에 다른 콘텐츠를 보여주는 것을 금지합니다. User-Agent에 따라 콘텐츠를 변경하는 코드는 피해야 합니다. 대신 구글을 위해 앱의 무상태 렌더링을 최적화하고, 개인화는 상태 기반 방법으로 구현해야 합니다.
5. 애셋 캐싱: 구글은 애셋을 캐싱하여 웹페이지 렌더링 속도를 높입니다. 이는 리소스를 공유하는 페이지와 같은 페이지의 반복 렌더링에 유용합니다. HTTP Cache-Control 헤더 대신 구글의 웹 렌더링 서비스는 자체 내부 휴리스틱을 사용하여 캐시 된 애셋이 여전히 최신 상태인지, 또는 다시 다운로드해야 하는지를 결정합니다.

오늘날 구글의 색인 과정은 다음과 같습니다.

구글이 할 수 있는 일에 대해 더 잘 이해했으니, 이제 몇 가지 흔한 오해들과 그것들이 SEO에 어떤 영향을 미치는지 살펴보겠습니다.

연구 방법론

언급한 오해를 조사하기 위해 버셀의 인프라와 MERJ의 웹 렌더링 모니터(Web Rendering Monitor, WRM) 기술을 사용하여 연구를 수행했습니다. 연구는 nextjs.org에 초점을 맞추었고, monogram.io와 basement.io에서 추가 데이터를 수집했으며, 2024년 4월 1일부터 4월 30일까지의 기간을 다뤘습니다.

데이터 수집

우리는 이 사이트들에 맞춤형 엣지 미들웨어를 배치하여 검색 엔진 봇의 요청을 가로채고 분석했습니다. 이 미들웨어를 통해 다음과 같은 작업을 수행할 수 있었습니다.

1. 다양한 검색 엔진과 AI 크롤러의 요청을 식별하고 추적합니다. (이 쿼리에는 사용자 데이터가 포함되지 않았습니다.)
2. 봇에 대한 HTML 응답에 경량 자바스크립트 라이브러리를 주입합니다.

페이지 렌더링이 완료되면 트리거되는 이 자바스크립트 라이브러리는 다음과 같은 데이터를 장기 실행 서버로 다시 보냈습니다.

• 페이지 URL.
• 고유한 요청 식별자 (일반 서버 액세스 로그와 페이지 렌더링을 매칭하기 위함).
• 렌더링 완료 타임스탬프 (이는 서버에서 자바스크립트 라이브러리 요청 수신 시간을 사용하여 계산됩니다).

데이터 분석

서버 액세스 로그에 있는 초기 요청과 미들웨어가 외부 비콘 서버로 보낸 데이터를 비교함으로써 다음과 같은 작업을 수행할 수 있었습니다.

• 검색 엔진이 성공적으로 렌더링한 페이지를 확인합니다.
• 초기 크롤링과 렌더링 완료 사이의 시간 차이를 계산합니다.
• 다양한 유형의 콘텐츠와 URL이 처리되는 패턴을 분석합니다.

데이터 범위

이 글에서는 주로 가장 크고 신뢰할 수 있는 데이터 세트를 제공한 구글봇의 데이터에 초점을 맞췄습니다. 우리의 분석에는 서버-비콘 쌍과 매치된 37,000개 이상의 렌더링 된 HTML 페이지가 포함되어, 결론을 도출할 수 있는 강력한 샘플을 제공했습니다.

우리는 여전히 OpenAI와 Anthropic과 같은 AI 제공업체를 포함한 다른 검색 엔진에 대한 데이터를 수집 중이며, 향후 우리의 발견에 대해 더 많이 이야기할 수 있기를 희망합니다.

다음 섹션에서는 언급한 오해에 대해 자세히 살펴보며, 필요에 따라 더 관련성 있는 방법론을 이야기해 보겠습니다.

오해 1: “구글은 자바스크립트 콘텐츠를 렌더링할 수 없습니다”

이 오해로 인해 많은 개발자는 자바스크립트 프레임워크를 사용하지 않거나 SEO를 위해 복잡한 우회 방법을 사용해 왔습니다.

실험

구글의 자바스크립트 콘텐츠 렌더링 기능을 테스트하기 위해, 네 가지 핵심 측면에 초점을 맞췄습니다.

1. 자바스크립트 프레임워크 호환성: 실험에서는 정적 사전 렌더링, 서버 사이드 렌더링, 클라이언트 사이드 렌더링을 혼합하여 사용하는 nextjs.org의 데이터를 이용하여 구글봇과 Next.js의 상호작용을 분석했습니다.
2. 동적 콘텐츠 색인: API 호출을 통해 비동기적으로 콘텐츠를 로드하는 nextjs.org의 페이지들을 조사했습니다. 이를 통해 구글봇이 초기 HTML 응답에 없는 콘텐츠를 처리하고 색인할 수 있는지 확인했습니다.
3. React 서버 컴포넌트(RSCs)를 통한 스트리밍 콘텐츠: 위와 유사하게, nextjs.org의 많은 부분은 Next.js 앱 라우터와 RSCs로 구축되어 있습니다. 우리는 구글봇이 페이지에 점진적으로 스트리밍되는 콘텐츠를 어떻게 처리하고 색인하는지 확인했습니다.
4. 렌더링 성공률: 그리고 서버 로그의 구글봇 요청 수와 받은 성공적인 렌더링 비콘의 수를 비교했습니다. 이를 통해 크롤링 된 페이지 중 얼마나 큰 비율이 완전히 렌더링 되었는지 알 수 있었습니다.

결과

1. nextjs.org에서 분석한 10만 건 이상의 구글봇 요청 중, 상태 코드 오류와 색인 불가능한 페이지를 제외하고, 복잡한 자바스크립트 상호작용이 있는 페이지를 포함하여 100%의 HTML 페이지가 전체 페이지 렌더링으로 이어졌습니다.
2. API 호출을 통해 비동기적으로 로드된 모든 콘텐츠가 성공적으로 색인 되었습니다. 이는 구글봇이 동적으로 로드된 콘텐츠를 처리할 수 있음을 보여줍니다.
3. 리액트 기반 프레임워크인 Next.js가 구글봇에 의해 완전히 렌더링 되었으며, 이는 현대적인 자바스크립트 프레임워크와의 호환성을 보여줍니다.
4. RSCs를 통해 스트리밍된 콘텐츠도 완전히 렌더링되었습니다. 이는 스트리밍이 SEO에 부정적인 영향을 미치지 않음을 확인해줍니다.
5. 구글은 자바스크립트가 많이 사용된 페이지의 일부만이 아니라, 크롤링하는 거의 모든 HTML 페이지를 렌더링하려고 시도합니다.

오해 2: “구글은 자바스크립트 페이지를 다르게 취급합니다”

구글이 자바스크립트가 많이 사용된 페이지에 대해 별도의 프로세스나 기준을 가지고 있다는 것은 흔한 오해입니다. 지금, 이 연구와 구글의 공식 성명을 종합해 보면 오해를 깰 수 있습니다.

실험

구글이 자바스크립트가 많이 사용된 페이지를 다르게 취급하는지 테스트하기 위해 우리는 여러 가지 접근 방식을 취했습니다.

1. CSS @import 테스트: 우리는 자바스크립트가 없는 테스트 페이지를 만들었습니다. 대신 두 번째 CSS 파일을 @import하는 CSS 파일이 있는 테스트 페이지를 만들었습니다 (이는 첫 번째 CSS 파일을 렌더링할 때만 다운로드 되어 서버 로그에 나타납니다). 이 동작을 자바스크립트가 활성화된 페이지와 비교함으로써, 구글의 렌더러가 자바스크립트 유무에 따라 CSS를 다르게 처리하는지 확인할 수 있었습니다.
2. 상태 코드 및 메타 태그 처리: 구글과 다양한 HTTP 상태 코드를 테스트하기 위해 미들웨어가 있는 Next.js 애플리케이션을 개발했습니다. 여기서 주로 구글이 다른 상태 코드(200, 304, 3xx, 4xx, 5xx)를 가진 페이지와 noindex 메타 태그가 있는 페이지를 어떻게 처리하는지에 초점을 맞췄습니다. 이를 통해 이러한 시나리오에서 자바스크립트가 많이 사용된 페이지가 다르게 취급되는지 이해할 수 있었습니다.
3. 자바스크립트 복잡성 분석: nextjs.org를 사용해 자바스크립트 복잡도가 서로 다른 여러 페이지를 대상으로 구글의 렌더링 동작을 비교했습니다. 여기에는 자바스크립트가 최소한으로 사용된 페이지, 중간 정도의 상호작용이 있는 페이지, 그리고 광범위한 클라이언트 사이드 렌더링이 있는 매우 동적인 페이지가 포함되었습니다. 또한 초기 크롤링과 렌더링 완료 사이의 시간을 계산하고 비교하여 더 복잡한 자바스크립트가 더 긴 렌더링 대기열이나 처리 시간으로 이어지는지 확인했습니다.

결과

1. CSS @import 테스트를 통해 구글이 자바스크립트 유무와 관계없이 페이지를 성공적으로 렌더링한다는 것을 확인했습니다.
2. 구글은 자바스크립트 내용과 관계없이 200 상태의 모든 HTML 페이지를 렌더링합니다. 304 상태의 페이지는 원래 200 상태 페이지의 내용을 사용하여 렌더링됩니다. 다른 3xx, 4xx, 5xx 오류가 있는 페이지는 렌더링 되지 않았습니다.
3. 초기 HTML 응답에 noindex 메타 태그가 있는 페이지는 자바스크립트 내용과 관계없이 렌더링 되지 않았습니다. 클라이언트 사이드에서 noindex 태그를 제거하는 것은 SEO 목적으로 효과가 없습니다. 초기 HTML 응답에 noindex 태그가 포함되어 있으면 페이지가 렌더링 되지 않으며, 태그를 제거하는 자바스크립트도 실행되지 않습니다.
4. 자바스크립트 복잡도가 다양한 페이지들에 대한 구글의 렌더링 성공률에 큰 차이가 없었습니다. nextjs.org의 규모에서는 자바스크립트 복잡도와 렌더링 지연 사이에 상관관계도 발견되지 않았습니다. 그러나 훨씬 더 큰 사이트에서는 복잡한 자바스크립트가 크롤링 효율성에 영향을 미칠 수 있습니다.

오해 3: “렌더링 대기열(queue)과 타이밍이 SEO에 큰 영향을 미칩니다”

많은 SEO 전문가는 자바스크립트가 많이 사용된 페이지가 렌더링 대기열 때문에 색인화에 상당한 지연을 겪는다고 믿습니다. 지금의 연구는 이 과정에 대해 더 명확한 시각을 제공합니다.

실험

렌더링 대기열과 타이밍이 SEO에 미치는 영향을 알아보기 위해 아래 사항을 조사했습니다.

1. 렌더링 지연: nextjs.org에서 37,000개 이상의 매치된 서버-비콘 쌍 데이터를 사용하여 구글의 초기 페이지 크롤링과 렌더링 완료 사이의 시간 차이를 조사했습니다.
2. URL 유형: 쿼리 문자열이 있는 URL과 없는 URL, 그리고 nextjs.org의 다른 섹션들(예: /docs, /learn, /showcase)에 대한 렌더링 시간을 분석했습니다.
3. 빈도 패턴: 구글이 얼마나 자주 페이지를 다시 렌더링하는지, 그리고 다른 유형의 콘텐츠에 대한 렌더링 빈도에 패턴이 있는지 살펴보았습니다.

결과

렌더링 지연 분포는 다음과 같았습니다.

• 50번째 백분위수(중앙값): 10초
• 75번째 백분위수: 26초
• 90번째 백분위수: 약 3시간
• 95번째 백분위수: 약 6시간
• 99번째 백분위수: 약 18시간

37,000개 이상의 매치된 서버-비콘 쌍에서 발견한 정확한 렌더링 지연 분포는 다음과 같습니다.

놀랍게도, 25번째 백분위수의 페이지들은 초기 크롤링 후 4초 이내에 렌더링되었습니다. 이는 긴 “대기열”이 있다는 통념에 반하는 결과입니다.

일부 페이지들이 상당한 지연(99번째 백분위수에서 약 18시간까지)을 겪기는 했지만, 이는 예외적인 경우였지 일반적이지는 않았습니다.

또한 구글이 쿼리 문자열(?param=xyz)이 있는 URL을 얼마나 빨리 렌더링하는지와 관련된 흥미로운 패턴을 관찰하게 되었습니다.

이 데이터는 구글이 콘텐츠에 영향을 주지 않는 쿼리 문자열이 있는 URL을 다르게 취급한다는 것을 시사합니다. 예를 들어, nextjs.org에서 ?ref= 매개변수가 있는 페이지들은 특히 상위 백분위수에서 더 긴 렌더링 지연을 경험했습니다.

추가로, /docs와 같이 자주 업데이트되는 섹션들이 더 정적인 섹션들에 비해 중간 렌더링 시간이 더 짧다는 것을 알 수 있었습니다. 예를 들어, /showcase 페이지는 자주 링크되지만, 렌더링 시간이 더 길게 나타났습니다. 이는 구글이 크게 변하지 않는 페이지들에 대해서는 리렌더링 속도를 늦출 수 있다는 것을 시사합니다.

오해 4: “자바스크립트가 많이 사용된 사이트는 페이지 발견이 더 느립니다”

SEO 커뮤니티에서는 자바스크립트가 많이 사용된 사이트, 특히 단일 페이지 애플리케이션(SPA)과 같이 클라이언트 사이드 렌더링(CSR)에 의존하는 사이트는 구글의 페이지 발견 속도가 더 느리다는 지속적인 믿음이 있습니다. 지금의 연구는 이에 대한 새로운 통찰을 제공합니다.

실험

자바스크립트가 페이지 발견에 미치는 영향을 조사하기 위해 아래와 같은 사항을 준비했습니다.

1. 다양한 렌더링 시나리오에서 링크 발견을 분석했습니다: nextjs.org에서 서버 렌더링, 정적 생성, 클라이언트 사이드 렌더링 된 페이지에서 각각 구글이 얼마나 빨리 링크를 발견하고 크롤링하는지 비교했습니다.
2. 렌더링 되지 않은 자바스크립트 페이로드를 테스트했습니다: nextjs.org의 /showcase 페이지에 리액트 서버 컴포넌트(RSC) 페이로드와 유사한 JSON 객체를 추가했습니다. 이 객체는 새롭고 이전에 발견되지 않은 페이지로의 링크를 포함하고 있었습니다. 이를 통해 구글이 렌더링 되지 않은 자바스크립트 데이터에서 링크를 발견할 수 있는지 테스트할 수 있었습니다.
3. 발견 시간을 비교했습니다: 표준 HTML 링크, 클라이언트 사이드 렌더링 된 콘텐츠의 링크, 렌더링 되지 않은 자바스크립트 페이로드의 링크 등 다양한 방식으로 연결된 새 페이지를 구글이 얼마나 빨리 발견하고 크롤링하는지 모니터링했습니다.

결과

1. 구글은 렌더링 방식과 관계없이 완전히 렌더링 된 페이지에서 링크를 성공적으로 발견하고 크롤링했습니다.
2. 구글은 리액트 서버 컴포넌트나 유사한 구조와 같이 페이지의 렌더링 되지 않은 자바스크립트 페이로드에서도 링크를 발견할 수 있습니다.
3. 초기 HTML과 렌더링 된 HTML 모두에서 구글은 URL처럼 보이는 문자열을 식별하여 콘텐츠를 처리했습니다. 또한, 상대 URL에 대해서는 현재 호스트와 포트를 기본으로 사용합니다. (구글은 우리의 RSC 유사 페이로드에서 인코딩된 URL — 즉, https%3A%2F%2Fwebsite.com—을 발견하지 못했는데, 이는 링크 파싱이 매우 엄격하다는 것을 시사합니다.)
4. 링크의 소스와 형식(예: <a> 태그 내부 또는 JSON 페이로드에 포함)은 구글이 크롤링 우선순위를 정하는 데 영향을 미치지 않았습니다. URL이 초기 크롤링에서 발견되었는지 렌더링 후에 발견되었는지에 관계없이 크롤링 우선순위는 일관되게 유지되었습니다.
5. 구글이 CSR 페이지에서 링크를 성공적으로 발견하긴 하지만, 이러한 페이지들은 먼저 렌더링 되어야 합니다. 서버 렌더링 된 페이지나 부분적으로 사전 렌더링 된 페이지가 즉각적인 링크 발견에 있어 약간의 이점을 가집니다.
6. 구글은 링크 발견과 링크 가치 평가를 구분합니다. 사이트 구조와 크롤링 우선순위 지정을 위한 링크 가치 평가는 전체 페이지 렌더링 이후에 이루어집니다.
7. 업데이트된 sitemap.xml을 가지고 있으면 다양한 렌더링 패턴 간의 발견 시간 차이가 크게 줄어들거나 없어집니다.

전반적인 시사점 및 권장 사항

지금까지의 연구는 구글이 자바스크립트가 많이 사용된 웹사이트를 처리하는 방식에 대한 몇 가지 일반적인 오해를 해소했습니다. 이를 기반으로 주요 결과와 실행할 수 있는 권장 사항을 작성해 봤습니다.

시사점

1. 자바스크립트 호환성: 구글은 복잡한 SPA, 동적으로 로드되는 콘텐츠, 스트리밍 콘텐츠를 포함한 자바스크립트 콘텐츠를 효과적으로 렌더링하고 색인화할 수 있습니다.
2. 렌더링 동등성: 구글이 자바스크립트가 많이 사용된 페이지를 처리하는 방식은 정적 HTML 페이지와 근본적으로 다르지 않습니다. 모든 페이지가 렌더링 됩니다.
3. 렌더링 대기열의 실제: 렌더링 대기열은 존재하지만, 그 영향은 생각보다 크지 않습니다. 대부분의 페이지는 며칠이나 몇 주가 아닌 몇 분 내에 렌더링 됩니다.
4. 페이지 발견: SPA를 포함한 자바스크립트가 많이 사용된 사이트는 구글의 페이지 발견에 있어 본질적으로 불이익을 받지 않습니다.
5. 콘텐츠 타이밍: noindex 태그와 같은 특정 요소가 페이지에 추가되는 시점이 중요합니다. 구글은 클라이언트 사이드 변경을 처리하지 않을 수 있기 때문입니다.
6. 링크 가치 평가: 구글은 링크 발견과 링크 가치 평가를 구분합니다. 후자는 전체 페이지 렌더링 후에 발생합니다.
7. 렌더링 우선순위: 구글의 렌더링 프로세스는 엄격한 선입선출 방식이 아닙니다. 자바스크립트 복잡성보다는 콘텐츠 신선도와 업데이트 빈도 같은 요소가 우선순위에 더 큰 영향을 미칩니다.
8. 렌더링 성능과 크롤링 예산: 구글은 자바스크립트가 많이 사용된 페이지를 효과적으로 렌더링할 수 있지만, 이 프로세스는 정적 HTML에 비해 여러분과 구글 모두에게 더 많은 리소스를 필요로 합니다. 대규모 사이트(10,000개 이상의 고유하고 자주 변경되는 페이지)의 경우 이는 사이트의 크롤링 예산에 영향을 미칠 수 있습니다. 애플리케이션 성능을 최적화하고 불필요한 자바스크립트를 최소화하면 렌더링 프로세스 속도를 높이고 크롤링 효율성을 개선하며 잠재적으로 더 많은 페이지가 크롤링, 렌더링, 색인화될 수 있습니다.

권장 사항

1. 자바스크립트 활용: 향상된 사용자 및 개발자 경험을 위해 자바스크립트 프레임워크를 자유롭게 활용하되, 성능을 우선시하고 지연 로딩에 대한 구글의 모범 사례를 준수하세요.
2. 오류 처리: 리액트 애플리케이션에서 에러 바운더리를 구현하여 개별 컴포넌트 오류로 인한 전체 렌더링 실패를 방지하세요.
3. 중요 SEO 요소 중요한 SEO 태그와 중요 콘텐츠에 대해서는 서버 사이드 렌더링이나 정적 생성을 사용하여 초기 HTML 응답에 반드시 포함되도록 하세요.
4. 리소스 관리 렌더링에 필요한 중요 리소스(API, 자바스크립트 파일, CSS 파일)가 robots.txt에 의해 차단되지 않도록 하세요.
5. 콘텐츠 업데이트 빠르게 재색인화해야 하는 콘텐츠의 경우, 변경 사항이 클라이언트 사이드 자바스크립트뿐만 아니라 서버 렌더링된 HTML에도 반영되도록 하세요. 점진적 정적 재생성과 같은 전략을 고려하여 콘텐츠 신선도와 SEO 및 성능 간의 균형을 맞추세요.
6. 내부 링크 및 URL 구조 명확하고 논리적인 내부 링크 구조를 만드세요. 중요한 탐색 링크는 자바스크립트 기반 탐색 대신 실제 HTML 앵커 태그(<a href="...">)로 구현하세요. 이 접근 방식은 사용자 탐색과 검색 엔진 크롤링 효율성을 돕고 잠재적으로 렌더링 지연을 줄일 수 있습니다.
7. 사이트맵 사이트맵을 사용하고 정기적으로 업데이트하세요. 대규모 사이트나 자주 업데이트되는 사이트의 경우, XML 사이트맵에서 <lastmod> 태그를 사용하여 구글의 크롤링 및 색인화 프로세스를 안내하세요. <lastmod>는 중요한 콘텐츠 업데이트가 있을 때만 업데이트해야 한다는 점을 기억하세요.
8. 모니터링 구글 서치 콘솔의 URL 검사 도구나 리치 결과 도구를 사용하여 구글봇이 페이지를 어떻게 보는지 확인하세요. 선택한 렌더링 전략이 예상치 못한 문제를 일으키지 않도록 크롤링 통계를 모니터링하세요.

새로운 정보로 나아가기

우리가 살펴본 바와 같이, 구글의 능력에 관해서는 렌더링 전략들 사이에 몇 가지 차이점이 있습니다.

이 내용을 표 아래에 각주로 추가하겠습니다.

* 업데이트된 sitemap.xml을 가지고 있으면 다양한 렌더링 패턴 간의 발견 시간 차이가 크게 줄어들거나 없어집니다.

** 우리의 연구에서 증명된 바와 같이 구글에서의 렌더링은 대개 실패하지 않습니다. 실패할 경우, 주로 robots.txt에서 리소스가 차단되었거나 특정 엣지 케이스 때문인 경우가 많습니다.

이러한 세부적인 차이점들이 존재하지만, 구글은 렌더링 전략에 관계없이 여러분의 사이트를 빠르게 발견하고 색인화할 것입니다. 구글의 렌더링 프로세스를 위한 특별한 조정에 대해 걱정하기보다는 사용자에게 더 큰 이익을 주는 성능 좋은 웹 애플리케이션을 만드는 데 집중하는게 중요합니다.

결국, 페이지 속도는 여전히 순위 결정 요소입니다. 구글의 페이지 경험 순위 시스템은 구글의 코어 웹 바이탈 메트릭을 기반으로 여러분 사이트의 성능을 평가하기 때문입니다.

또한, 페이지 속도는 좋은 사용자 경험과 연결됩니다. 로드 시간을 100ms 줄일 때마다 웹사이트 전환율이 8% 증가하는 것으로 나타났습니다. 페이지에서 이탈하는 사용자가 적을수록 구글은 그 페이지를 더 관련성이 높은 것으로 간주합니다. 성능은 복합적으로 작용하며, 밀리초 단위의 차이도 중요합니다.

추가 자료

이러한 주제에 대해 더 자세히 알아보려면 다음 자료를 참고하세요.

• 코어 웹 바이탈이 SEO에 미치는 영향: 코어 웹 바이탈(Core Web Vital, CWV)이 SEO에 어떻게 영향을 미치는지에 대한 종합적인 개요를 제공하며, 구글의 페이지 경험 순위 시스템과 순위 결정에 사용되는 필드 데이터와 랩 데이터(라이트하우스 점수)의 차이를 설명합니다.
• 올바른 렌더링 전략을 선택하는 방법: 개발자들이 웹 애플리케이션에 최적의 렌더링 전략을 선택하는 데 도움을 주는 가이드입니다. SSG, ISR, SSR, CSR과 같은 다양한 방법과 그들의 사용 사례, 그리고 Next.js를 사용한 구현 시 고려 사항을 고려사항을 설명해 웹 애플리케이션을 위한 최적의 렌더링 전략을 선택하도록 개발자를 안내합니다.
• 프런트엔드 클라우드의 사용자 경험: 버셀의 프런트엔드 클라우드가 어떻게 빠르고 개인화된 웹 경험을 가능하게 하는지 설명합니다. 고급 캐싱 전략, 엣지 네트워크 기능, 유연한 렌더링 옵션을 결합하여 사용자 경험과 개발자 생산성을 최적화함으로써 빠르고 개인화된 웹 경험을 어떻게 가능하게 하는지 설명합니다.

MERJ 소개

MERJ는 복잡한 웹 애플리케이션을 위한 기술적 SEO와 성능 최적화를 전문으로 하는 선도적인 SEO 및 데이터 엔지니어링 컨설팅 회사입니다.

다양한 산업 분야에서의 성공 실적을 바탕으로, MERJ는 기업들이 끊임없이 진화하는 검색 엔진 최적화 환경을 탐색하는 데 도움을 주는 최첨단 전문 지식을 제공합니다.

이 연구에서 제기된 SEO 주제에 대한 도움이 필요하거나, 더 나은 검색 가시성과 성능을 위해 웹 애플리케이션을 최적화하고자 한다면 주저하지 말고 MERJ에 연락하세요.