개발 slecs

블로그 포스트에 구조화 데이터를 심어 리치 스니펫 노출 기반 마련

목차

블로그 포스트 페이지에 Article JSON-LD 구조화 데이터를 심었다.

왜 지금 이 작업이었나

SEO 개선 항목들을 훑다 보면 늘 후순위로 밀리는 게 구조화 데이터다. 기능적으로 눈에 안 보이고, 배포해도 당장 트래픽이 튀지 않으니까. 근데 이게 쌓이면 검색 엔진 입장에서 이 사이트가 "신뢰할 수 있는 콘텐츠 소스"인지 판단하는 데 조용히 영향을 준다. Google의 Rich Results 대상이 되려면 Article 스키마가 있어야 하고, 없으면 아무리 글을 잘 써도 리치 스니펫 노출 자체가 안 된다. 그 손해가 누적되는 걸 이제 더 두고 볼 수 없었다.

Post.astro는 이 블로그에서 모든 개별 포스트 페이지를 렌더링하는 레이아웃 파일이다. 여기에 한 번만 박아두면 앞으로 작성되는 글 전부에 자동으로 JSON-LD가 따라붙는다. 영향 범위 대비 수정 지점이 단 하나라는 게 이 구조의 장점이다.

실제로 뭘 넣었나

Article JSON-LD는 <script type="application/ld+json"> 태그 안에 JSON 객체를 직렬화해서 <head> 또는 <body> 안에 삽입한다. 스키마는 schema.org 스펙을 따르며, Article 타입 기준으로 최소한 아래 필드는 있어야 Google이 유효하다고 인정한다.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "포스트 제목",
  "datePublished": "2026-05-20T00:00:00+09:00",
  "dateModified": "2026-05-20T00:00:00+09:00",
  "author": {
    "@type": "Person",
    "name": "작성자 이름"
  },
  "image": "https://example.com/og-image.png",
  "url": "https://example.com/posts/slug"
}

Astro에서는 frontmatter에서 받아온 값들을 그대로 템플릿 리터럴로 주입할 수 있어서 따로 클라이언트 JS 없이 SSG 시점에 정적으로 박힌다. 이 부분이 Next.js 같은 환경보다 오히려 깔끔하다. 런타임 hydration 없이 HTML에 그냥 출력되니까.

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  headline: title,
  datePublished: pubDate.toISOString(),
  dateModified: (updatedDate ?? pubDate).toISOString(),
  author: { "@type": "Person", name: AUTHOR_NAME },
  image: ogImage ?? DEFAULT_OG_IMAGE,
  url: Astro.url.href,
})} />

set:html을 쓰는 이유는 Astro가 기본적으로 {} 내부 표현식을 HTML 이스케이프 처리하기 때문이다. <, >, " 같은 문자가 JSON 안에서 엔티티로 변환되면 JSON 파싱 자체가 깨진다. set:html로 raw output을 명시해줘야 한다.

이런 변경이 놓치기 쉬운 이유

항목 상태
기능 동작에 영향 없음
사용자 화면에서 보임 없음
배포 직후 효과 확인 가능 여부 불가 (크롤링 주기 의존)
코드 리뷰에서 체크하기 쉬운가 낮음
장기 SEO 효과 있음

보다시피 단기 피드백이 없는 작업이다. 그래서 항상 후순위에 눌린다. 팀에서 이런 류의 작업을 챙기려면 "검색 노출 개선" 같은 큰 목표에 묶어서 OKR 단위로 올려두거나, 아예 SEO 체크리스트를 정기 배포 전 게이트에 걸어두는 게 유일한 방법이다. 그렇지 않으면 계속 밀린다.

Google Search Console에서 Rich Results Test로 유효성은 바로 확인할 수 있다. 배포하고 URL 붙여넣으면 Article 스키마를 감지했는지, 필수 필드 빠진 게 없는지 즉시 나온다. 효과는 몇 주 기다려야 하지만 유효성 확인은 당일 가능하니, PR 머지 전에 이걸 체크 항목에 넣으면 최소한 "박긴 했는데 깨진" 상황은 방지할 수 있다.

레이아웃 파일 하나 고친 거지만, 앞으로 쌓일 모든 포스트가 처음부터 구조화 데이터를 갖고 나온다는 점에서 지금 한 게 맞다.

끝.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.