레이아웃에 SEO 구조화 데이터를 추가해 검색 노출 기반 마련
목차
SEO 구조화 데이터를 레이아웃에 심었다.
Base.astro에 WebSite와 Organization JSON-LD 스키마를 추가한 작업이다. 변경 파일이 단 하나, 레이아웃 최상단 파일. 핀포인트 수정처럼 보이지만 사이트 전체에 영향을 주는 작업이라 신경 쓸 게 꽤 있었다.
왜 JSON-LD인가
구조화 데이터를 마크업에 심는 방법은 여러 가지다.
| 방식 | 위치 | 장점 | 단점 |
|---|---|---|---|
| JSON-LD | <script> 태그 |
HTML과 분리, 유지보수 쉬움 | 별도 파싱 구조 필요 |
| Microdata | 인라인 HTML 속성 | 마크업에 직접 연결 | 템플릿 오염, 가독성 나쁨 |
| RDFa | 인라인 HTML 속성 | 표준 폭 넓음 | 복잡도 높음 |
구글이 JSON-LD를 권장한다는 건 이미 업계 상식에 가깝다. 콘텐츠 HTML을 건드리지 않고 <head> 안에 <script type="application/ld+json"> 블록으로 분리할 수 있어서 유지보수가 훨씬 낫다. 특히 Astro처럼 컴포넌트 기반 정적 사이트에서는 레이아웃 파일 한 군데만 수정하면 모든 페이지에 일괄 적용된다는 점이 크다.
작업 내용
Base.astro는 사이트의 모든 페이지가 공유하는 최상위 레이아웃이다. 여기에 두 가지 타입을 추가했다.
WebSite — 사이트 자체를 설명하는 스키마. 검색엔진이 사이트의 이름, URL, 검색 기능 유무 등을 구조적으로 파악할 수 있게 해준다. sitelinks searchbox가 Google SERP에 노출되는 조건 중 하나이기도 하다.
Organization — 운영 주체를 설명하는 스키마. 이름, 로고, 공식 URL, SNS 프로필 등을 명시한다. Knowledge Panel(지식 패널)이 제대로 구성되려면 이 타입이 올바르게 세팅돼 있어야 한다.
---
// Base.astro (패턴 예시)
const jsonLdWebSite = {
"@context": "https://schema.org",
"@type": "WebSite",
"name": site.name,
"url": site.url,
};
const jsonLdOrg = {
"@context": "https://schema.org",
"@type": "Organization",
"name": site.name,
"url": site.url,
"logo": site.logo,
};
---
<head>
<script type="application/ld+json" set:html={JSON.stringify(jsonLdWebSite)} />
<script type="application/ld+json" set:html={JSON.stringify(jsonLdOrg)} />
</head>
두 스키마를 하나의 @graph 배열로 묶는 방법도 있다. 그쪽이 더 "정석"에 가깝다는 의견도 있는데, 이번엔 각각 분리해서 독립적으로 관리하는 쪽을 택했다. 추후 페이지별로 다른 타입(Article, BreadcrumbList 등)을 추가할 때 충돌 없이 확장하기 편하기 때문이다.
레이아웃 파일 하나 바꾸는 게 왜 조심스러운가
Base.astro 같은 최상위 레이아웃은 사이트 모든 페이지에 공통 적용된다. 팀 내에서 이런 파일은 "건드릴 때 두 번 생각하자"는 암묵적 룰이 있다. 작은 실수 하나가 전 페이지 빌드 오류나 렌더링 깨짐으로 번지니까.
이번 변경은 <head> 안에 <script> 블록을 추가하는 것이라 기존 레이아웃 구조를 손상시킬 위험은 낮다. 그래도 아래 체크를 했다.
- Astro 빌드 출력에서 실제 HTML 확인 (
view-source) - Google Rich Results Test 통과 여부
- 중복
@context선언 없는지 (다른 페이지 컴포넌트와 충돌 가능성) - SSG 정적 출력 기준이라 hydration 이슈 없음 확인
SEO 작업은 효과가 즉시 보이지 않아서 우선순위에서 밀리기 쉬운데, 구조화 데이터는 한 번 올바르게 심어두면 크롤링 주기마다 조금씩 누적되는 작업이다. 늦게 하면 늦어질수록 그만큼 인덱싱이 늦어지는 셈이라 이번 기회에 기초부터 제대로 잡아뒀다.
다음은 개별 포스트 페이지에 Article 타입을 추가하는 게 자연스러운 흐름이다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.