웹개발심화
자바스크립트 SEOJavaScript SEO
DEFINITION
자바스크립트 SEO는 자바스크립트로 내용이나 링크를 만드는 사이트가 검색엔진에 제대로 크롤링·렌더링·색인되도록 구조와 구현을 점검하는 작업입니다.
- 처리 순서
- 크롤링 → 렌더링 → 색인
- 링크로 인정
- href가 있는 a 태그
- 확인 도구
- Search Console URL 검사
01Google이 자바스크립트 페이지를 처리하는 순서
그래서 렌더링을 거쳐야만 보이는 링크는 첫 HTML에 있는 링크보다 늦게 발견될 수 있습니다. 가장 확실한 해결은 렌더링 방식을 SSR·SSG로 바꾸는 것입니다.
- 01크롤링URL을 요청해 첫 HTML을 받습니다. 이때 robots.txt로 막힌 JS·CSS는 가져오지 못합니다.
- 02렌더링대기열을 거쳐 최신 Chromium으로 JS를 실행하고 완성된 DOM을 만듭니다.
- 03색인렌더링된 내용과 링크를 바탕으로 색인하고, 새로 발견한 링크를 크롤링 대기열에 넣습니다.
02JS 사이트에서 자주 보는 문제
- a 태그 없는 링크
onclick이나<span>으로 만든 이동은 크롤러가 링크로 따라가지 않음 - # 뒤의 경로
/#/service처럼 해시 뒤 경로는 별도 페이지로 구분되지 않음 - 클라이언트에서만 404 표시서버는 200을 주면서 화면에만 '없음'이 뜨면 소프트 404
- JS로만 넣는 title·canonical첫 HTML과 렌더링 후 값이 다르면 혼란 신호
- History API URL + a href
<a href="/service/">형태의 실제 URL
03렌더링 결과를 직접 확인하는 방법
- Search Console의 URL 검사 → '실제 URL 테스트' → 렌더링된 HTML에 본문이 있는가
- 브라우저에서 자바스크립트를 끄고 열었을 때 제목·본문·주요 링크가 남는가
- 페이지 소스 보기(첫 HTML)와 개발자 도구 Elements(렌더링 후)의 차이가 큰가
- robots.txt가 렌더링에 필요한 JS·CSS 경로를 막고 있지 않은가
04동적 렌더링은 해결책이 아니라 임시방편
크롤러에게만 미리 렌더링한 HTML을 주는 동적 렌더링은 Google이 장기 해결책으로 권장하지 않는다고 밝혔습니다. 운영할 버전이 둘로 늘어나기 때문입니다. 새로 만드는 사이트라면 처음부터 서버 렌더링이나 정적 생성을 쓰는 편이 낫습니다.
