Next.js SEO 검사기

Next.js 사이트에서 SSR, 렌더링, 메타데이터 및 크롤링 가능성 문제를 감사하세요. 7개 카테고리에 걸쳐 20개 이상의 검사를 수행합니다.

#1 Next.js SEO 문제

"클라이언트 사용" 지시문을 과도하게 사용하면 콘텐츠가 브라우저에서만 렌더링됩니다. 검색 엔진 및 AI 크롤러(ChatGPT, Claude, Perplexity)는 콘텐츠 대신 빈 HTML 셸을 볼 수 있습니다.

  • SSR과 CSR 문제 감지
  • 메타데이터 가용성 확인
  • 핵심 웹 바이탈 분석

Next.js 사이트에서 가장 잘 작동하지만 모든 웹사이트를 분석할 수 있습니다.

자주 묻는 질문

이 도구는 무엇을 확인합니까?

이 도구는 7개 카테고리에 걸쳐 20개 이상의 SEO 검사를 수행합니다.

  • 렌더링 및 SSR: 빈 HTML 셸, 클라이언트 전용 렌더링, 수화 문제를 감지합니다.
  • 메타데이터 및 헤드: 제목, 설명, 오픈 그래프, 표준, 뷰포트
  • 성능: 핵심 웹 바이탈(FCP, LCP, TTFB), 렌더링 차단 리소스
  • 이미지: 대체 텍스트, 다음/이미지 사용, 지연 로딩
  • 구조화된 데이터: JSON-LD 스키마 마크업 검증
  • 크롤링 가능성: 로봇 메타, 내부 링크, hreflang
  • 시맨틱 HTML: 제목, 랜드마크, ARIA 속성

SEO에 SSR/SSG가 중요한 이유는 무엇입니까?

검색 엔진과 AI 크롤러는 처음에는 서버의 원시 HTML만 봅니다. 콘텐츠가 JavaScript(클라이언트 측)를 통해서만 렌더링되는 경우 크롤러에 빈 페이지가 표시될 수 있습니다. 서버 측 렌더링(SSR) 또는 정적 사이트 생성(SSG)을 통해 콘텐츠가 초기 HTML 응답에 포함되도록 합니다.

"빈 HTML 셸" 문제란 무엇입니까?

이는 Next.js 앱이 JavaScript를 통해 완전히 로드된 콘텐츠와 함께 최소한의 HTML을 반환할 때 발생합니다. 일반적인 원인:

  • "클라이언트 사용" 지시문의 과도한 사용
  • getServerSideProps 또는 getStaticProps를 사용하지 않음
  • 사용 중인 데이터만 가져오기Effect 후크

렌더링 문제를 해결하려면 어떻게 해야 합니까?

크롤러가 콘텐츠를 사용할 수 있도록 하려면 다음을 수행하세요.

  • 페이지 라우터: getServerSideProps 또는 getStaticProps 사용
  • 앱 라우터: 기본적으로 구성 요소를 서버 구성 요소로 유지하고 필요한 경우에만 "클라이언트 사용"을 추가하세요.
  • 데이터 가져오기: 사용 중이 아닌 중요한 데이터를 서버측에서 가져옵니다Effect
  • 메타데이터: next/head 또는 메타데이터 API 사용