[네이버웹마스터 가이드] 자바스크립트 포함된 문서 검색최적화 > 웹문서/검색 마케팅

• 목록

대부분의 웹 사이트는 사용자 경험을 향상시키기 위해서 자바스크립트를 사용하고 있습니다. 최근에는 자바스크립트 기술이 발전됨에 따라서 많은 개발자들이 사이트 구축 시 Angular, React, Vue.js 등의 프레임워크를 도입하여 웹을 싱글 페이지 애플리케이션 (SPA) 플랫폼 기반으로 전환하고 있습니다. 물론, 네이버 웹사이트 검색에서도 이러한 트렌드를 고려하여 SPA 기반으로 제작된 사이트의 수집 및 색인을 지원하고 있습니다.

SPA 사이트의 경우 자바스크립트가 웹 페이지의 구조 결정에 주도적인 역할을 하기 때문에 네이버 검색로봇도 수집 및 콘텐츠 해석 과정에서 자바스크립트의 영향도를 측정하고 해석합니다. 이러한 일련의 과정은 전통적인 HTML 페이지의 해석보다 몇 배 이상의 리소스가 필요한 작업입니다. 그러므로 SPA 사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 서버에서 렌더링 (Server Side Rendering)을 처리하는 것을 권장합니다.

본 가이드는 네이버 검색로봇이 수집된 HTML 내에 포함되는 자바스크립트를 어떻게 처리하는지를 설명합니다. SPA 방식으로 사이트를 구축하는 경우 본 가이드의 내용을 참고하여 자바스크립트 검색 최적화를 진행하시기 바랍니다.

자바스크립트 및 CSS 가 robots.txt 에 막혀 있는지 체크해주세요

간혹 일부 사이트가 자바스크립트 및 CSS 와 같은 리소스 URL을 검색로봇의 수집 비허용으로 처리하는 경우가 있습니다.

User-agent: *
Disallow: /your-javascript-url
Disallow: /your-css-url

robots.txt 의 내용을 확인해서 검색 로봇이 자바스크립트를 수집할 수 있도록 허용해주세요.

User-agent: *
Allow: /your-javascript-url
Allow: /your-css-url

혹은 별도로 지정 하지 않음

참고로 네이버 검색로봇은 자바스크립트와 같이 리소스를 수집하는 경우 브라우저 User-Agent 마지막에 Yeti가 추가됩니다. User-Agent에 명시된 버전은 수시로 바뀔 수 있으며 보다 자세한 정보는 검색로봇 확인 방법을 참고하세요.

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebit/53.7.36 (KHTML, like Gecko) Chrome/63.0.3239.0 Safari/537.36 (compatible; Yeti/1.1; +http://naver.me/spd)

fragment (#) URL은 사용하지 마세요

fragment는 한 페이지 내에서의 특정 위치를 지정하기 위해서 만들어진 규칙입니다

https://www.mysite.com/page#subsection-1
https://www.mysite.com/page#subsection-2

네이버 검색로봇은 수집 대상 URL 을 해석하는 과정에서 fragment 부분을 제거합니다. 그러므로 위 예제의 URL의 경우 https://www.mysite.com/page 로 변경하여 수집을 진행합니다.

만약 여러분의 사이트 URL이 싱글 페이지 어플리케이션(SPA)의 fragment (#) URL로 구축되어 있고 각
URL 이 독립적인 콘텐츠를 보장한다고 한다면 퍼머링크 (permalink)로 변경해야 합니다.

예) fragment (#) 또는 해쉬뱅 (#!) 으로 구축된 URL 

https://www.mysite.com/#home
https://www.mysite.com/#product
https://www.mysite.com/path/to/#!/faq-1
https://www.mysite.com/path/to/#!/faq-2

예) permalink 로 변경

https://www.mysite.com/home
https://www.mysite.com/product
https://www.mysite.com/path/to/faq-1
https://www.mysite.com/path/to/faq-2

웹 브라우저 기반 해석(렌더링​)

네이버 검색로봇은 여러분이 사용하는 일반 웹브라우저와 동일하게 웹 페이지를 해석(렌더링) 하기 위하여 아래와 같이 처리합니다.

1. 검색로봇이 자바스크립트를 활용하여 동적으로 HTML을 처리하는 페이지를 발견하는 경우 페이지에 포함된 자바 스크립트 리소스가 수집되어 있는지를 체크합니다.

2. 자바스크립트가 수집되어 있지 않으면 정적인 HTML의 내용을 먼저 수집하여 색인 처리합니다.

3. HTML에 포함되어 있는 자바스크립트 리소스는 별도의 수집 과정을 거쳐서 렌더링 서버에 일정 기간 저장됩니다. 간혹 자바스크립트 url에 timestamp 혹은 hash 값을 넣어서 리소스의 최신성을 강제로 처리하는 경우가 발견되고 있습니다. 이 경우 수집 과정에서 페이지의 콘텐츠 해석에 문제가 발생할 수 있으므로 권장하지 않습니다.

4. 검색로봇이 해당 페이지를 재 방문할 때 확보된 자바 스크립트가 있다면 해당 스크립트를 포함하여 렌더링을 진행합니다.

5. 렌더링 결과 페이지의 주요 콘텐츠 내용이 변경되어 있는지를 파악한 후 색인을 업데이트 여부를 결정합니다.

Q. 자바스크립트로 구축된 SPA 사이트는 검색 노출에서 배제되나요?

네이버 검색로봇은 인터넷에 존재하는 수많은 웹페이지를 효율적으로 수집하기 위하여 페이지별 "수집 우선순위”를 결정하는 과정이 존재합니다. 검색 로봇에게 할당되는 수집 리소스는 제한적이기 때문에 알고리즘 상으로 중요하다고 생각되는 URL 을 선정한 후 수집을 진행합니다.

웹페이지의 수집뿐만이 아니라 문서의 색인 규모에 대한 물리적인 한계도 있기 때문에 이미 수집이 되었더라도 색인 및 검색 노출을 보장하지는 않습니다. 그러므로 단순하게 SPA 기반 사이트가 검색에 노출이 되지 않는다고 판단해서는 안 됩니다.

출처 : 네이버 웹마스터 가이드