웹 크롤러로 로드되지 않을 때 Discourse 앱에서 Canonical 메타데이터가 올바르게 변경되지 않음

Discourse 앱에는 Discourse DOM의 <head> 섹션에 있는 <link rel="canonical"> 메타 데이터 요소를 업데이트하는 것과 관련된 버그가 있습니다.

기본적으로 브라우저 클라이언트가 애플리케이션에 진입하고 애플리케이션이 처음 로드될 때, <link rel="canonical" href=""> 요소는 해당 초기 페이지 로드에 따라 설정됩니다. 그러나 사용자가 페이지를 수동으로 새로고침하지 않고 앱 내에서 클릭할 때(일반적인 사용자 행동), <link rel="canonical"> 링크는 업데이트되지 않습니다.

저는 이 버그를 테스트하여 메타 사이트에서 재현했습니다:

그림 1. 홈 페이지에서 메타로 진입하면, 타이틀 요소와 마찬가지로 canonical 링크가 올바르게 설정됩니다.

그림 2. 토픽을 방문합니다. 타이틀 요소는 올바르게 변경되지만, canonical 링크는 올바르지 않습니다(올바르게 업데이트되지 않음).

그림 3. 다른 토픽을 방문합니다. 타이틀 요소는 올바르게 변경되지만, canonical 링크는 올바르지 않습니다(올바르게 업데이트되지 않음).

SEO에 대한 영향

이 버그는 Google이 페이지를 인덱싱할 때, Googlebot이 모든 페이지를 "강제 새로고침"하지 않는 경우 각 페이지의 canonical 정보가 올바르지 않게 되어(위 이미지 시퀀스와 같이) SEO에 부정적인 영향을 미칠 수 있습니다.

재현 가능성

저는 이 버그를 메타 사이트와 우리 사이트 모두에서 일관되게 재현했습니다.

참고

웹 애플리케이션 프레임워크 내부의 (Ember 및 기타 SPA 프레임워크) 라이프사이클 훅에 기반하여 DOM 요소가 업데이트되지 않는 문제를 다른 웹 프레임워크(Ember뿐만 아니라)에서 node.js (SPA) 라이프사이클 문제로 이전에 본 적이 있습니다.

1개의 좋아요

우리는 Googlebot에게 SPA를 제공하지 않으므로 이런 일은 절대 발생하지 않습니다. User Agent를 GoogleBot UA로 설정하여 어떻게 작동하는지 확인해 볼 수 있습니다.

4개의 좋아요

안녕하세요 @Falco

답장 주셔서 감사합니다.

네, UA가 GoogleBot으로 설정된 경우 문제가 되지 않는다는 것을 방금 확인했습니다.

GoogleBot에는 SPA를 제공하지 않으므로 SEO에는 문제가 없을 수 있다는 데 동의합니다. 하지만 그럼에도 불구하고 SPA 자체에는 버그가 있는 것입니다.

또한 GoogleBot에 SPA를 제공하지 않는 것이 어떤 영향을 미칠지 생각해 봐야겠습니다.

그 "작은 사실"을 알려주셔서 감사합니다…:slight_smile:

(참고: "Suggested Topics"가 GoogleBot에 제공되지 않는다는 사실은 전혀 몰랐는데, 이제 알게 되었습니다 … 알려주셔서 감사합니다).

1개의 좋아요

모든 크롤러가 JavaScript를 실행할 수 없으므로, 크롤러에게는 완전히 다른 문서를 제공합니다. 기능은 제한될 수 있지만, 해당 클라이언트에서도 모든 콘텐츠를 소비할 수 있도록 Discourse가 접근 가능하도록 하기 위함입니다.

5개의 좋아요

알려주셔서 정말 감사합니다.

이제 SPA, “무한 스크롤” 및 기타 SEO 관련 문제들에 대해 이전의 논의들이 GoogleBot에게 SPA가 제공되지 않기 때문에 완전히 잘못된 것이었다는 점을 깨달았습니다.

이로 인해 최근에 작성한 일부 커스텀 코드에 대한 제 접근 방식이 바뀌게 되었으며, 이제 콘솔에서 GoogleBot UA를 사용하여 확인해야 한다는 것을 알게 되었습니다.

@Falco 님, 정말 감사합니다. 큰 도움이 되었습니다.

질문:

GoogleBot에게 렌더링되는 HTML에 단일 커스텀 JavaScript 파일을 추가하는 가장 좋은 방법은 무엇인가요?

봇에게 제공되는 HTML을 수정하는 "표준적인 방법"이 있나요?

이렇게 질문하는 이유는 제가 작성한 플러그인(봇을 위해 설계됨)에서 생성된 커스텀 코드가 있기 때문입니다. 콘솔에서 GoogleBot UA를 사용하여 확인해 보았지만(이것도 알려주셔서 감사합니다), 그 커스텀 플러그인 코드가 GoogleBot에 의해 소비되지 않는 것을 발견했습니다.

1개의 좋아요

이 기간 동안, 크롤러에게 제공되는 HTML에 대한 (handlebars 기반) 플러그인으로 내가 원하는 작업을 수행할 수 없으므로, 현재는 Discourse에서 canonical 태그를 단순히 제거하기로 결정했습니다. 이는 웹 크롤러를 위한 canonical 태그를 JavaScript로 수정하는 방법을 알아낼 때까지의 부분적인 해결책입니다.

Discourse는 컨테이너의 yml 파일을 통해 이러한 유형의 변경 사항을 적용할 수 있는 좋은 메커니즘을 제공하므로, 오늘 그 방법을 사용했습니다.

Discourse 메타가 (식별된) 크롤러에게 제공되는 Discourse 앱이 사용자에게 제공되는 페이지와 같지 않다는 점을 지적해 주셔서 매우 감사드립니다.

다른 Discourse 시스템 관리자에게 이 "임시 해결책"을 권장하지 않음을 유념해 주세요. 저는 단지 현재 제가 결정하고 실행한 방법(더 흥미로운 해결책이 나올 때까지)을 공유하는 것입니다.

2개의 좋아요