코스 개요

세션 1: 렌더링 전략

  • 문제: Googlebot이 자주 "보지 못"하는 JavaScript 콘텐츠.

  • 해결책: nuxt.config.ts를 설정하여 하이브리드 렌더링을 구성합니다. 특정 경로 규칙(ISR 대 SWR)을 설정하여 제품 페이지가 봇용 정적 HTML로 제공되도록 합니다.

  • 결과: Curl로 확인된 크롤 가능한 페이지 소스.

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

  • 문제: 단일 페이지 애플리케이션(SPA)은 종종 전체 사이트에 대해 하나의 제목 태그를 공유합니다.

  • 해결책: useSeoMeta와 useServerSeoMeta를 사용하여 프로그래밍 방식으로 동적 제목, 설명 및 캐노니컬을 생성합니다.

  • 소셜 해결책: WhatsApp 또는 LinkedIn에서 링크가 올바르게 표시되도록 손상된 Open Graph(OG) 태그를 디버깅합니다.

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

  • 문제: 검색 엔진이 찾을 수 없는 고립된 페이지.

  • 해결책: @nuxtjs/sitemap를 설치하고 구성하여 동적 경로에 대한 XML 사이트맵을 자동 생성합니다.

  • 성능 해결책: <NuxtImg>를 구현하고 명시적인 크기를 정의하여 누적 레이아웃 시프트(CLS)를 해결하고 인덱싱 속도를 향상시킵니다.

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

  • 심층 분석: "하이dration 불일치" 디버깅—Nuxt에서 성능을 저하시키는 #1 오류.

  • 감사: 수정된 프로젝트에 대해 실시간 Lighthouse 감사를 실행합니다.

  • Schema.org: 검색 결과에서 "리치 스니펫"(별점/리뷰)을 위해 JSON-LD 구조화 데이터를 주입합니다.

요건

  • 참가자들은 Vue.js와 Nuxt 기초 지식이 필수입니다.

대상

  • 개발자
 7 시간

참가자 수


참가자당 가격

회원 평가 (5)

예정된 코스

관련 카테고리