JavaScript SEO에 대한 궁극적인 가이드

SEO 전체가 최근 다양한 프런트엔드 언어를 사용하는 방향으로 이동했다는 것은 비밀이 아닙니다. Google 태그 관리자(GTM)를 사용하려면 HTML 및 (때때로) Vanilla JavaScript에 대한 기본 지식이 필요합니다.

JavaScript와 관련하여 Google 크롤러가 JavaScript를 읽는 이유와 방법에 대한 최근 논의가 있었습니다. 떠오르는 몇 가지 관련 질문:

• Google은 자바스크립트를 읽나요?
• 내 사이트에서 JavaScript를 많이 사용하는 경우 정확히 무엇을 변경해야 합니까?
• 서버 사이드 렌더링이란 무엇입니까?
• 내 사이트의 모든 단일 JavaScript 프레임워크에 사용해야 합니까?

아래에서 이러한 질문을 분석하고 각 질문에 대해 자세히 답변하려고 노력했습니다.

SEO에 적용되는 최신 JavaScript에 대한 간략한 소개

프런트 엔드 개발에 정통하지 않은 경우 JavaScript는 (현재) DOM 메서드라는 것을 통해 애니메이션 목적으로 사용되는 렌더링 프로그래밍 언어입니다. 보다 정교한 형태로 React 및 Vue와 같은 프레임워크로 네이티브 웹 애플리케이션을 구축하는 데 사용됩니다. React와 Vue가 매우 유명하고 많은 사이트에서 이러한 프레임워크를 사용하기 시작했지만 SEO 전문가는 Vanilla 및 jQuery로 작동하는 WordPress와 같은 레거시 아키텍처를 접할 가능성이 더 큽니다. 정확히 말하면 이러한 CMS에서 JavaScript를 적용하는 것은 주로 슬라이드쇼, 아코디언 및 기타 텍스트 애니메이션 형식과 관련이 있습니다.

JavaScript가 SEO 문제인 이유는 무엇입니까?

Google은 Googlebot이 모든 형태의 JavaScript에 포함된 모든 콘텐츠를 크롤링하고 색인을 생성하고 순위를 매길 수 있다고 말합니다. 그러나 실제로는 주제가 훨씬 더 복잡합니다. Googlebot은 실제로 정적 언어(예: HTML 및 CSS)를 크롤링할 수 있지만 개체 준비 프로그래밍 언어의 경우 다르게 작동합니다. 2017년에 기술 SEO는 오늘날 렌더링 대기열로 알려진 것을 지적하기 시작했습니다. 이것은 Googlebot이 클라이언트측 자바스크립트에 포함된 모든 형태의 텍스트를 색인 생성하는 데 사용하는 가상의 시간 프레임입니다(잠시 후에 살펴보겠습니다).

이를 염두에 두고 JavaScript가 SEO의 민감한 주제가 된 이유를 이해하는 것은 매우 쉽습니다. 중요한 콘텐츠가 해당 렌더링 대기열에 있기 때문에 차단되면 순위가 즉시 느려질 수 있습니다. 이 문제는 JavaScript에 매우 의존적인 WordPress와 같은 CMS 아키텍처 내에서 두드러집니다.

그것이 내 최우선 순위여야 합니까?

아니오, 그러나 동시에 그렇습니다. 일반적인 오해는 자바스크립트에 포함된 내용이 Google에서 자동으로 삭제된다는 것입니다. 하지만 이것은 사실이 아닙니다. 콘텐츠의 일부가 JavaScript에 포함되어 있다고 해서 순위가 ​​매겨지지 않는다는 의미는 아닙니다. 시간이 더 오래 걸릴 수 있습니다. 현재 첫 번째 크롤링 후 간단한 텍스트 조각에 대한 렌더링 대기열은 약 72시간 표시에서 변동하고 있습니다. 그러나 콘텐츠가 jQuery 기반 아코디언에 갇혀 Google에서 색인을 생성하는 데 약 5~6주가 걸리는 경우가 있었습니다. 예, JavaScript에서 키워드 중심 콘텐츠를 제거하십시오. 단, 렌더링 대기열이 너무 길다고 100% 확신하는 경우에만 가능합니다.

프레임워크 및 렌더링 속도

JavaScript는 최근에 많이 발전했습니다. 2014/15년 ECMA 스크립트의 도입으로 더 빠르고 효율적인 프레임워크가 도입되었습니다. React는 (여전히) UI 프레임워크를 위한 가장 인기 있는 JavaScript 라이브러리입니다. Google의 관점에서 렌더링 속도 측면에서 어떤 라이브러리가 더 나은 성능을 보이는지 추적하기는 어렵습니다. 고려해야 할 수십 가지 변수가 있습니다. 사용되는 CMS의 유형, 다중 기능 연결 및 실제로 SEO와 연결되어서는 안 되는 기타 매우 기술적인 측면.

최근 데이터를 감안할 때 React 프레임워크가 단순성 때문에 렌더링 측면에서 가장 빠르다고 안전하게 말할 수 있습니다. 다시 한 번 콘텐츠 애니메이션 등은 대부분 jQuery/Vanilla 기반입니다. 기술 SEO 전문가가 UI 및 기본 앱 내에서 더 일반적인 React 아키텍처와 달리 이러한 프레임워크를 접하는 것이 더 쉬울 것입니다.

Red Cow는 웹 애플리케이션을 구축할 때 항상 React 구성 요소의 사용을 권장하며 이것이 바로 우리가 가장 신뢰받는 Manchester SEO 에이전시인 이유입니다.

Render/Fetch As Google: 정확한가요?

불행히도. 페이지의 JavaScript 및 해당 렌더링 대기열을 테스트하기 위한 가장 좋은 방법은 사이트의 액세스 로그 파일을 분석하는 것입니다. 이렇게 하면 크롤러가 페이지에 방문하는 히트 수를 정확하게 평가할 수 있으므로 렌더링 대기열이 더 나은 페이지를 이해할 수 있습니다. Search Console의 이전 'fetch as Google' 기능은 페이지의 HTML 계층 구조를 확인하는 데 여전히 유용할 수 있지만 자바스크립트를 이해하는 데 있어서는 확실히 정확하지 않습니다. 또한 Search Console은 개별 프레임워크가 외부 CDN에서 호스팅되는 것을 항상 인식하지 못합니다. 또는 콘텐츠 일부가 JavaScript로 인해 렌더링되지 않는다고 말함으로써 그러한 스크립트가 외부에서 호스팅된다는 사실을 놓치고 있습니다. 이는 PWA 및 기타 형태의 데이터 기반 플러그인에 대한 일반적인 관행입니다.

JavaScript 리소스로 콘텐츠를 구성하는 가장 좋은 방법

JavaScript에서 콘텐츠를 분리하는 것은 전적으로 실행 가능하며 다양한 방법으로 완료됩니다. 예를 들어 개발자에게 모든 DOM 메서드 애니메이션 및 기능을 HTML이 아닌 태그로 이동하여 모든 형태의 콘텐츠를 JavaScript에서 자유롭게 하도록 요청할 수 있습니다. JavaScript가 아키텍처 및 엔진(예: Node, 일부 React, Vue)에 사용되는 경우 클라이언트 측 렌더링(CSR)과 반대되는 서버 측 렌더링 라이브러리(SSR) 사용을 고려할 수 있습니다. 이 프로세스는 선택한 브라우저가 아닌 서버 내에서 JavaScript 및 동적 리소스를 실행합니다. 이는 렌더링 대기열에 상당한 이점을 줄 뿐만 아니라 페이지 로딩 시간을 대폭 단축합니다.

마무리

JavaScript는 프런트 엔드 관점에서 보면 복잡한 문제이며 애플리케이션 SEO 측면에서 훨씬 더 복잡합니다. 안타깝게도 오늘날 인터넷의 90% 이상이 JavaScript에서 실행되거나 코드 내에서 최소 5개의 스크립트를 사용합니다. SEO와 같이 지속적으로 발전하는 분야에서는 사이트의 JavaScript를 분석하고 평가할 수 있는 능력의 중요성을 인정하는 것이 필수적입니다.