코스 개요

세션 1: 렌더링 전략

  • 문제: 왜 Googlebot이 자주 "보지 못"하는 JavaScript 콘텐츠인가.
  • 해결 방안: nuxt.config.ts를 하이브리드 렌더링으로 구성합니다. 특정 라우트 규칙(ISR vs SWR)을 설정하여 검색 로봇에게 정적 HTML로 제품 페이지가 제공되도록 합니다.
  • 결과: Curl로 확인된 크롤 가능한 페이지 소스.

세션 2: 메타데이터 및 가시성

  • 문제: Single Page Apps (SPAs)는 종종 전체 사이트에 대해 하나의 타이틀 태그를 공유합니다.
  • 해결 방안: useSeoMeta와 useServerSeoMeta를 사용하여 동적인 제목, 설명, 캐노니컬을 프로그래밍적으로 생성합니다.
  • 소셜 해결 방안:WhatsApp/LinkedIn에서 링크가 올바르게 보이도록 손상된 Open Graph (OG) 태그를 디버깅합니다.

세션 3: 기술적 기반 및 색인화

  • 문제: 검색 엔진이 찾을 수 없는 고립된 페이지.
  • 해결 방안: @nuxtjs/sitemap를 설치하고 구성하여 동적 라우트에 대한 XML 사이트맵을 자동 생성합니다.
  • 성능 해결 방안: <NuxtImg>를 구현하고 명시적인 크기를 정의하여 누적 레이아웃 시프트(CLS)를 해결하고 색인화 속도를 높입니다.

세션 4: 감사, 방어 및 하이드레이션

  • 심층 분석: Nuxt에서 성능을 저하시키는 #1 오류인 "하이드레이션 불일치"를 디버깅합니다.
  • 감사: 수정된 프로젝트에 대해 실시간 Lighthouse 감사를 수행합니다.
  • Schema.org: 검색 결과에서 별점/리뷰와 같은 "부가 정보"를 위해 JSON-LD 구조화된 데이터를 주입합니다.

요건

  • 참가자들은 Vue.js와 Nuxt 기초에 대한 실무 지식을 필수로 갖추고 있어야 합니다.

대상 대상자

  • 개발자
 7 시간

참가자 수


참가자별 가격

회원 평가 (5)

예정된 코스

관련 카테고리