연락처 정보

코스 개요

세션 1: 렌더링 전략

  • 문제점: 구글봇이 JavaScript 콘텐츠를 종종 "보지" 못하는 이유.
  • 해결책: 하이브리드 렌더링을 위해 nuxt.config.ts 구성하기. 제품 페이지가 봇에게 정적 HTML로 제공되도록 특정 라우트 규칙(ISR vs SWR)을 설정합니다.
  • 결과물: Curl로 검증 가능한 크롤링 가능한 페이지 소스.

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

  • 문제점: 단일 페이지 앱(SPA)은 종종 전체 사이트에 대해 하나의 title 태그만 공유합니다.
  • 해결책: useSeoMeta와 useServerSeoMeta를 구현하여 동적 제목, 설명 및 canonical을 프로그래밍 방식으로 생성합니다.
  • SNS 최적화 해결책: WhatsApp/LinkedIn에서 링크가 올바르게 표시되도록 깨진 Open Graph(OG) 태그 디버깅하기.

세션 3: 기술적 기반 및 인덱싱

  • 문제점: 검색 엔진이 찾을 수 없는 orphan 페이지(유령 페이지).
  • 해결책: @nuxtjs/sitemap을 설치하고 구성하여 동적 라우트를 위한 XML 사이트맵을 자동으로 생성합니다.
  • 성능 개선 해결책: <NuxtImg>를 구현하고 명시적 차원을 정의하여 누적 레이아웃 시프트(CLS)를 해결하고 인덱싱 속도를 높입니다.

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

  • 심층 분석: 성능을 사망하게 하는 Nuxt의 최대 오류인 "하이드레이션 불일치" 디버깅하기.
  • 감사(Audit): 수정된 프로젝트에서 실시간 Lighthouse 감사를 실행합니다.
  • Schema.org: "리치 스니펫"(검색 결과별 별점/리뷰)을 위해 JSON-LD 구조화된 데이터 주입하기.

요건

  • 참석자는 Vue.js와 Nuxt 기본기에 대한 실무 지식이 필수입니다.

대상 독자

  • 개발자
 7 시간

참가자 수


참가자별 가격

회원 평가 (2)

예정된 코스

관련 카테고리