PLP SSR을 이용한 이커머스 SEO 최적화

Source: Dev.to

문제 – “Hydration Guard” 함정

• 증상: view-source에서 PLP에 제품 링크가 0개 표시됨.
• 페이지가 if (!isClient) return null; 같은 동기식 가드를 사용해 JavaScript를 실행하지 않는 봇에게는 마크업을 전혀 렌더링하지 않음.

해결책 – 기술적 심층 분석

1. Hydration 블록 제거

클라이언트 전용 가드를 찾아 제거하고, 서버와 클라이언트 모두에서 실행되는 로직으로 교체해 초기 HTML에 항상 제품 그리드가 포함되도록 함.

2. 서버‑사이드 데이터 가져오기

서버에서 제품을 가져오는 방식은 브라우저와 다름. 데이터 레이어를 다음과 같이 재작성함:

• SSR 단계에서 제품 데이터를 가져옴.
• Strapi의 카테고리 데이터를 Klevu 검색 엔진 요구사항에 맞게 정렬함.

3. 검색 타입 로직

특정 용어 검색에서 CATNAV(Category Navigation)와 와일드카드 쿼리로 전환. 이를 통해 전체 카탈로그가 봇에 의해 발견될 수 있음.

4. 의미론적 링크

• “Load More” 버튼을 다음 페이지를 가리키는 적절한 “ 태그로 교체.
• 사용자는 여전히 빠른 JavaScript 경험을 누리면서, 봇은 명확한 내비게이션 경로를 받음.

5. 카테고리 트리 삽입

SSR HTML에 최상위 카테고리 내비게이션 컴포넌트를 삽입해 각 PLP마다 10개 이상의 고가치 내부 링크를 생성. 이는 사이트의 링크 그래프를 풍부하게 하고 크롤링 깊이를 향상시킴.

6. 봇 시뮬레이션 및 감사

# JavaScript를 실행하지 않고 봇 요청을 시뮬레이션
curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
     -H "Accept: text/html" \
     -L https://www.example.com/plp/category/shoes

응답에 전체 제품 마크업이 포함되어 있어, 이제 봇이 페이지를 인덱싱할 수 있음을 확인함.

숨겨진 SEO 킬러: 클라이언트‑사이드 Hydration Guard가 순위에 미치는 영향

SSR은 단순히 성능 기능이 아니라 SEO 요구사항임. 제품 그리드, 브레드크럼, 내비게이션을 첫 번째 바이트에 포함시켜 검색 엔진에 “지도”를 제공해야 사이트를 효과적으로 인덱싱할 수 있음.

핵심 정리

• 클라이언트 전용 렌더링 가드를 제거할 것.
• SSR 중에 필수 마크업(제품, 링크, 브레드크럼)을 제공할 것.
• 페이지네이션 및 카테고리 내비게이션에 의미론적 “ 요소를 사용할 것.
• curl, wget 등 봇 시뮬레이션 도구로 HTML에 기대한 콘텐츠가 포함됐는지 검증할 것.

이러한 변경을 적용하면 보이지 않던 PLP가 완전하게 인덱싱 가능한 자산으로 변모해, 유기적 가시성과 트래픽이 크게 향상됨.