검색엔진이 내 콘텐츠를 '의미 있는 정보(Article, Recipe 등)'로 인식하게 만드는 과정.

정적 사이트의 Front Matter를 구조화 데이터(JSON-LD)로 변환하여 HTML에 심는 것만으로도, '사람이 읽기 쉬운 사이트'에서 '검색엔진이 이해하기 쉬운 데이터'로 진화할 수 있습니다.

1. 핵심 변화: 단순 메타태그에서 "의미" 중심으로

기존 방식이 명함 한 장 건네는 수준이라면, 개선 방식은 상세 이력서를 제출하는 것과 같습니다.

구분 기존 방식 (Meta Tag) 개선 방식 (JSON-LD)
형태 단순 문자열 (title, description) 구조화 데이터 (JSON-LD)
이해도 검색엔진의 추측에 의존 Schema.org 기반의 명확한 정의
노출 일반 검색 결과 Rich Results (별점, 가격, 작성자 등)

2. 데이터 변환 프로세스

Front Matter에 적은 데이터가 최종 HTML에 삽입되기까지의 흐름입니다.

  1. 정의 (Input): Markdown의 front matter에 SEO 데이터 작성
  2. 추출 (Process): Hugo 템플릿 엔진이 해당 데이터를 호출
  3. 변환 (Convert): dict로 구조를 잡고 jsonify 함수로 JSON 포맷팅
  4. 삽입 (Output): 모든 페이지의 <head> 내 <script> 태그로 자동 삽입

3. 실전 구현 가이드

① 데이터 설계 (Front Matter)

페이지 상단에 구조화 데이터로 쓸 변수들을 정의합니다.

yaml
title: "서울 여행 가이드"
description: "로컬이 추천하는 서울 명소"
author: "Sam"
schema:
  type: "Article"

② 템플릿 자동화 (Hugo Template)

데이터를 JSON-LD 형식으로 변환하는 로직을 레이아웃에 추가합니다.

go
{{ $json := dict 
    "@context" "https://schema.org" 
    "@type" .Params.schema.type 
    "headline" .Title 
    "description" .Params.description 
    "author" (dict "@type" "Person" "name" .Params.author)
}}
<script type="application/ld+json">
    {{ $json | jsonify }}
</script>

4. 최종 결과 및 기대 효과

빌드 후 생성된 HTML은 다음과 같은 구조를 갖게 됩니다.

최종 출력 HTML:
  • 검색엔진 신뢰도: 콘텐츠의 성격(글, 제품, 레시피 등)을 즉각 파악
  • 클릭률(CTR) 상승: 검색 결과에서 더 크고 상세한 정보(리치 스니펫) 노출 가능
  • 유지보수 용이: 한 번의 템플릿 설정으로 수백 개의 페이지에 자동 적용