이 솔루션으로 JavaScript 웹사이트를 SEO 친화적으로 만드십시오

로

오늘날 대부분의 웹사이트는 동적 상호 작용을 위해 JavaScript를 활용하고 있습니다. 검색 엔진 봇은 놀라운 지능을 갖추고 있지만, JavaScript 콘텐츠를 제대로 렌더링하지 못해 페이지 순위에 부정적인 영향을 줄 수 있습니다.

JavaScript 콘텐츠의 렌더링 방식은 웹사이트 코드가 어떻게 처리되느냐에 따라 크게 달라집니다.

예를 들어, 서버 측 렌더링(SSR)에서는 웹사이트 콘텐츠가 서버 자체에 존재하며, 브라우저는 요청 시 완전하게 렌더링된 HTML을 받습니다.

반면, 클라이언트 측 렌더링(CSR)에서는 JavaScript가 브라우저 내에서 DOM을 사용하여 콘텐츠를 렌더링합니다.

또 다른 옵션인 동적 렌더링은 클라이언트 측에서 렌더링된 콘텐츠는 브라우저로, 서버 측에서 렌더링된 콘텐츠는 검색 엔진으로 전달하는 방식입니다.

렌더링 기술은 JavaScript가 렌더링되는 방식에 직접적인 영향을 주며, 이는 페이지 순위를 결정하는 중요한 요소입니다.

웹사이트의 모든 JavaScript 코드가 제대로 렌더링되도록 하려면, 적절한 JavaScript SEO 전략을 따르는 것이 필수적입니다. 하지만 먼저 JavaScript SEO가 무엇인지 정확히 이해해야 합니다.

자바스크립트 SEO의 핵심

JavaScript SEO는 검색 엔진이 웹사이트 또는 웹페이지의 JavaScript 코드(동적 콘텐츠)를 효율적으로 크롤링하고 색인화할 수 있도록 하는 기술입니다. Google이나 다른 검색 엔진은 크롤링, 렌더링, 색인화라는 세 단계를 거쳐 JavaScript를 처리합니다. Google이 이 모든 단계를 성공적으로 완료하려면 JavaScript 콘텐츠가 SEO에 최적화되어 있어야 하며, 즉, 검색 가능하고 접근 가능해야 합니다.

Google이 JavaScript 콘텐츠를 처리하는 메커니즘

Googlebot이 JavaScript를 처리하기 위해 거치는 단계는 다음과 같습니다.

  • HTTP 요청을 통해 크롤링 대기열에서 URL을 가져옵니다.
  • 사이트의 robots.txt 파일을 확인하여 크롤링이 허용되지 않는 URL을 식별합니다.
  • ‘허용되지 않는’ URL을 건너뛰고, 다른 URL에 대한 응답을 구문 분석하여 크롤링 대기열에 추가합니다.
  • 인덱싱되지 않은 페이지를 제외하고, 렌더링을 위해 페이지를 대기열에 넣습니다.
  • Chromium 엔진을 사용하여 페이지를 렌더링하고, JavaScript를 실행한 다음, 페이지를 인덱싱합니다.
  • 렌더링된 HTML에서 링크를 다시 구문 분석합니다.
  • 크롤링할 URL을 대기열에 넣습니다.

Google이 JavaScript 콘텐츠를 색인화하지 못하는 경우

Google은 올바르게 구현된 JavaScript는 성공적으로 색인화할 수 있습니다. 하지만 일부 JS 및 CSS 파일이 숨겨져 있다면 Google은 웹사이트를 제대로 크롤링하지 못할 수 있습니다. 마찬가지로, 원본 HTML에는 링크가 존재하지만 렌더링된 HTML에 나타나지 않는 경우, Google은 해당 링크를 크롤링하거나 색인화하지 않고 건너뛸 수 있습니다.

또한, JavaScript가 HTML에 직접 포함되지 않은 경우에는 Google이 파일을 다운로드하여 실행해야 합니다. 더불어, 검색 엔진은 웹 페이지의 캐시된 버전을 저장할 수 있으며(성능 향상을 위해), 이때 페이지의 JavaScript가 웹 페이지와 동기화되지 않을 수도 있습니다.

과도하게 JavaScript를 사용하면 페이지 속도가 느려지거나, 심지어는 시간 초과 오류가 발생할 수 있습니다. JavaScript 코드의 모든 부분을 읽어야 하기 때문입니다.

JavaScript SEO가 중요한 이유

JavaScript SEO는 Google을 비롯한 검색 엔진이 웹페이지의 다양한 요소와 순위를 결정하는 데 영향을 미치기 때문에 매우 중요합니다.

온페이지 요소 잠재적인 SEO 문제 가능한 SEO 해결책
렌더링된 콘텐츠 Google과 같은 검색 엔진은 사이트의 robots.txt 파일에서 리소스가 차단된 경우 페이지를 렌더링할 수 없습니다. 또한 Google은 차단되거나 숨겨진 JS 및 CSS 파일을 색인화하거나 렌더링할 수 없습니다. 페이지의 핵심 콘텐츠에서 JavaScript를 최소화합니다. 서버 측 렌더링, 동적 렌더링 또는 하이브리드 렌더링(클라이언트 측과 서버 측 결합)과 같은 클라이언트 측 렌더링의 대안을 적용합니다.
링크 내부 링크이거나 사용자가 링크를 클릭할 때 JavaScript가 URL을 생성하는 경우, Google은 해당 링크를 검색하지 못할 수 있습니다. href 속성을 가진 앵커 태그를 사용하여 링크를 구현합니다. <div>나 <span> 태그와 같은 가상 링크는 크롤링되지 않습니다.
메타데이터 사이트에서 vue-meta와 같은 Node.js 패키지를 사용하지 않는 한, 검색 엔진은 각 페이지나 보기에 대한 메타데이터를 크롤링하지 못할 수 있습니다. 심지어는 동일한 메타데이터만 크롤링할 수도 있습니다. react-helmet, vue-meta 또는 react-meta-tags와 같은 Node.js 패키지를 사용합니다.
지연 로드 이미지 검색 엔진 크롤러는 지연 로드된 콘텐츠를 선택하지 않습니다. 검색 엔진은 콘텐츠를 스크롤할 수 없으므로 일부 콘텐츠는 렌더링되지 않을 수 있습니다. DOM 요소가 사용 가능해지면 가시성과 위치를 인식하는 IntersectionObserver API를 활용합니다. 브라우저(Chrome)의 기본 지연 로딩 기능도 고려해볼 수 있습니다.
페이지 로드 시간 JavaScript 콘텐츠가 많은 페이지는 로딩 속도가 느려져 검색 순위에 부정적인 영향을 줄 수 있습니다. 핵심 JavaScript 코드는 인라인으로 추가하고, 주요 콘텐츠가 렌더링될 때까지 중요하지 않은 JavaScript 코드의 실행을 지연시켜 전체 JavaScript 코드의 양을 줄입니다.

JavaScript SEO 모범 사례

다음과 같은 모범 사례를 따르면 검색 엔진이 웹 페이지를 더 효율적으로 크롤링하고 렌더링할 수 있습니다.

정해진 웹 표준에 따라 링크 및 이미지 추가

onclick, #pageurl 또는 window.location.href=’/page-url’ 대신 <a href> 태그를 사용하여 링크를 추가해야 합니다. 이렇게 하면 Google이 링크를 더 쉽게 크롤링하고 따라갈 수 있습니다.

<a href="http://koreantech.org.com">Geek World에 오신 것을 환영합니다</a>

마찬가지로, <img data-src> 태그가 아닌 <img src> 태그를 사용하여 이미지를 추가해야 합니다.

<img src="myimg.png" />

서버 측 렌더링(SSR)을 우선적으로 사용

웹사이트 콘텐츠가 사용자 브라우저와 별개로 서버에서 사용 가능한지 확인해야 합니다.

렌더링된 HTML에 모든 중요한 콘텐츠가 포함되었는지 확인

렌더링된 HTML에는 정확한 제목, 메타 로봇 태그, 메타 설명, 이미지, 구조화된 데이터 및 canonical 태그가 포함되어야 합니다.

JavaScript 웹사이트를 SEO 친화적으로 만드는 방법

웹 페이지에서 JavaScript SEO 구현을 테스트하려면 다음 단계를 따르세요.

  • 웹사이트에서 JavaScript를 얼마나 사용하는지 확인하세요: 브라우저에서 JavaScript를 비활성화하면 됩니다. 콘텐츠가 거의 표시되지 않는다면 웹사이트가 JavaScript에 크게 의존한다는 의미입니다.
  • Googlebot이 모든 중요한 콘텐츠와 태그를 제대로 가져오는지 확인하세요: Google 모바일 친화성 테스트 도구나 리치 결과 테스트 도구를 사용하여 Googlebot이 원시 HTML을 사용하여 콘텐츠를 렌더링하는 방식을 확인하세요.
  • 다음과 같은 Chrome 확장 프로그램을 사용할 수도 있습니다. 렌더링된 소스 보기 확장 프로그램을 사용하여 JavaScript가 페이지를 어떻게 변경하는지, 그리고 원본 HTML과 렌더링된 HTML을 비교해 보세요.
  • 다음을 사용하여 렌더링된 HTML에서 중요한 태그 (제목, 메타 설명 등)를 확인할 수 있습니다. SEO Pro 크롬 확장 프로그램을 사용하세요.

결론

이 글을 통해 JavaScript가 SEO 처리를 얼마나 복잡하게 만들 수 있는지, 그리고 JavaScript를 과도하게 사용했을 때 발생할 수 있는 문제점과 그 해결 방법을 알아보았습니다.

또한 JavaScript 웹사이트를 SEO 친화적으로 만드는 데 도움이 되는 여러 모범 사례와 도구를 살펴보았습니다. Google이 동적 콘텐츠를 인식하고 크롤링하는 데 도움이 되는 또 다른 유용한 도구로는 Prerender, AngularJS, 그리고 Huckabuy가 있습니다.

웹사이트 로딩 시간을 최적화하는 방법도 잊지 말고 확인해 보세요.

이 기사가 유익했기를 바랍니다. 유익했다면 다른 사람들과 공유하는 것은 어떨까요?