구글 크롤러의 동작 방식
구글봇(Googlebot)은 단순한 텍스트 수집기가 아니라,
실제로 크롬 기반의 렌더링 엔진을 이용해
페이지를 처리한다. 이 과정은 보통 세 단계로 이루어진다.
크롤링(Crawling)
새로운 URL을 찾아내고, 서버에 요청을 보내 HTML 문서를 받아온다.
robots.txt와 같은 파일을 참고하여 접근 가능한 URL만 수집한다.
렌더링(Rendering)
받은 HTML을 파싱하고, 필요한 경우 JavaScript도 실행하여 DOM을 완성한다.
CSS, 이미지, 폰트 등 외부 리소스도 요청하기 때문에, 네트워크 환경이나 차단 정책에 따라
일부가 누락될 수 있다.
인덱싱(Indexing)
완성된 DOM 트리와 메타데이터를 기반으로 페이지를 데이터베이스에 저장한다.
이후 검색 결과에 노출될 수 있게 된다.
렌더링 최적화
CSR 페이지의 문제
CSR(Client-Side Rendering) 페이지는 초기 HTML이 비어 있어,
구글봇이 렌더링 큐에서 JS를 실행해야만 인덱싱할 수 있다.
이 과정이 지연되면 검색 노출이 늦어지거나 일부 페이지는 아예 인덱싱되지 X
SSR/SSG의 강점
SSR(Server-Side Rendering)이나 SSG(Static Site Generation)는 완성된 HTML을 제공하므로,
크롤러가 즉시 콘텐츠를 인식할 수 있다.
Critical Rendering Path 최적화
구글봇은 리소스 요청에 제한이 있고, JS/CSS 파일이 크면 크롤링 비용이 증가한다.
따라서, 필수 리소스만 우선 제공하고, 나머지는 lazy 로딩하는 것이다.
*next/script의 strategy=”lazyOnload”를 활용하면 비핵심 JS를 늦게 로딩시킬 수 있다.
인덱싱 최적화
메타 태그 관리
<title>, <meta name=”description”>은 검색 결과에서 직접 노출되는 요소다.
Next.js 13+에서는 app/ 디렉토리의 metadata API를 사용하여 페이지별 메타데이터를 선언할 수 있다.
Canonical URL
동일 콘텐츠가 여러 경로로 접근 가능할 경우, rel=”canonical” 태그를 통해 대표 URL을 지정해야 한다.
e.g. /products/macbook-pro 와 /products?item=123 → canonical을 /products/macbook-pro로 통일
구조화 데이터 (Structured Data)
JSON-LD를 이용해 구글에 콘텐츠 의미를 전달한다.
e.g. 제품 페이지에는 가격, 재고 상태, 리뷰 평점을 포함한 schema.org 마크업을 추가
Core Web Vitals와 SEO
구글은 사용자 경험 지표를 검색 랭킹에 반영한다. 대표적인 지표는 다음과 같다.
- LCP (Largest Contentful Paint): 가장 큰 요소가 화면에 그려지는 시간 (권장 2.5초 이내)
- FID (First Input Delay): 첫 사용자 입력에 반응하는 시간 (권장 100ms 이내)
- CLS (Cumulative Layout Shift): 레이아웃이 얼마나 안정적인지 (권장 0.1 이내)
Next.js에서 할 수 있는 최적화 예시:
- next/image로 이미지 최적화
- 코드 스플리팅과 dynamic import
- prefetch를 통한 라우팅 최적화
국제화(i18n)와 SEO(글로벌)
글로벌 서비스를 운영한다면 hreflang 속성을 통해 언어/지역별 페이지를 명확히 구분해야 하며
Next.js i18n 라우팅을 활용하면 /en, /ko, /jp와 같은 경로를 쉽게 관리할 수 있다.
그렇지 않으면 다국어 페이지가 중복 콘텐츠로 인식될 수 있다.
답글 남기기