이제 Google이 Ajax 사이트를 크롤링 할 것을 믿을 수 있습니까??

요약:

10 월 14 일, Google은 더 이상 2009 년에 출판 한 Ajax 크롤링 제도를 추천하지 않는다고 발표했습니다. 이로 인해 Google을 신뢰할 수 있는지에 대한 의문이 제기됩니다.

키 포인트:

  1. 웹 디자이너와 엔지니어는 Angular 및 React와 같은 프레임 워크를 사용하여 단일 페이지 응용 프로그램 (SPA)을 구축하는 데 Ajax를 사용하는 것을 선호합니다.
  2. Ajax는 데스크탑 응용 프로그램과 같은 부드럽고 대화식 웹 애플리케이션을 허용합니다.
  3. 스파에서는 HTML 컨텐츠가 처음에는 브라우저에로드되지 않습니다. 대신 Ajax는 JavaScript를 사용하여 웹 서버와 동적으로 통신하고 HTML을 렌더링합니다.
  4. Google은 일부 JavaScript 컨텐츠를 크롤링 할 수 있었지만 Pure Spa Ajax 사이트의 SEO는 도전 과제를 제기했습니다.
  5. 2009 년 Google은 “Escaped Fragment”URL 또는 Meta 태그를 사용하여 Google에 전체 HTML을 사용하여 사전 렌더링 된 페이지를 가져 오도록 지시하는 Ajax 크롤링 가능한 솔루션을 도입했습니다.
  6. Google이 JavaScript를 크롤링하는 능력에도 불구하고 Google이 스파 Ajax 사이트를 기어 올릴 수있는 많은 사이트에서 제한된 성공을 거두었습니다.
  7. 일부 사이트에서는 Ajax 구현으로 전환 한 후 유기 트래픽이 크게 감소했습니다.
  8. 10 월 14 일, Google은 더 이상 오래된 Ajax 크롤링 제안을 추천하지 않는다고 발표했지만 여전히 지원합니다.
  9. Google이 문제없이 Ajax 사이트를 크롤링 할 수 있다는 오해가 있지만 현대식 브라우저와 같은 웹 페이지를 렌더링하고 이해할 수 있다고 말하는 것이 중요합니다.
  10. Google에서 사용하는 언어를 고려하고 Ajax 페이지를 완전히 이해할 수 있다는 가정에만 의존하지 않는 것이 중요합니다.

질문:

  1. Google이 AJAX 사이트를 성공적으로 색인 할 수 있습니다?
  2. 웹 디자인에서 Ajax를 사용하는 목적은 무엇입니까??
  3. 스파가 처음에로드되면 어떻게 되는가?
  4. Ajax 사이트가 SEO와 관련하여 역사적으로 직면 한 과제?
  5. 2009 년 Google이 Ajax를 기어 다닐 수 있도록 제안한 방법은 무엇입니까??
  6. Google이 Ajax 사이트를 크롤링하도록 허용하면 많은 웹 사이트에 대한 성공적인 색인이 발생했습니다?
  7. Ajax를 구현 한 후 일부 사이트에서 경험 한 부정적인 영향?
  8. Google은 Ajax 크롤링 추천에 관해 10 월 14 일에 무엇을 발표 했습니까??
  9. Google이 이제 Ajax 사이트를 효과적으로 크롤링 할 수 있다고 믿는 것이 정확합니까??
  10. 발표에서 Google의 언어를 고려하는 것이 중요한 이유는 무엇입니까??
  11. Google을 Ajax 사이트를 완전히 이해하고 크롤링 할 수 있다고 믿을 수 있습니까??
  12. 웹 디자이너와 엔지니어는 웹 애플리케이션 구축에 Ajax를 어떻게 활용합니까??
  13. Ajax 사이트의 렌더링 프로세스에서 JavaScript의 역할은 무엇입니까??
  14. 일부 웹 사이트는 솔루션으로 사전 렌더링 된 HTML 스냅 샷에 의존 한 이유?
  15. Ajax 사이트를 크롤링하는 Google의 능력에 대해 오해가 존재하는 것?

답변:

  1. Google은 Ajax 사이트를 크롤링 할 수 있지만 인덱싱의 성공은 다양하며 보장되지 않습니다.
  2. AJAX.
  3. 스파가 처음에로드되면 HTML 컨텐츠가 가져 와서 렌더링되지 않습니다. 대신 브라우저는 JavaScript에 의존하여 서버와 통신하고 HTML을 동적으로 렌더링합니다.
  4. 역사적으로 Ajax 사이트는 JavaScript 콘텐츠를 크롤링하는 Google의 능력이 제한되어 있기 때문에 SEO와 도전에 직면했습니다. 이로 인해 인덱싱 및 순위 페이지가 효과적으로 어려움을 겪었습니다.
  5. 2009 년 Google은 Ajax를 크롤링하기위한 두 가지 방법을 제안했습니다. “Escaped Fragment”URL을 사용하는 것과 관련하여 Ugly URL이 발생했습니다. 다른 방법은 a 메타 = “조각” Google에게 전체 HTML로 사전 렌더링 된 버전을 가져 오도록 지시하려면 페이지에 태그.
  6. Google이 Ajax 사이트를 크롤링하도록 허용하는 것이 항상 많은 웹 사이트에서 성공적인 인덱싱을 초래하지는 않았습니다. 일부 사이트에서는 페이지의 일부만이 완전히 렌더링되고 인덱싱 된 반면 다른 사이트는 유기 트래픽이 크게 감소했습니다.
  7. Ajax를 구현 한 후 일부 웹 사이트는 유기 트래픽에 부정적인 영향을 미쳤으며 방문객의 하락에서 회복해야했습니다.
  8. 10 월 14 일, Google은 더 이상 오래된 Ajax 크롤링 제안을 추천하지 않는다고 발표했지만 계속 지원합니다. 이것은 그들이 사용을 적극적으로 제안하지는 않지만 여전히 기능을 인정한다는 것을 의미합니다.
  9. Google이 문제없이 Ajax 사이트를 효과적으로 크롤링 할 수 있다고 가정하는 것은 정확하지 않습니다. 그들은 현대식 브라우저와 같은 웹 페이지를 렌더링하고 이해할 수 있다고 말하지만, 사용 된 언어를 고려 하고이 진술에만 의존하지 않는 것이 필수적입니다.
  10. Ajax 사이트에 대한 원활한 인덱싱을 보장하지 않기 때문에 발표에서 Google 언어를 고려하는 것이 중요합니다. “일반적으로 Able”이라는 문구는 Ajax 페이지를 완전히 이해하고 크롤링하는 한계와 도전의 잠재력을 의미합니다.
  11. 추가 테스트 및 모니터링 없이는 Ajax 사이트를 완전히 이해하고 크롤링하도록 Google을 신뢰합니다. 인덱싱의 성공은 다양 할 수 있으며 사전 렌더링 HTML 스냅 샷과 같은 대체 솔루션을 고려하는 것이 중요합니다.
  12. 웹 디자이너와 엔지니어는 Ajax를 사용하여 Angular 및 React와 같은 프레임 워크를 사용하여 스파를 구축하여 전용 데스크톱 응용 프로그램과 유사한 대화식 및 원활한 사용자 경험을 제공하는 웹 응용 프로그램을 개발할 수 있습니다.
  13. JavaScript는 Ajax 사이트의 렌더링 프로세스에서 중요한 역할을합니다. 웹 서버와 동적으로 통신하여 사용자가 상호 작용할 수 있도록 HTML 컨텐츠를 작성하고 렌더링합니다.
  14. 웹 사이트는 Angular와 같은 일부 Ajax 프레임 워크가 아직 서버 측 렌더링을 지원하지 않기 때문에 HTML 스냅 샷을 솔루션으로 사전 렌더링하는 데 의지했습니다. 사전 렌더링은 검색 엔진에 제공되는 HTML 스냅 샷을 만들어 전체 인덱싱 및 가시성을 보장합니다.
  15. Google이 Ajax 사이트를 크롤링하는 능력이 이제 완벽하다는 오해가 있습니다. 그러나 JavaScript 컨텐츠를 이해하고 기어 올리는 능력이 향상되었지만 도전과 한계는 여전히 존재할 수 있습니다.

이제 Google이 Ajax 사이트를 크롤링 할 것을 믿을 수 있습니까?

그런 다음 10 월 14 일에 Google은 다음과 같이 말했습니다

Google은 Ajax 콘텐츠를 크롤링합니다? [닫은]

이 질문을 개선하고 싶습니다? 이 게시물을 편집하여 하나의 문제에만 초점을 맞추도록 질문을 업데이트하십시오.

7 년 전에 문을 닫았습니다 .

내 사이트의 홈페이지에서 jQuery의 Ajax 기능을 사용하여 최근 사용자 활동 목록을 중단합니다. 최근 활동은 페이지에 표시되며 최근 활동의 각 행에는 활동을 수행 한 사용자의 사용자 프로필 링크가 포함됩니다. Google은 실제로 Ajax를 호출 하여이 정보를 끌어 내고 페이지 관련성 / 링크 주스 흐름을 계산하는 데 사용합니다? 나는 그것을 바라고 있습니다 하지 않습니다 사용자 프로필 페이지가 Google 색인이 아니기 때문에 홈페이지의 링크 주스가 다른 더 중요한 링크에서 멀어지게하는 사용자 프로필 페이지에 대한 모든 링크를 원하지 않기 때문입니다.

이제 Google이 Ajax 사이트를 크롤링 할 것을 믿을 수 있습니까??

10 월 14 일, Google은 더 이상 2009 년에 출판 한 Ajax 크롤링 제도를 권장하지 않는다고 발표했습니다. 칼럼니스트 Mark Munroe는 이제 Google에 의존하여 Ajax 사이트를 성공적으로 크롤링하고 색인 할 수 있음을 의미하는지에 대한 질문에 뛰어 들었습니다.

2015 년 11 월 13 일 오전 9시 18 분에 Mark Munroe | 읽기 시간 : 7 분

JavaScript-JS-SS-1920

웹 디자이너와 엔지니어는 Angular 및 React와 같은 인기있는 프레임 워크를 사용하여 단일 페이지 응용 프로그램 (SPA)을 구축하기위한 Ajax를 좋아합니다. 순수한 Ajax 구현은 전용 데스크탑 애플리케이션과 같은 부드럽고 대화식 웹 애플리케이션을 제공 할 수 있습니다.

스파를 사용하면 일반적으로 HTML 컨텐츠가 웹 페이지의 초기 페치에서 브라우저에로드되지 않습니다. Ajax는 JavaScript를 사용하여 웹 서버와 동적으로 통신하여 HTML을 생성하여 페이지를 렌더링하고 사용자와 상호 작용합니다. (불리는 기술이 있습니다 “서버 측 렌더링” JavaScript가 실제로 서버에서 실행되는 경우 렌더링 된 HTML로 페이지 요청이 반환됩니다. 그러나이 접근법은 모든 SPA 프레임 워크에서 아직 지원되지 않으며 개발에 복잡성을 더합니다.))

Spa Ajax 사이트의 문제 중 하나는 SEO입니다. Google은 실제로 한동안 JavaScript 콘텐츠를 크롤링했습니다. 사실,이 최근의 테스트는 Google을 확인했습니다’s 링크, 메타 데이터 및 JavaScript를 통해 삽입 된 컨텐츠를 크롤링하는 능력. 그러나 순수한 Spa Ajax 프레임 워크를 사용하는 웹 사이트는 역사적으로 SEO와의 과제를 경험했습니다.

2009 년에 Google은 Ajax를 크롤링 할 수있는 솔루션을 제시했습니다. 그 방법이 생성됩니다 “탈출 한 조각” URL (Ugly URL) 또는 더 최근에는 깨끗한 URL이 메타 =”파편” 페이지에 태그.

이스케이프 조각 URL 또는 메타 조각화 태그는 Google에 나가서 모든 JavaScript를 실행하고 Google이 구문 분석하고 색인 할 수있는 전체 HTML을 갖는 사전 렌더링 된 페이지를 얻도록 지시합니다. 이 방법에서 Spider는 완전히 다른 페이지 소스 코드를 제공합니다 (HTML vs. 자바 스크립트).

Google이 JavaScript를 크롤링한다는 말을 통해 많은 사이트에서 Google이 스파 Ajax 사이트를 크롤링하기로 결정했습니다. 일반적으로 그것은 그다지 성공하지 못했습니다. 작년에 Ajax Angular 구현을 가진 몇 개의 웹 사이트에 대해 상담했습니다. Google은 약간의 성공을 거두었고 Google의 페이지의 약 30 %’S 캐시가 완전히 렌더링되었습니다. 다른 70 %는 비어있었습니다.

인기있는 식품 사이트는 앵글로 전환되어 구글이 기어 다닐 수 있다고 믿습니다. 그들은 유기 트래픽의 약 70 %를 잃었고 여전히 그 파괴에서 회복 중입니다. 궁극적으로 두 사이트 모두 HTML 스냅 샷을 사전 렌더링하여 당시 권장되는 Ajax 크롤링 솔루션으로 이동했습니다.

그런 다음 10 월 14 일에 Google은 다음과 같이 말했습니다

우리는 더 이상 2009 년에 우리가 만든 Ajax 크롤링 제안을 추천하지 않습니다.

그들은 여전히 ​​그렇습니다 지원 그들의 오래된 제안. (더 이상 지원하지 않는다는 기사가 있었지만 사실이 아닙니다. 더 이상 그 접근 방식을 추천하지 않습니다.))

오래된 권고를 사용하지 않으면 서, 그들은 이제 Ajax를 크롤링 할 수 있다고 말하는 것처럼 보였습니다.

그런 다음 발표 후 1 주일 만에 새로 출시 된 사이트가있는 고객이 확인 해달라고 요청했습니다. 이것은 다시 각도 사이트였습니다. 다시 Spa Ajax 구현.

Google을 검사하면’s 인덱스 및 캐시, 우리는 모든 콘텐츠가 크롤링되지 않고 부분적으로 인덱싱 된 페이지를 보았습니다. HTML 스냅 샷 또는 프로그레시브 향상에 대한 이전 권장 사항을 반복했습니다.

이 사이트는 서버 측 렌더링을 아직 지원하지 않는 Angular로 구축되었으며 (이 경우, 서버는 처음에는 페이지를 HTML 문서를 제공하도록 페이지를 렌더링합니다), 진보적 인 향상은 지원하기 어려울 것이며 HTML 스냅 샷은 여전히 ​​최상의 솔루션입니다.

그녀는 답했다, “그러나 왜? 내가 읽은 모든 것은 Google이 Ajax를 크롤링 할 수 있다고 말합니다.”

그들은 할수 있나? 허락하다’s Ajax와 관련하여 새로운 권장 사항을 자세히 살펴보십시오.

Google’새로운 Ajax 권장 사항

그들이 왜 오래된 권고를 구출하는지 설명 할 때 (강조 광산) :

우리는 일반적으로 가능합니다 최신 브라우저와 같은 웹 페이지를 렌더링하고 이해하려면.

많은 사람들이 이제 문제없이 Ajax를 기어 다닐 수 있다고 결론을 내릴 수 있습니다. 그러나 언어를보십시오 “일반적으로 가능합니다”? Google이 “일반적으로 가능합니다” 귀하의 페이지를 이해합니다?

나는 단지 의미론을 선택하고있을 수 있습니까?? 허락하다’발표를 더 조사하십시오. 나중에 발표에서 그들은 Ajax와 관련하여 다음과 같습니다

2009 년 제안에 대한 가정은 더 이상 유효하지 않기 때문에 진보적 인 향상의 원칙을 따르는 것이 좋습니다.

그들은 돈을하지 않는다’T 발표에서 철자를 쓰다하지만 진보적 인 향상을 권장함으로써 (DON의 브라우저에 HTML을로드합니다’t JavaScript 지원), 그들은 암시 적으로 말하는 것 같습니다, “두목’t 우리가 당신의 자바 스크립트를 크롤링하는 것을 믿으십시오.” 실제로 Google이 Spa Ajax 사이트를 지속적으로 크롤링 할 수 있다면이 방법을 추천하는 이유는 무엇입니까??

나는 아마도 Google을 과도하게 분석하고 있다고 걱정했다’S 단어이지만…

John Mueller는 Google이 여전히 Ajax에 문제가 있음을 확인합니다

10 월 27 일 (Google 발표 후 2 주도 채되지 않음), John Mueller는 웹 마스터 Central Hangout에서 Google이 여전히 Ajax에 문제가 있음을 확인했습니다.

특정 각도 구현과 관련된 질문이있는 비디오로 약 1:08:00에 교환을 볼 수 있습니다

그들은 여전히 ​​렌더링에 문제가 있으며 시간이 지남에 따라 더 나아질 것으로 기대합니다. John은 문제를 디버깅하는 데 도움이되는 몇 가지 조치를 권장합니다.

궁극적으로 그는 Google에서 Ajax에서 더 나아질 때까지 HTML 스냅 샷을 사용하는 것이 좋습니다 (예, 공식적으로 더 이상 사용되지 않은 방법).

그래서 뭐 할까?

  • 진보적 인 향상. 점진적인 향상을 위해서는 서버 측 렌더링이 필요하며 아직 angular에 의해 지원되지 않습니다. 그러나 다가오는 각도 2.0은 서버 측 렌더링을 지원합니다. React는 실제로 오늘날 서버 측 렌더링을 지원합니다. 그러나 이것은 단순히 HTML 스냅 샷을 만드는 것보다 더 많은 작업입니다. Google이 페이지에로드 된 추가 컨텐츠를 크롤링하고 색인 할 수 있도록 필요한 링크를 렌더링해야합니다. 그럼에도 불구하고 Ajax 프레임 워크를 사용하는 사이트의 경우 이것이 권장되는 접근법입니다. (물론 Google입니다’권장 접근법.))
  • 사전 렌더링 HTML 스냅 샷. 다시, 돈’G Google이 더 이상이 방법을 지원하지 않는다는 소식을 듣거나 읽었다면 혼란스러워. 그들은 가까운 미래를 위해 그것을 계속 지원할 것입니다. 그들은 더 이상 그것을 추천하지 않습니다. 이 방법은 작동합니다. 그러나 코드를 사전 렌더링하고 스냅 샷을 제공하는 데 도움이되는 것은 사소한 일이 아닙니다. 좋은 소식은 Prerender와 같은 여러 공급 업체가 있다는 것입니다.상대적으로 저렴한 비용으로 당신을 위해 일을 할 사람. 그것은 아마도 가장 간단한 접근법 일 것입니다. 이 방법은 이상적이지 않습니다. 크롤러와 다른 소스 코드를 제공합니다. 브라우저 (HTML vs. JavaScript)는 문제가 될 수 있습니다. 그것은 클로킹 기술로 간주 될 수 있으며, 봇이 무엇을 제공하는지 반드시 분명하지는 않습니다. 그것’Google을 모니터링하는 것이 중요합니다’S가 잘못된 페이지를 제공하지 않도록 S 캐시. 그럼에도 불구하고 서버 측 렌더링을 지원하지 않는 플랫폼을 사용하는 경우 이것이 유일한 솔루션 일 수 있습니다.

죄송합니다보다 더 안전

Google이 Ajax 사이트를 지속적으로 크롤링하고 있다는 증거를 보더라도 여전히 조심해야합니다. 단순히 HTML을 제공하는 것보다 페이지를 완전히 렌더링하는 데 훨씬 더 많은 리소스와 훨씬 더 많은 시간이 걸립니다.

수십만 또는 수백만 페이지가있는 사이트는 어떻게 될까요?? 크롤링 예산에 어떤 영향을 미칩니다? 크롤링 속도가 일관성이 유지 될 것입니다?

이 접근법을 추천하기 전에 i’d 오히려 Google이 크롤링 속도, 인덱싱 및 순위에 부정적인 영향을 미치지 않고 대규모의 순수한 Ajax 단일 페이지 응용 프로그램을 지속적으로 크롤링 할 수 있다는 강력한 증거를 기다립니다. 자신의 경험을 공유하십시오.

이 기사에 표현 된 의견은 게스트 저자의 의견이며 반드시 검색 엔진 랜드는 아닙니다. 직원 저자는 여기에 나열되어 있습니다.

JavaScript와 Ajax가 Google의 색인에 어떤 영향을 미칩니 까?

시간이 지남에 따라 Google은 크게 개선되었습니다 JavaScript 및 Ajax의 인덱싱. 처음에는 그랬습니다’t 모든 색인 또는 이러한 프레임 워크를 통해로드 된 컨텐츠 내에 나타나는 링크를 따릅니다. 그러나 조금씩, 그것은 일부 구현을 색인화하고 그 기능을 개선하기 시작했습니다. 요즘에는 다양한 구현을 색인화 할 수 있습니다, 로드 된 링크를 따르십시오 Ajax 또는 API Fetch. 그럼에도 불구하고, 아직 실패 할 수있는 경우가 여전히있을 것입니다.

Google이 사이트를 색인화하지 못한 사례를 분석하려면 먼저 개념을 이해해야합니다 클라이언트 측 렌더링 (CSR). 그것은 그것을 암시합니다 HTML은 JavaScript로 클라이언트 측면으로 그려집니다, 일반적으로 사용합니다 Ajax 과도하게. 원래 웹 사이트는 항상 HTML 서버 측을 그렸습니다 (서버 측 렌더링 또는 ssr), 그러나 지금은 얼마 동안, CSR은 Angular, React 및 Vue와 같은 JavaScript 프레임 워크가 도착하면서 인기를 얻었습니다. 하지만, CSR은 인덱싱에 부정적인 영향을 미칩니다, 웹 사이트 렌더링 성능, 결과적으로 SEO.

우리로’VE는 이미 전에 설명했습니다, 모든 검색 엔진 및 상황에서 인덱싱을 보장합니다, 좋은 성능을 달성하는 것 외에도, 가장 좋은 솔루션은 범용 프레임 워크를 사용하는 것입니다, 이러한 조치와 마찬가지로 우리는 하이브리드 렌더링. 그것은 안에 있습니다 내비게이션이 다음 링크로 이동함에 따라 첫 번째로드에서 서버에서 웹 사이트를 서버에 그리고 ajax를 통해 클라이언트에 그림을 그리십시오. 실제로는 하이브리드 렌더링 용어의 사용이 유효한 상황이 더 많습니다.

때로는 개발 회사가 CSR을 사용하고 수행합니다’t 보편적 프레임 워크 사용 옵션을 제공합니다. 이것 CSR 기반 웹 개발은 우리를 곤경에 빠뜨릴 것입니다, 더 큰 정도, 크롤러 및 순위 알고리즘에 따라. 이 게시물에서는 분석 할 것입니다 Google에 이러한 문제가 무엇인지’S 크롤러는이를 해결하는 방법입니다.

CSR 문제는 페이지의 초기로드 중에 문제가됩니다

먼저, 우리는 발생하는 인덱싱 문제를 분석 할 것입니다 웹 사이트 외부에 URL을 입력하자마자, 그리고 HTML이 JavaScript로 클라이언트 측로 렌더링 될 때.

느린 렌더링의 결과로 문제

Google’S 인덱싱 프로세스는 다음 단계를 거칩니다

Googlebot 다이어그램

  1. 크롤링: GoogleBot은 서버에 URL을 요청합니다.
  2. 인덱싱의 첫 번째 물결: 서버에 즉시 페인트 칠한 콘텐츠를 색인화하고 크롤링에 대한 새로운 링크를 얻습니다.
  3. JavaScript를 실행하여 HTML 페인트 클라이언트면을 생성합니다. 이 프로세스는 계산 비용이 많이 듭니다 (순간에 수행하거나 며칠이 걸릴 수 있습니다.
  4. 인덱싱의 두 번째 물결: HTML이 클라이언트 측면으로 표시되면 나머지 콘텐츠가 색인화되고 크롤링 할 새로운 링크가 얻어집니다.

사실 외에 페이지 렌더링 속도가 느리면 페이지를 완전히 인덱싱하는 데 시간이 더 걸릴 수 있으므로 링크 된 후속 페이지의 인덱싱이 지연됩니다. Googlebot’S 렌더러는 인기를 얻지 않은 부품을 남길 수 있습니다. 우리’VE는 옵션을 사용하여 이것을 테스트했습니다 “Google로 가져 오십시오” Google 검색 콘솔에서 제공합니다, 그리고 그것이 생성하는 스크린 샷은’T 표시하는 데 5 초 이상 걸리는 모든 것을 페인트하십시오. 그러나 5 초 이상의 시간이 걸리는 HTML을 생성합니다. 이런 일이 발생하는 이유를 이해하려면 Google 검색 콘솔’S Renterer는 먼저 GoogleBot으로 JavaScript를 실행하는 HTML을 구축합니다’S 렌더러, 페이지를 페인트합니다’S 픽셀. 첫 번째 작업은 인덱싱을 위해 고려해야 할 작업입니다. Google 검색 콘솔에서는 GoogleBot에서 생성 한 첫 번째 물결이 아닌 HTML이 생성되는 것을 볼 수 있습니다’S 렌더러.

Google

Google 검색 콘솔에서는 GoogleBot에서 실행하고 마지막 인덱싱 단계에서 사용되는 JavaScript로 그린 HTML을 볼 수 없습니다. 이렇게하려면이 도구를 사용해야합니다. https : // 검색.Google.com/test/mobile 친화적 인 �� 트윗을 클릭하십시오

테스트에서 우리’HTML 렌더링이 19 초 이상 걸렸을 때’무엇이든지 색인화됩니다. 이것은 오랜 시간이지만, 어떤 경우에는 특히 Ajax를 집중적으로 사용하는 경우, 그리고 이러한 경우 Google을 능가 할 수 있습니다’렌더러는 렌더러와 마찬가지로 다음 단계가 발생할 때까지 기다려야합니다

  1. HTML 다운로드 및 처리됩니다 연결된 파일을 요청하고 DOM을 작성합니다.
  2. CSS 다운로드 및 처리됩니다, 링크 된 파일을 요청하고 CSSOM을 작성합니다.
  3. 자바 스크립트 다운로드됩니다, Ajax 요청을 시작하려면 컴파일 및 실행.
  4. AJAX 요청은 요청 대기열로 이동됩니다, 응답하기를 기다리고, 다른 요청 된 파일과 함께.
  5. Ajax 요청 출시되었으며 네트워크를 통해 서버로 이동해야합니다.
  6. 서버는 네트워크를 통해 요청에 응답하고 마지막으로, 페이지의 내용을 페인트하기 위해 JavaScript가 실행될 때까지 기다려야합니다’S HTML 템플릿.

방금 설명한 프로세스의 요청 및 다운로드 시간은 해당 시간 동안 네트워크 및 서버로드에 따라 다릅니다. 게다가, GoogleBot은 HTTP/1 만 사용합니다.1, 요청이 다른 사람을 다루고 동시에 모두가 처리되기 때문에 HTTP/2보다 느립니다. 그것’클라이언트와 서버 모두 HTTP/2를 사용할 수 있도록해야합니다 GoogleBot은 HTTP/1 만 사용합니다.1, 서버가 HTTP/2를 허용하더라도. 요약하면, 이는 GoogleBot이 다음 요청을 시작하기 위해 각 요청을 기다리는 것을 의미합니다’가능할 가능성이 있습니다’t 브라우저처럼 다양한 연결을 열어 특정 요청을 병렬화하려고’T가 어떻게 작동하는지 정확히 알고 있습니다). 그러므로 우리는 상황에 처해 있습니다 우리는 이전에 추정 한이 19 초를 초과 할 수 있습니다.

예를 들어, 이미지, CSS, JavaScript 및 Ajax 요청으로 200 개가 넘는 요청이 시작되어 각각 100ms를 차지한다고 상상해보십시오. Ajax 요청이 대기열 뒷면으로 전송되면’아마도 콘텐츠를 색인화하는 데 필요한 시간을 초과.

반면, 이러한 CSR 성능 문제로 인해, 우리는 렌더링과 WPO 측면에서 Pagespeed의 FCP (최초의 콘텐츠 페인트) 메트릭에 대해 더 나쁜 점수를 얻을 것입니다.

인덱싱 문제 :

인덱싱 컨텐츠가 클라이언트 측면으로 칠해졌습니다, GoogleBot은 다음 문제를 해결할 수있어 JavaScript 생성 HTML의 인덱싱을 방지 할 수 있습니다:

  • 그들은 a를 사용합니다 JavaScript의 버전 크롤러는 그랬다’t 인식.
  • 그들은 a를 사용합니다 JavaScript API GoogleBot에서 인정하지 않음 (현재, Web Sockets, WebGL, WebVR, IndexedDB 및 WebQL은 지원되지 않습니다. https : // Developers의 자세한 정보.Google.com/검색/문서/가이드/렌더링).
  • JavaScript 파일은 로봇에 의해 차단됩니다.txt.
  • JavaScript 파일은 HTTP를 통해 제공되는 반면 웹 사이트는 HTTPS를 사용합니다.
  • JavaScript가 있습니다 오류.
  • 응용 프로그램이 요청하는 경우 사용자 권한 무언가를하기 위해서는 주요 콘텐츠의 렌더링에 달려 있으면’G GoogleBot이 허가를 거부하기 때문에 페인트를받습니다’기본적으로 요청.

이러한 문제로 고통 받고 있는지 확인하려면 Google을 사용해야합니다’에스 모바일 친화적 인 테스트. Google 검색 콘솔과 유사한 페이지가 화면에 페인트되는 방법에 대한 스크린 샷을 보여 주지만 렌더러가 생성 한 HTML 코드 (앞서 언급 한 바와 같이), JavaScript 코드의 로그 레지스터, 그리고 JavaScript 기능 렌더러는 아직 해석 할 수 없습니다. 이 도구를 사용하여 웹 사이트의 각 페이지 템플릿을 대표하는 모든 URL을 테스트하여 웹 사이트가 색인이 있는지 확인해야합니다.

우리는 그것을 명심해야합니다 HTML 이전 도구에 의해 생성됩니다 메타 데이터 (표준 URL 포함) GoogleBot은 정보를 고려하여 정보를 고려하므로 무시됩니다’S 서버에 페인트.

다음 페이지로의 탐색과 관련된 CSR 문제

자,하자’링크를 사용하여 탐색 할 때 어떤 일이 발생하는지 알 수 있습니다’이미 웹 사이트에 있으며 HTML은 클라이언트 측면으로 그려집니다.

인덱싱 문제

초기 부하 동안 CSR과 반대로, 다음 페이지로의 탐색은 JavaScript를 통해 기본 콘텐츠를 전환하는 것이 SSR보다 빠릅니다. 하지만 우리는’ll 인덱싱 문제가 있습니다

  • 링크 돈’t 유효한 URL을 반환하는 유효한 URL이 있습니다 HREF 속성.
  • 서버는 JavaScript 또는 JavaScript를 활성화하고 모든 캐시를 삭제하여 직접 URL에 액세스 할 때 오류를 반환합니다. 링크를 클릭하여 페이지로 이동하면 보이면’s는 JavaScript에 의해로드되기 때문에 작동합니다. 웹 사이트가 서비스 작업자를 사용하는 경우 직접 액세스 할 때에도 웹 사이트는 캐시를로드하여 올바른 응답을 시뮬레이션 할 수 있습니다. 그러나 Googlebot은 무국적 크롤러입니다’t 서버 작업자 캐시 또는 로컬 스토리지 또는 세션 스토리지와 같은 기타 JavaScript 기술을 고려하여 오류가 발생합니다.

또한 웹 사이트에 액세스하기 위해 URL은 JavaScript를 사용하여 변경해야합니다 역사 API.

Google이 Ajax를 색인 할 수 있으므로 이제 조각에서 발생하는 일?

조각은 해시 #에이어서 끝에 나타날 수있는 URL의 일부입니다. 예를 들어:

http : // www.인간 레벨.com/블로그.HTML#예제

이러한 종류의 URL은 서버에 도달하지 않습니다, 그들은 클라이언트 측만 관리됩니다. 이것은 위의 URL을 서버에 요청할 때 요청을받을 수 있음을 의미합니다 “http : // www.인간 레벨.com/블로그.HTML”, 클라이언트에서 브라우저는 참조되는 문서의 조각으로 스크롤됩니다. 이것은 이러한 URL에 대한 일반적이고 원래 의도 된 용도입니다, 일반적으로 알려진 HTML 앵커. 그리고 실제로 앵커는 모든 링크입니다 ( “ㅏ” HTML의 태그는 출처입니다 닻)). 그러나 옛날에 돌아 왔습니다, 파편은 또한 Ajax-Loaded 페이지의 JavaScript를 통해 URL을 수정하는 데 사용되었습니다, 사용자가 탐색 기록을 탐색 할 수 있도록. 이 방법으로 이런 식으로 구현되었습니다. 그 당시의 조각은 JavaScript를 사용하여 수정할 수있는 URL의 유일한 부분 이었기 때문에 개발자가이를 활용하여이를 사용하여 사용하는 방식으로 사용했습니다’의도. 히스토리 API가 도착하면 JavaScript를 통해 전체 URL을 수정할 수 있었기 때문에 변경되었습니다.

Google이 할 때’t Index Ajax, URL이 조각 부분을 기반으로 Ajax를 통해 콘텐츠를 변경하면 조각을 고려하지 않고 URL과 컨텐츠를 색인화 할 것임을 알았습니다. 그래서… Google이 Ajax를 색인 할 수 있으므로 이제 파편이있는 페이지에서 발생합니다? 행동은 정확히 동일합니다. 페이지를 조각과 링크하고 조각을 통해 액세스 할 때 컨텐츠를 변경하면 조각을 무시하는 컨텐츠를 색인하고 인기는이 URL로 이동합니다, Google은 파편이 앵커로 사용될 것이며 컨텐츠를 변경하지 않기 때문에.

그러나 Google은 현재 Hashbang으로 URL을 색인합니다 (#!)). 이것은 느낌표를 간단하게 추가하여 구현하거나 쾅, 그리고 Google은 Ajax 색인을 만들기 위해 쓸모없는 사양과의 후진 호환성을 유지하기 위해 작동하게합니다. 그러나이 관행은 권장되지 않습니다. 이제는 히스토리 API와 함께 구현되어야하며, Google은 갑자기 해시 방 URL을 인덱싱하는 것을 중단 할 수 있습니다.

Ajax를 통한 부분 응답의 인덱싱 차단

언제 Ajax 요청이 전송됩니다 REST 또는 GraphQL API의 URL, 우리’다시 반환 됨 JSON 또는 우리가하지 않는 페이지’t 인덱스를 원합니다. 그러므로 우리는해야합니다 이러한 요청이 지시되는 URL의 인덱싱 차단.

로봇을 사용하여 차단할 수있는 날에 돌아 왔습니다.txt, 그러나 GoogleBot 이후’S 렌더러가 존재하게되었고 HTML 페인트에 사용되는 리소스를 차단할 수 없습니다.

현재 Google은 조금 더 똑똑하고 있습니다 그것은 그렇습니다’t 보통 Jsons와의 응답을 색인하려고 시도하지만, 우리가 그들이 돈을 지불하고 싶다면’t 인덱스가 있습니다, 모든 검색 엔진에 적용 가능한 범용 솔루션은 AJAX와 함께 사용되는 모든 URL을 게시하여 게시물을 통해 작성된 요청 만 수락하는 것입니다, 그렇기 때문에’Crawlers가 사용합니다. GET 요청이 서버에 도달하면 404 오류를 반환해야합니다. 프로그래밍 측면에서는 그렇지 않습니다’t URL에서 매개 변수를 제거하도록 강요하십시오’s 쿼리 스트링.

HTTP를 추가 할 가능성도 있습니다 “엑스 봇-태그 : noindex” 헤더 (Google에서 발명) Ajax 응답에 대한 응답 또는 이러한 응답이 404 또는 410으로 반환됩니다. HTML에서 직접로드 된 컨텐츠에서 이러한 기술을 사용하면’우리가 로봇을 통해 차단 한 것처럼 인덱스를 얻습니다.txt 파일. 하지만, 그것을 감안할 때’s 페이지의 응답을 그림으로 표시하는 JavaScript, Google doesn’t이 응답과 JavaScript 그림 사이의 관계를 설정하십시오, 그래서 그것은 우리가 기대하는 것을 정확하게합니다. 그리고 그것은 : 부분 응답을 색인화하지 않고 생성 된 HTML을 완전히 색인합니다. 이 동작이 언젠가 바뀔 수 있기 때문에 조심해야 하며이 기술을 적용하면 Ajax를 통해 모든 컨텐츠가로드됩니다.

결론

Google은 이제 JavaScript 및 Ajax를 색인 할 수 있지만 불가피하게 암시합니다 서버에서 이미 처리 된 HTML 인덱싱 비용. 이것은 SSR이 꽤 오랫동안 최상의 옵션이 될 것임을 의미합니다. 다른 대안이 없지만 CSR 웹 사이트를 완전히 또는 부분적으로 다루는 경우 이제이 작업을 수행하는 방법을 알 수 있습니다.