요점
JavaScript 콘텐츠도 인덱스 가능하지만 처리 시간과 장애점이 늘어나기 때문에 중요한 공개 내용은 초기 HTML이 견실합니다.
Next.js에서는 Server Components와 정적 생성을 기본으로 하고 대화 부분만을 클라이언트화합니다.
실천 절차
- 응답 HTML과 렌더링 후 DOM을 별도로 확인합니다.
- metadata, canonical, hreflang을 URL별로 서버 생성한다.
- 주요 네비게이션을 <a href>로 설정하고 올바른 HTTP 상태를 반환합니다.
- 프로덕션 build에서 JS량, 응답 시간, 실행 에러를 측정한다.
예
컴퓨터만 클라이언트 로딩하고 설명, 제목 및 관련 링크는 서버 HTML로 전달됩니다.
흔한 오류
- JavaScript는 일절 색인되지 않는다고 생각한다.
- 중요 본문을 클릭 후만 표시한다.
- 404 화면을 200으로 반환합니다.
한계
- Google 렌더링은 모든 사용자의 기기와 동일하지 않습니다.
- 한 번의 테스트는 필드 성능이나 인덱스를 보장하지 않습니다.
출처
- Understand the JavaScript SEO basics — Google Search Central; 2026-03-04; 2026-08-14.
- generateMetadata — Next.js; 2026-06-09; 2026-08-14.
- sitemap.xml — Next.js; 2026-03-03; 2026-08-14.
- JSON-LD — Next.js; 2026-03-02; 2026-08-14.
관련 가이드 및 도구
메타데이터, 제목, 링크 분석
HTML에서 title, description, H1–H6, 크롤링 가능한 <a href>를 추출합니다.
메타데이터, 제목, 링크 분석 | NAVINES SEO LabSEO란 무엇이며 유기농 가시성은 왜 쌓이는가?
사람의 과제, 유용한 내용, 기술 품질, 사업 측정을 하나의 구조로 합니다.
SEO란 무엇이며 유기농 가시성은 왜 쌓이는가? | NAVINES SEO Lab검색엔진이 크롤링, 색인, 표시하는 방식
URL 검색, 처리, 색인 선택, 검색 결과 표시 등을 나누어 진단합니다.
검색엔진이 크롤링, 색인, 표시하는 방식 | NAVINES SEO Lab