자바스크립트는 웹 사이트의 사용자 경험을 향상하기 위한 필수적인 기술로 자리 잡았습니다. 그래서 자바 스크립트에 대한 검색엔진 최적화는 필수적입니다. 아래의 사항을 꼭 참고하셔서 자바 사이트에 대한 최적화 방법을 해보세요!
최근에는 자바스크립트 기술이 발전함에 따라 많은 개발자들이 사이트 구축 시 Angular, React, Vue.js 등의 프레임워크를 도입하여 웹을 싱글 페이지 애플리케이션 (SPA) 플랫폼 기반으로 전환하고 있습니다.
SPA 사이트의 경우 자바스크립트가 웹 페이지의 구조 결정에 주도적인 역할을 하기 때문에 검색로봇도 수집 및 콘텐츠 해석 과정에서 자바스크립트의 영향도를 측정하고 해석합니다. 이러한 일련의 과정은 전통적인 HTML 페이지의 해석보다 몇 배 이상의 리소스가 필요한 작업입니다. 그러므로 SPA 사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 서버에서 렌더링 (Server Side Rendering)을 처리하는 것을 권장합니다.
예를 들어 네이버 검색로봇은 다음과 같은 순서로 자바스크립트 페이지를 수집 및 색인합니다.
자바스크립트 및 CSS 가 robots.txt 에 막혀 있는지 체크
robots.txt 에 자바스크립트 및 CSS와 같은 리소스 URL이 검색로봇의 수집 비허용으로 처리되어 있으면 해당 페이지는 수집되지 않습니다. 따라서 robots.txt의 내용을 확인해서 검색 로봇이 자바스크립트를 수집할 수 있도록 허용해 주세요.
fragment (#) URL은 사용하지 마세요
fragment URL은 한 페이지 내에서의 특정 위치를 지정하기 위해서 만들어진 규칙입니다. 네이버 검색로봇은 수집 대상 URL을 해석하는 과정에서 fragment 부분을 제거합니다. 그러므로 fragment URL을 사용하는 경우 페이지의 주요 콘텐츠가 검색되지 않을 수 있습니다.
웹 브라우저 기반 해석(렌더링)
검색로봇은 자바스크립트를 활용하여 동적으로 HTML을 처리하는 페이지를 발견하는 경우 페이지에 포함된 자바 스크립트 리소스가 수집되어 있는지를 체크합니다.
자바스크립트가 수집되어 있지 않으면 정적인 HTML의 내용을 먼저 수집하여 색인 처리합니다.
HTML에 포함되어 있는 자바스크립트 리소스는 별도의 수집 과정을 거쳐서 렌더링 서버에 일정 기간 저장됩니다.
검색로봇이 해당 페이지를 재 방문할 때 확보된 자바 스크립트가 있다면 해당 스크립트를 포함하여 렌더링을 진행합니다.
렌더링 결과 페이지의 주요 콘텐츠 내용이 변경되어 있는지를 파악한 후 색인을 업데이트 여부를 결정합니다.
자바스크립트로 구축된 SPA 사이트는 검색 노출에서 배제 여부
일반적으로 검색로봇은 인터넷에 존재하는 수많은 웹페이지를 효율적으로 수집하기 위하여 페이지별 "수집 우선순위”를 결정하는 과정이 존재합니다. 검색 로봇에게 할당되는 수집 리소스는 제한적이기 때문에 알고리즘 상으로 중요하다고 생각되는 URL을 선정한 후 수집을 진행합니다.
웹페이지의 수집뿐만이 아니라 문서의 색인 규모에 대한 물리적인 한계도 있기 때문에 이미 수집이 되었더라도 색인 및 검색 노출을 보장하지는 않습니다. 그러므로 단순하게 SPA 기반 사이트가 검색에 노출이 되지 않는다고 판단해서는 안 됩니다.
결론
SPA 사이트의 경우 자바스크립트의 영향으로 인해 검색로봇의 수집 및 색인 과정이 전통적인 HTML 페이지에 비해 복잡하고 시간이 오래 걸릴 수 있습니다.
따라서 다음과 같은 방법을 통해 자바스크립트 페이지의 SPA 사이트의 경우 자바스크립트의 영향으로 인해 검색로봇의 수집 및 색인 과정이 전통적인 HTML 페이지에 비해 복잡하고 시간이 오래 걸릴 수 있습니다. 따라서 다음과 같은 방법을 통해 자바스크립트 페이지의 검색 노출을 높이는 데 도움이 될 수 있습니다.
robots.txt 에 자바스크립트 및 CSS의 수집을 허용합니다.
fragment URL을 사용하지 않습니다.
페이지의 주요 콘텐츠를 서버에서 렌더링 합니다.
페이지의 콘텐츠에 적절한 키워드를 사용합니다.
페이지의 내부 링크를 최적화합니다.
외부 링크를 확보합니다.
특히, 페이지의 주요 콘텐츠를 서버에서 렌더링 하는 것은 검색로봇의 수집 및 색인 과정을 크게 개선할 수 있는 방법입니다. 서버에서 렌더링 된 페이지는 검색로봇이 쉽게 이해할 수 있는 구조를 갖추고 있기 때문입니다.
또한, 페이지의 콘텐츠에 적절한 키워드를 사용하는 것도 검색 노출을 높이는 데 도움이 됩니다. 키워드는 검색로봇이 페이지의 내용을 이해하고 분류하는 데 사용되는 기준이 되기 때문입니다.
마지막으로, 페이지의 내부 링크를 최적화하고 외부 링크를 확보하는 것도 검색 노출을 높이는 데 도움이 됩니다. 내부 링크는 검색로봇이 페이지의 구조를 이해하는 데 도움이 되고, 외부 링크는 페이지의 권위를 높이는 데 도움이 됩니다.
이러한 방법을 통해 자바스크립트 페이지의 검색 노출을 높이고, 더 많은 사용자에게 사이트를 알릴 수 있기를 바랍니다.