JavaScript SEO: 검색 엔진에 맞게 JS를 최적화하는 방법
- Technical SEO
- 2023. 5. 22.
테크니컬 SEO에서 중요한 것은 크롤링을 한 다음 인덱싱일이 얼마나 잘되느냐일 것이다.
우리는 검색 엔진에 맞게 고쳐주는 것이 중요하다.
현재 웹 대부분 자바스크립트를 사용하기 때문에, 언어에 따라 최적화하는 것이 좋다.
이 글을 통해, JavaScript SEO: 검색 엔진에 맞게 JS를 최적화하는 방법에 대해서 알아보자.
에스이오 소개
에스이오는 글 1개로 세상을 바꾸고 싶다는 신념으로 시작했습니다.
정확한 SEO 정보를 제공하고 세상을 더 긍정적으로 바꿉니다.
- Introduction to Google Seo 수료
- Google SEO fundamentals 수료
- The Fundamentals of Digital Marketing 수료
- <에스이오_검색엔진 최적화 7가지> 저자
- 현) 에스이오 대표
JavaScript SEO: 검색 엔진에 맞게 JS를 최적화하는 방법
JavaScript SEO란?
JavaScript SEO는 검색 엔진이 자바스크립트로 구축된 웹 사이트를 보다 쉽게 크롤링, 렌더링 및 색인화하는 데 중점을 둔 테크니컬 SEO이다.
일반적인 작업은 아래와 같다.
- 자바스크립트를 통한 콘텐츠 최적화
- 지연 로딩을 올바르게 구현
- 인터널 링크 활용
- 자바스크립트 문제 및 해결
구글은 자바스크립트를 어떻게 크롤링하고 인덱싱 할까?
구글은 다음 세 단계로 JS를 처리한다.
- 크롤링
- 프로세싱
- 인덱싱
구글의 웹 크롤러(구글봇)는 크롤링 및 렌더링을 위해 페이지를 대기열에 넣는다.
다음으로 구글봇은 페이지 콘텐츠를 렌더링 하는 데 필요한 리소스를 결정한다.
이것이 HTML 크롤링을 한다는 의미 한다.
자바스크립을 렌더링 하려면 막대한 리소스가 필요하다.
구글 봇이 거의 20억 개의 웹사이트에서 자바스크립트를 다운로드하고 읽고 실행하기 때문이다.
따라서 구글은 자바스크립트 렌더링을 연기한다.
리소스가 사용 가능해지면 나중에 처리하기 위해 실행되지 않은 모든 항목을 대기열에 넣는다.
리소스가 허용되면 헤드리스에 페이지를 렌더링 하고 자바스크립트를 실행한다.
구글봇은 링크에 대해 렌더링 된 HTML을 다시 처리한다.
그리고 크롤링을 위해 찾은 URL을 대기열에 넣는다.
마지막 단계에서 구글은 렌더링 HTML을 사용하여 페이지 색인을 생성한다.
서버 vs 클라이언트 vs 동적 렌더링
구글 JavaScrpit 색인 생성 문제는 주로 사이트에서 이 코드를 렌더링 하는 방식(서버, 클라이언트 또는 동적 렌더링)에 따라 달라진다.
서버 측 렌더링
SSR(서버 측 렌더링)은 서버에서 렌더링 되는 경우이다.
렌더링 된 HTML 페이지가 클라이언트(브라우저, 구글봇 등)에 제공된다.
SSR은 다음과 같은 이유로 페이지 SEO 성능을 높이는 경향이 있다.
- 페이지 기본 콘텐츠를 로드하는 데 걸리는 시간을 줄일 수 있다.
- UX를 해치는 레이아웃 변경을 줄일 수 있다.
하지만 SSR 구현은 종종 개발자에게 복잡하고 어려운 일이다.
클라이언트 측 렌더링
CSR은 SSR의 반대이다.
문서 객체 모델(DOM)을 사용하여 클라이언트(브라우저 또는 구글봇 측에서 렌더링 된다.
서버 측 렌더링에서와 같이 HTML 문서에서 콘텐츠를 받는 대신 브라우저를 사용하여 사이트 나머지 부분을 렌더링 한다.
동적 렌더링
동적 렌더링은 서버측 렌더링의 대안이다.
JS 생성 콘텐츠에 문제가 있을 수 있는 봇을 감지하고, 자바스크립트 없이 서버 렌더링 버전을 제공한다.
콘텐츠가 빠르게 변경되고 빠른 인덱싱이 필요한 대규모 사이트가 있는 경우 동적 렌더링 사용을 고려할 수 있다.
하지만 적합한 해결책은 아니다.
구글은 일반적으로 동적 렌더링을 '클로킹'으로 간주하지 않는다.
클로킹이란? 검색 엔진 및 사용자에게 다른 콘텐츠를 표시하는 행위이다.
웹사이트 JavaScript 콘텐츠를 SEO 최적화하는 방법
여러 단계에 따라 검색 엔진이 JS 콘텐츠를 제대로 크롤링, 렌더링 및 인덱싱 하도록 할 수 있다.
구글 서치 콘솔을 활용하여 오류 찾기
구글봇은 크롬의 최신 버전을 기반으로 한다.
그러나 브라우저와 같은 방식으로 작동하지 않는다.
즉, 사이트를 시작한다고 해서 구글이 콘텐츠를 렌더링 할 수 있다는 보장은 없다.
Google Search Console(GSC) URL 검사 도구는 구글이 페이지를 렌더링 할 수 있는지 여부를 확인할 수 있다.
테스트하려는 페이지 URL을 누르자
인덱싱이 되어 있다면, 위와 같이 나온다.
인덱싱이 안 됐다면, 인덱싱을 하면 된다.
"크롤링된 페이지 보기"를 클릭한다.
"크롤링된 페이지"를 누르면 위와 같이 HTML, 스크린샷 및 추가 정보가 나온다.
여기에서 불일치나 누락된 콘텐츠가 있는지 확인한다.
티스토리 경우, 대처할 수 없지만 워드프레스나 혹은 일반 웹사이트를 사용하는 경우 문제가 있을 수 있다.
종종 구글에서는 JS 페이지를 robots.txt 파일이 렌더링을 차단하는 경우가 있다.
따라서 중요한 리소스가 크롤링되는 것을 차단하지 않도록 다음 코드를 robots.txt 파일에 추가하자.
User-Agent: Googlebot
Allow: .js
Allow: .css
구글이 자바스크립트 콘텐츠를 인덱싱 하고 있는지 확인
페이지가 제대로 렌더링 되고 있음을 확인한 후에는 인덱싱이 생성되고 있는지 확인하자.
GSC 또는 검색 엔진 자체에서 이를 확인할 수 있다.
구글에서 확인하려면 아래 코드를 입력해 보면 된다.
site:yourdomain.com/page-URL/
페이지 인덱싱이 잘 되었다면, 아래와 같이 이미지를 볼 수 있다.
페이지 인덱싱이 안되어 있다면, "site": 명령을 사용하고 페이지에 JS 콘텐츠 스니펫을 포함한다.
site:yourdomain.com/page-URL/ "snippet of JS content"그럼, 다시 인덱싱이 될 수 있다.
일반적인 JavaScript SEO 문제를 피하는 방법
다음은 일반적인 문제와 JavaScript SEO 사례이다.
- robots.txt 파일에서. js 파일을 차단하면 구글봇이 리소스를 크롤링하지 못할 수 있다.
- 구글은 자바스크립트 콘텐츠가 렌더링 될 때까지 오래 기다리지 않는다. 시간 초과 오류로 인해 콘텐츠가 인덱싱 되지 않을 수 있다.
- 검색 엔진은 클릭하지 않는다. 인터널 링크를 사용하여 구글봇이 사이트의 페이지를 찾을 수 있도록 하자.
- 지연 로딩을 바꿀 때 주로 이미지와 텍스트 콘텐츠에 중점을 둬야 한다.
결론
JavaScript SEO만 제대로 사용한다면 충분히 상위노출도 가능하다.
그리고 사용자가 좋아하는 효율적인 웹사이트도 만들 수 있다.
매번 꾸준히 분석하고 보수하는 것이 가장 중요할 것이다.
<참조: JavaScript SEO: How to Optimize JS for Search Engines>
더 알아보기
- 에스이오 홈페이지 : 검색엔진 최적화(SEO) FACT만 제공하는 콘텐츠 페이지.
- 에스이오_검색엔진 최적화 7가지 : 2019년부터 쌓아온 SEO를 정석으로 배울 수 있는 전자책.
- 에스이오 부트캠프_30일 : SEO Analyst에게 구글 SEO를 A to Z까지 30일 동안 1:1로 배울 수 있는 강의.