SEO 선언문 렌더링 : JavaScript SEO를 넘어서야하는 이유

콘텐츠가 검색 엔진에서 제대로 액세스되고 높은 순위를 차지하고 있는지 확인하고 싶으십니까?

SEJ eSummit 세션에서 Bartosz Góralewicz는 Google이 웹 사이트를 대규모로 렌더링하는 방법을 발표하고 Google의 특허 및 문서를 기반으로 한 통찰력을 공유했습니다.

다음은 그의 프레젠테이션 요약입니다.

자바 스크립트의 문제점

Góralewicz와 그의 팀은 JavaScript에 의존하는 콘텐츠의 40 %가 14 일 후에 색인이 생성되지 않는다는 것을 발견했습니다.

더 나빠집니다.

평균 도메인 내 URL의 10 %는 Google에서 색인을 생성하지 않으며 고유 한 색인 생성이 가능한 URL을 말합니다.

특히 이러한 추세는 시간이 지남에 따라 변하고 악화 될 수 있으므로 살펴 봐야합니다.

2015 년 Google은 다음과 같이 렌더링에 능숙하다고 주장했습니다.

"[A] Googlebot이 자바 스크립트 또는 CSS 파일을 크롤링하는 것을 차단하지 않는 한, 일반적으로 최신 브라우저와 같이 웹 페이지를 렌더링하고 이해할 수 있습니다."

2017 년부터 Góralewicz와 그의 팀은 JavaScript 기반 웹 사이트에서 발생하는 크롤링 및 색인 생성 문제를 드러내는 JavaScript 및 기타 클로킹 실험을 포함하여 많은 다른 실험을 만들었습니다.

크롤링 및 색인 생성이 가능한 JavaScript 프레임 워크는 무엇입니까? @bart_goralewicz # SMS2017pic.twitter.com / 3beH9dCj14

— Aleyda Solis (@aleyda) 2017 년 5 월 2 일

같은 해 Google은 JavaScript SEO에 대해 공개적으로 이야기하기 시작했습니다.

오늘날 우리는 SEO 커뮤니티에 매우 도움이 된 Google의 Martin Splitt가 있지만 아직 답변되지 않은 질문이 있습니다.

2019 년 11 월 Chrome Developer Summit에서 Splitt는 Google의 렌더링 중앙값이 1 년 전 최대 1 주에서 2019 년에는 5 초로 향상되었다고 발표했습니다.

그러나 Góralewicz와 Onely 팀의 추가 연구에 따르면 "새 웹 사이트의 경우 중앙값 렌더링 지연이 사실상 존재하지 않을 수 있으며 JavaScript 콘텐츠 인덱싱 지연이 여전히 많이 존재합니다."

많은 자바 스크립트 기반 웹 사이트는 색인이 생성되지 않고 2 주 후에도 순위가 지정되지 않습니다.

그들은 또한 다음을 발견했습니다.

• Google 색인에는 거대 브랜드가 거의 없습니다.
• HTML 인덱싱은 생각만큼 쉽지 않습니다.
• 색인 생성 추세는 Google 업데이트 중에 변동됩니다.
• Google 색인에서 쫓겨날 수 있습니다.

현재 인덱싱 감소를 진단 할 때의 문제 중 하나는 사이트 명령이 신뢰할 수없고 많은 오탐을 반환 할 수 있다는 것입니다.

Google 색인에 들어가기 : 큰 SEO 과제

콘텐츠를 Google 색인에 추가하는 것은 온라인 존재의 절대적 기반이며 오늘날에도 여전히 큰 SEO 과제입니다.

그리고이 문제는 Google의 제한된 리소스로 인해 더욱 커질 것입니다. 왜냐하면 그들은 전 세계 웹 전체를 렌더링하고 색인을 생성 할 수 없기 때문입니다. 특히 현재 많은 최신 웹 사이트에서 발생하는 비용으로 말입니다.

중요한 인덱싱 문제가있는 일부 유명 브랜드를 살펴보십시오.

Google이 웹 페이지의 색인을 생성하지 않으면 다른 모든 SEO 활동은 전혀 중요하지 않습니다.

SEO와 Google 직원 모두 인덱싱 문제에 대한 대화를 시작하고 있으며이를 검증 할 더 나은 데이터 소스가 있습니다.

그리고 대부분의 인덱싱 문제는 실제로 기술 SEO를 통해 해결할 수 있습니다.

방법은 다음과 같습니다.

배치 최적화 렌더링 : 작동 방식

Google은 일괄 최적화 된 렌더링 및 가져 오기 아키텍처 (BOR) 관점에서 웹 사이트를보고 있습니다.

이러한 나란히보기를 살펴보면 Google이 보는 것은 사용자가 브라우저에서 보는 것과 다릅니다.

그렇다면 BOR은 어떻게 작동합니까?

1 단계 : BOR은 페이지 미리보기를 생성하는 데 필수적이지 않은 모든 리소스를 건너 뜁니다.

일괄 최적화 된 렌더링 및 가져 오기 아키텍처의 첫 번째 단계는 웹 사이트의 미리보기 또는 레이아웃을 생성하기 위해 Google이 필요로하지 않는 모든 리소스를 제거하는 것입니다.

여기에는 다음이 포함됩니다.

• 추적 스크립트 (Google Analytics, Hotjar 등)
• 광고
• 이미지

이러한 추가 리소스를 제거하기 만하면로드, 스크립팅 및 렌더링 시간을 최대 50 %까지 절약 할 수 있습니다. 이것은 Google 측에서 많은 리소스를 절약합니다.

2 단계 : 가상 시계의 값 설정

두 번째 단계는 Google이 가상 시계의 값을 설정하는 것입니다 (아래에서 좀 더 자세히 설명하겠습니다).

3 단계 : 웹 사이트의 레이아웃 생성

가상 시계의 시간이 "마감"되면 웹 사이트의 레이아웃이 생성됩니다.

기억해야 할 두 가지 주요 개념이 있습니다.

• 가상 시계.
• 배치.

가상 시계 란?

가상 시계는 웹 사이트 렌더링 비용을 측정합니다.

이것은 구글 측의 렌더링 예산의 일종이며 웹 사이트에는 약간의 "예산"이 할당됩니다.

리소스 (oe, 스크립트, CSS 파일, 이미지 크기 등)를 가져 오기 위해 렌더링이 일시 중지되면 해당 가상 시계가 진행되지 않습니다. 실제로 렌더링 할 때만 진행됩니다.

즉, 웹 사이트 내에 CSS, JavaScript 또는 기타 리소스가 많은 경우 가상 시계에 더 많은 "가상 시간"이 필요합니다.

그러나 가상 시계 시간을 얼마나 확보 할 수 있는지 보장 할 수는 없습니다.

한계가 무엇인지 모르지만 (그리고 결코 알지 못할 수도 있지만) 우리 웹 사이트가 얼마나 자원을 많이 소모하는지 알아낼 수 있습니다.

Chrome DevTools를 사용하면 CPU 속도를 늦추고 스크립팅 및 렌더링에 미치는 영향을 확인할 수 있습니다.

H & M의 웹 사이트를 예로 들어 보겠습니다.

시간을 최대 25 배까지 늘 렸습니다.

H & M이 렌더링 및 인덱싱에 어떻게 어려움을 겪고 있는지 알 수 있습니다.

웹 사이트의 '가상 클럭로드'를 측정하는 방법

Góralewicz는 "가상 클럭 부하"를 측정하기 위해 두 가지 옵션을 권장합니다.

• Onely 's Too Long을 사용하십시오. 0-100에서 웹 페이지 렌더링 비용을 계산하는 TL; DR (Did n't Render) 도구입니다.
• Chrome DevTools에서 BOR을 시뮬레이션하십시오. (여기에 자세한 설명이 있습니다.)

페이지 레이아웃

가상 시계 시간이 만료되면 렌더링 중간 여부에 관계없이 레이아웃이 생성됩니다.

이로 인해 많은 잠재적 인 문제가 발생합니다.

가장 중요한 것은 JavaScript SEO가 끝나고 SEO 렌더링이 시작되는 곳입니다.

렌더링은이 전체 아이디어에서 레이아웃이 어떻게 작동하는지에 많은 초점을 둡니다.

콘텐츠 위치 문제

우리는 이미 스크롤없이 볼 수있는 부분에 나타나는 텍스트가 줄 아래의 텍스트보다 더 중요하다는 것을 알고 있습니다.

Google이 해당 콘텐츠를 크롤링하는 방식에도 영향을 미치는 것으로 나타났습니다.

Google의 2011 년 특허 인 Scheduling resource crawls는 검색 엔진이 웹 사이트의 다른 섹션과 해당 섹션 내의 링크를 다른 우선 순위로 어떻게 보는지 알려줍니다.

이것은 Javascript SEO가 빙산의 일각에 불과하다는 것을 보여줍니다. Google이 콘텐츠를 볼 수 있는지 여부에만 초점을 맞 춥니 다.

렌더링은 그 이상입니다.

Google이 콘텐츠 만 보는 것 외에는 다음과 같은 사항에 관심이 있기 때문에 훨씬 더 광범위한 주제입니다.

페이지의 레이아웃입니다.

• 텍스트 크기, 배치 등에 따른 콘텐츠의 중요성
• 내부 및 외부 링크 추출.
• 진입 변경 률.
• 이미지를 포함하여 웹 사이트가 렌더링되는 방식 및 그 이후의 모습과 관련이있는 기타 요인.

배치 렌더링 vs. 이미지

Google의 렌더링 서비스는 모의 이미지를 사용합니다. 이것이 어떻게 작동하는지에 대한 예입니다.

링크는 어떻습니까?

링크의 값은 위치와 속성에 따라 다릅니다.

우리는 이것을 꽤 오랫동안 알고 있었지만 Google에서 더 많은 패턴을 살펴보면 더 흥미로워집니다.

페이지 내 링크의 위치가 중요합니다.

이는 Google이 해당 링크를 크롤링하는 방법과 Google이 해당 링크에 할당하는 "등급"의 종류에 영향을줍니다.

또한 페이지의 중요한 섹션에 배치 된 링크는 덜 중요한 섹션의 링크에 비해 더 높은 값이 할당 될 수 있습니다.

사용자 행동 및 / 또는 기능 데이터 특허 (Reasonable Surfer 모델)를 기반으로 한 랭킹 문서에 따르면 다음과 같은 링크와 관련된 다른 많은 기능이 있습니다.

• 주변 텍스트 : 링크 앞뒤의 단어;
• 링크 유형 (예 : 이미지 / 텍스트)
• 링크와 관련된 앵커 텍스트가 얼마나 상업적 일 수 있는지
• 소스 문서의 링크 수
• 글꼴 크기

또한 Google은 블록 수준에서 페이지를 분석하지 않습니다. 링크는 페이지의 인기있는 섹션에 배치 된 경우에도 중요하지 않은 것으로 간주 될 수 있습니다. 예를 들어 "서비스 약관"링크, 배너 광고 또는 문서와 관련없는 링크 일 때입니다.

Google이 합리적인 서퍼 모델을 완전히 적용하려면 페이지가 완전히 렌더링되어야한다는 점에 유의하는 것이 중요합니다.

사용자 행동 및 / 또는 기능 데이터 특허 (Reasonable Surfer 모델)를 기반으로 한 랭킹 문서에 따르면 다음을 포함하여 링크와 관련된 다른 많은 기능이 있습니다.

• 주변 텍스트 : 링크 앞 및 / 또는 뒤의 단어.
• 링크 유형 (예 : 이미지 / 텍스트).
• 링크와 관련된 앵커 텍스트가 얼마나 상업적 일 수 있는지.
• 소스 문서의 링크 수입니다.
• 글꼴 크기.

또한 Google은 블록 수준에서 페이지를 분석하지 않습니다.

링크는 페이지의 인기있는 섹션에 배치 된 경우에도 중요하지 않은 것으로 간주 될 수 있습니다. 예를 들어 "서비스 약관"링크, 배너 광고 또는 문서와 관련없는 링크 일 때입니다.

Google이 합리적인 서퍼 모델을 완전히 적용하려면 페이지가 완전히 렌더링되어야한다는 점에 유의하는 것이 중요합니다.

그렇다면 어떤 섹션이 색인화되지 않는가?

Góralewicz와 그의 팀은 9 개월 간의 연구를 통해 Google이 매우 유사한 휴리스틱을 사용하여 웹 사이트에서 렌더링해야 할 부분과 건너 뛸 수있는 부분을 선택한다는 것을 알게되었습니다.

부분 인덱싱을 진단하기 위해 Onely 팀은 인기있는 웹 사이트를 조사하여 특정 레이아웃에서 인덱싱 된 부분과 그렇지 않은 부분을 확인했습니다.

그들이 발견 한 것은 구글이 웹 사이트의 일부를 다른 것보다 더 열심히 무시하는 것으로 보인다는 것입니다.

예를 들어 Google은 '관련 항목'및 '관심이있을 수있는'섹션을 렌더링하는 데 어려움을 겪고있는 것 같습니다.

Google은 대부분 귀하의 주요 콘텐츠에 대한 색인을 생성합니다.

하지만 … 귀하의 웹 사이트가 스크립팅 및 렌더링 측면에서 무거 우면 Google이 해당 레이아웃을 이해하려고 시도한 후 주요 콘텐츠만큼 중요하지 않은 페이지 부분을 건너 뛸 가능성이 높습니다.

구글은 그들이 무거울 때 스크립트를 중단한다고 언급했지만 지금까지 그것이 무엇을 의미하는지 몰랐습니다.

부분 인덱싱 : 주요 결과

부분 인덱싱이 그다지 문제가되지 않는다고 생각할 수 있습니다.

• 그들이 귀하의 주요 콘텐츠를 먼저 색인화 할 때 이것이 Google의 현명한 결정이라고 가정 할 수 있습니다.
• 이것은 그들이 종종 레이아웃의 일부를 무시한다는 것을 의미합니다.
• 이로 인해 사이트 전체 색인 생성 및 크롤링 문제가 발생할 수 있습니다.
• 그리고 우리는 14 일 후에 JavaScript 콘텐츠의 약 40 %가 색인화되지 않는다는 문제로 돌아 왔습니다.

그러나 이로 인해 훨씬 ​​더 심각한 문제가 발생합니다. 14 일 후에 URL의 10 %가 색인 생성되지 않습니다.

렌더링은 JavaScript의 유무에 관계없이 일어나기 때문에 JavaScript SEO를 넘어서는 것입니다.

JavaScript는 렌더링의 주된 이유가 아닙니다.

지금 우리가 알고있는 것을 알면서도 JavaScript SEO라고 불러야할까요?

테이크 아웃

프레젠테이션을 마무리하기 위해 Góralewicz는 다음과 같은 내용을 공유했습니다.

• SEO 렌더링 및 인덱싱은 가장 인기있는 SEO 트렌드 중 하나가 될 것입니다. 곧.
• 색인이 생성되지 않은 경우 수행중인 다른 모든 SEO 활동은 중요하지 않습니다.
• 인덱싱은보고 측정 할 수있는 것입니다. 수익을 창출합니다. 직접.
• SEO 역사상 처음으로 우리는 렌더링과 인덱싱이 어떻게 작동하는지 잘 이해하고 있으므로이를 잘 활용 해 보겠습니다.

이 프레젠테이션보기

이제 6 월 2 일 SEJ eSummit에서 Góralewicz의 전체 프레젠테이션을 볼 수 있습니다.

더 많은 리소스 :

• SEO 전문가를위한 JavaScript 기초
• SEO의 렌더링 소개
• 검색 엔진이 페이지를 렌더링하는 방법 (및 이유)

이미지 크레딧

추천 이미지 : Paulo Bobita
작성자가 찍은 모든 스크린 샷, 2020 년 7 월