CSR 기반 Vue.js SPA의 인덱싱 제로 문제를 해결하여 2주 만에 80+ 페이지 인덱싱 달성

Vue.js SPA SEO: how I made my app invisible to Google (and how I fixed it)

Odilon HUGONNOT2026년 5월 18일12분intermediate

AI 요약

Context

Vue.js 3와 Vite를 활용한 CSR(Client Side Rendering) 구조로 인해 초기 HTML에 메타데이터가 부재한 설계적 한계 발생. Google Crawler의 JS 실행 지연 및 낮은 우선순위로 인해 실제 콘텐츠가 인덱싱되지 않는 SEO 병목 현상 노출.

Technical Solution

정적 index.html에 기본 Meta 태그 및 Open Graph 설정을 배치하여 JS 미실행 환경의 최소 정보 보장
@unhead/vue 라이브러리를 통한 Route별 반응형 Meta Tag 동적 제어 구조 설계
useHead()와 computed 속성을 결합하여 비동기 데이터 로딩 상태에 따른 실시간 페이지 타이틀 및 설명 업데이트
Search Console 기반의 Sitemap 제출 및 robots.txt 최적화로 Crawler 접근 경로 명시
JSON-LD 스키마 적용을 통한 구조화 데이터 제공으로 검색 엔진의 시맨틱 이해도 향상
Nginx/htaccess 설정을 통한 모든 요청의 index.html 포워딩으로 SPA 라우팅 일관성 유지

실천 포인트

- index.html 내 기본 Meta/OG 태그 및 Canonical URL 설정 여부 확인 - @unhead/vue 등을 통한 Route별 동적 Meta 태그 구현 및 Computed 바인딩 검토 - robots.txt 내 Sitemap 경로 명시 및 Google Search Console 등록 여부 점검 - JSON-LD 기반의 구조화 데이터 적용을 통한 검색 엔진 최적화 수행 - Social Media Crawler 대응을 위한 정적 HTML 렌더링 테스트 수행

태그

#SSG #JSON-LD #Vue.js #SEO #CSR

원문 읽기