구조화된 데이터
구조화된 데이터(Structured Data)는 웹 페이지의 콘텐츠를 검색 엔진이 이해할 수 있도록 도와주는 정형화된 데이터 형식입니다.
주로 JSON-LD (JavaScript Object Notation for Linked Data) 포맷을 사용하며, Schema.org 에서 정의한 스키마에 따라 작성합니다.
이 데이터는 <script type="application/ld+json"> 형태로 HTML 문서 내에 삽입되며, 검색 엔진이 이를 분석하여 리치 결과(Rich Result)를 생성하게 됩니다.
구조화된 데이터를 사용하는 이유 (SEO 관점)
| 항목 | 설명 |
| 검색 엔진 이해도 향상 | 콘텐츠의 정확한 의미를 파악하여 색인 처리 정확도 증가 |
| 리치 스니펫 지원 | 이미지, 별점, 리뷰, 가격, FAQ 등 다양한 형태로 검색 결과에 노출 |
| 클릭률 증가 | 시각적으로 돋보이는 리치 결과로 사용자 관심 유도 |
| 콘텐츠 유형 명확화 | "이 페이지는 제품이다", "이건 리뷰다" 같은 메타 정보를 명시함으로써 검색 품질 향상 |
Next.js에서 구조화된 데이터 적용 방법
Next.js에서는 next/head를 사용하여 <head> 영역에 직접 JSON-LD 스크립트를 삽입할 수 있습니다.
예제: 블로그
import Head from 'next/head';
export default function BlogPost() {
const structuredData = {
"@context": "https://schema.org",
"@type": "Article",
"headline": "Next.js에서 구조화된 데이터 적용하기",
"author": {
"@type": "Person",
"name": "홍길동"
},
"datePublished": "2024-04-22",
"publisher": {
"@type": "Organization",
"name": "개발로그",
"logo": {
"@type": "ImageObject",
"url": "/logo.png"
}
}
};
return (
<>
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>
</Head>
<main>
<h1>구조화된 데이터 적용 방법</h1>
<p>블로그 콘텐츠입니다...</p>
</main>
</>
);
}
// components/StructuredData.tsx
import Head from 'next/head';
interface Props {
data: Record<string, any>;
}
export default function StructuredData({ data }: Props) {
return (
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
</Head>
);
}- <StructuredData>는 React/Next.js 프로젝트에서 직접 구현한 커스텀 컴포넌트입니다.
- 이 컴포넌트를 만들면 다양한 구조화 데이터를 props로 넘겨줄 수 있어 여러 페이지에서 재사용이 쉽고 유지보수가 편리해집니다.
- 아래와 같이 작성하여 재사용 가능합니다:
예제 2: 제품 페이지
<StructuredData data={{
"@context": "https://schema.org",
"@type": "Product",
"name": "Dyson Airwrap",
"image": ["https://example.com/images/airwrap.jpg"],
"description": "모발 손상 없이 스타일링 가능한 에어랩.",
"brand": {
"@type": "Brand",
"name": "Dyson"
},
"offers": {
"@type": "Offer",
"price": "599000",
"priceCurrency": "KRW",
"availability": "https://schema.org/InStock"
}
}} />- 사용 용도: 쇼핑몰, 브랜드 소개 페이지, 상품 상세 페이지 등에서 사용합니다. 제품의 이름, 가격, 이미지, 브랜드, 재고 여부 등을 구조화하여 검색 엔진이 해당 정보를 정확히 인식하고, 검색 결과에 제품 정보(썸네일, 가격 등)를 노출할 수 있게 합니다.
- 구매 가능한 제품 정보와 함께 가격, 재고 여부까지 명확히 명시할 수 있어 검색 결과에 가격 태그와 상품 이미지가 나타날 수 있습니다.
- Google 검색 결과에서 제품 카드 형태로 가격, 재고 상태, 썸네일이 함께 노출될 수 있음
- 사용자가 가격 비교 없이 바로 클릭할 가능성 증가
예제 3: FAQ
<StructuredData data={{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Next.js에서 구조화된 데이터는 어떻게 설정하나요?",
"acceptedAnswer": {
"@type": "Answer",
"text": "next/head를 이용하여 JSON-LD 스크립트를 <head>에 삽입하면 됩니다."
}
},
{
"@type": "Question",
"name": "구조화된 데이터를 사용하면 어떤 이점이 있나요?",
"acceptedAnswer": {
"@type": "Answer",
"text": "검색 결과에 리치 스니펫이 추가되어 클릭률이 높아질 수 있습니다."
}
}
]
}} />- 사용 용도: 고객센터, SaaS 소개 페이지, 제품 소개 페이지 하단 FAQ 섹션에 적합합니다.
- 질문-답변 형식을 구조화하면, Google 검색 결과에서 클릭 없이도 요약된 Q&A 리스트가 직접 노출될 수 있습니다.
- 검색 결과 하단에 접을 수 있는 질문 리스트가 자동 생성됨
- 특히 정보성 콘텐츠나 SaaS 제품 문의에 유리
자주 사용하는 Schema.org 유형
| 유형 | 설명 |
| Article | 블로그, 뉴스 등 기사 콘텐츠 |
| Product | 쇼핑몰 제품 정보 |
| Event | 콘서트, 강연, 모임 등 일정 |
| FAQPage | 자주 묻는 질문과 답변 모음 |
| Review | 사용자 후기, 별점 포함 |
| Recipe | 요리법, 재료, 조리시간 |
| LocalBusiness | 사업장 정보 (위치, 전화번호 등) |
정리
| 항목 | 요약 |
| 목적 | 검색 엔진 이해도 향상 및 SEO 최적화 |
| 구현 방식 | JSON-LD를 <head> 영역에 스크립트로 삽입 |
| Next.js 방식 | next/head 사용, 또는 공통 컴포넌트로 구성 |
| 기대 효과 | 리치 스니펫 노출 → 검색 결과 강화 → 클릭률 증가 |
'개발 공부 > React' 카테고리의 다른 글
| getStaticProps, getStaticPaths (0) | 2025.04.26 |
|---|---|
| Next.js 페이지 로딩 속도 최적화와 SEO 영향 (0) | 2025.04.24 |
| Next.js에서 메타 태그와 Open Graph 태그를 동적으로 관리하는 방법 (0) | 2025.04.21 |
| React 에서 동적 콘텐츠를 SEO 친화적으로 만드는 전략 (0) | 2025.04.18 |
| getStaticProps, getStaticPaths, getServerSideProps (0) | 2025.04.15 |