SEO & 성능 최적화 — Yoast, 캐싱, 이미지 압축

SEO + 성능 최적화 전략

flowchart LR
    SEO["SEO\n검색 노출"]
    SPEED["속도\n사용자 경험"]
    RANK["검색 순위\n트래픽"]

    SEO --> RANK
    SPEED --> RANK
    SEO <-->|상호 영향| SPEED

Google 검색 순위는 콘텐츠 품질 + 페이지 속도 + 모바일 최적화로 결정됩니다.

Yoast SEO 설치 및 설정

플러그인 > 새로 추가 > "Yoast SEO" 설치 및 활성화
→ SEO > 설정 마법사 실행

사이트 전체 설정

SEO > 설정 > 사이트 기본
→ 사이트명: 내 사이트
→ 구분 기호: | 또는 -
→ 기본 설명: 사이트 한 줄 소개

SEO > 검색 외모 > 콘텐츠 유형
→ 글: SEO 제목 = %%title%% %%sep%% %%sitename%%
→ 페이지: 동일
→ 미디어 첨부파일 페이지: 색인화 안 함 ☑ (중복 콘텐츠 방지)

글·페이지별 SEO 설정

Yoast 메타 박스(글 편집 하단):

SEO 탭:
  초점 키프레이즈: 타겟 키워드 입력
  SEO 제목: 브라우저 탭 + 검색 결과 제목 (60자 이내)
  메타 설명: 검색 결과 설명 (155자 이내)

소셜 탭:
  Facebook/Twitter 이미지·제목·설명 별도 설정

XML 사이트맵

SEO > 설정 > XML 사이트맵 > 활성화
→ 생성 URL: https://yourdomain.com/sitemap_index.xml

Google Search Console 등록:
search.google.com/search-console
→ 사이트맵 > 새 사이트맵 제출
→ sitemap_index.xml 입력 → 제출

robots.txt 설정

SEO > 도구 > 파일 편집기 > robots.txt

권장 내용:
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
Disallow: /wp-includes/
Disallow: /?s=         (검색 결과 페이지 차단)
Disallow: /cart/
Disallow: /checkout/
Disallow: /my-account/

Sitemap: https://yourdomain.com/sitemap_index.xml

속도 최적화 — 캐싱 플러그인

WP Rocket (유료, 가장 간편)

플러그인 구매 후 설치 (wpocket.me)

주요 설정:
캐시 > 모바일 캐시 활성화 ☑
파일 최적화 > CSS 파일 축소 ☑
파일 최적화 > JS 파일 축소 ☑
미디어 > 이미지 지연 로딩 ☑
미디어 > 지연 로딩에서 제외: .hero-image (첫 화면 이미지)
사전 로딩 > 사이트맵 기반 사전 로딩 ☑
데이터베이스 > 매주 자동 최적화 ☑

LiteSpeed Cache (무료, LiteSpeed 서버에서 최적화)

플러그인 > 새로 추가 > "LiteSpeed Cache" 설치

캐시 > 캐시 활성화 ☑
최적화 > CSS 최소화 ☑
최적화 > JS 최소화 ☑
이미지 최적화 > SMUSH (WebP 변환)

이미지 최적화

플러그인: Smush 또는 ShortPixel

Smush (무료):
미디어 > Smush
→ 기존 이미지 일괄 압축
→ 새 업로드 자동 압축 ☑
→ WebP 변환 ☑ (Pro)
→ 지연 로딩 ☑

업로드 전 권장 규격:
  배너/히어로  : 1920×1080, WebP, 200KB 이하
  블로그 썸네일: 1200×630, WebP, 100KB 이하
  상품 이미지  : 800×800, WebP, 80KB 이하

Core Web Vitals 개선

Google PageSpeed Insights 점수 목표: 모바일 70+, 데스크톱 90+

LCP (Largest Contentful Paint) — 2.5초 이내
  → 히어로 이미지 preload 추가
  → 캐싱 활성화
  → CDN 사용 (Cloudflare 무료)

CLS (Cumulative Layout Shift) — 0.1 이하
  → 이미지에 width/height 속성 지정
  → 폰트 FOUT 방지: font-display: swap

INP (Interaction to Next Paint) — 200ms 이내
  → 불필요한 JS 플러그인 제거
  → JS 지연 로딩

Cloudflare 무료 CDN 적용

1. cloudflare.com 회원가입
2. 사이트 추가 → 도메인 입력
3. DNS 레코드 확인 → 네임서버 변경 (도메인 등록사에서)
4. SSL/TLS: Full (strict) 설정
5. 캐싱 > Caching Level: Standard
6. Speed > Auto Minify: JS, CSS, HTML ☑

구조화 데이터 (Schema)

검색 결과에 별점, 가격, FAQ가 표시되게 합니다.

Yoast SEO Premium 또는 Schema Pro 플러그인 사용

글/페이지에 자동 추가되는 Schema:
  Article       — 블로그 글
  WebPage       — 일반 페이지
  Organization  — 회사 정보
  BreadcrumbList— 빵 부스러기 경로

WooCommerce 상품:
  Product       — 상품명, 가격, 재고, 리뷰

정리

최적화 항목	도구	목표
메타 태그·사이트맵	Yoast SEO	검색 노출
페이지 캐싱	WP Rocket / LiteSpeed	로딩 속도 ↑
이미지 압축	Smush	파일 크기 ↓
CDN	Cloudflare	전 세계 빠른 전달
Core Web Vitals	PageSpeed Insights	Google 평가 ↑

다음 편에서는 WooCommerce 쇼핑몰 기초 — 상품 등록, 결제 수단, 배송 설정으로 온라인 쇼핑몰을 여는 방법을 배웁니다.