9.1 마이크로데이터란?
마이크로데이터 (structured data)는 HTML 문서에 메타데이터를 추가하여 웹 페이지 내용을 검색 엔진이나 다른 서비스가 더 잘 해석할 수 있도록 해주는 방법이야. 마이크로데이터는 웹 페이지에서 여러 엔티티와 그 관계를 설명하는 데 사용되며, 검색 결과에서 페이지의 가시성을 높이고 리치 스니펫과 같은 추가 기능을 제공해줘.
마이크로데이터는 HTML 코드에 추가되는 구조화된 데이터로, 검색 엔진에 페이지 내용에 대한 추가 정보를 제공해. 예를 들어, 콘텐츠 유형, 저자, 게시 날짜, 평점 등과 같은 데이터를 제공하지.
주요 마이크로데이터 유형:
- Schema.org: 가장 널리 사용되는 마이크로데이터 표준으로, 주요 검색 엔진(Google, Bing, Yahoo, Yandex)에서 지원돼
- JSON-LD: JSON 형식으로 마이크로데이터를 인코딩하는 포맷이며, Google에서 권장해
- Microdata: HTML 코드에 직접 포함되는 마이크로데이터 포맷이야
9.2 Schema.org
Schema.org는 웹 페이지의 데이터를 구조화하기 위한 데이터 타입과 그 속성의 사전이야. 기사, 이벤트, 조직, 제품 등 다양한 데이터 타입을 지원해.
Schema.org 사용 예시
기사 (Article):
<article>
<h1>기사 제목</h1>
<p>저자: 저자 이름</p>
<p>게시 날짜: 2024년 1월 1일</p>
<img src="https://example.com/image.jpg" alt="예시 이미지">
<p>기사 내용...</p>
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "기사 제목",
"author": {
"@type": "Person",
"name": "저자 이름"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "출판사",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
제품 (Product):
<body>
<h1>제품 이름</h1>
<img src="https://example.com/product.jpg" alt="제품 이미지">
<p>제품 설명</p>
<p>가격: $29.99</p>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "제품 이름",
"image": "https://example.com/product.jpg",
"description": "제품 설명",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
Schema.org 사용의 장점:
- 가시성 향상: 검색 엔진이 검색 결과에서 추가 데이터를 표시할 수 있어 (리치 스니펫).
- 인터프리테이션 향상: 검색 엔진이 콘텐츠를 더 잘 이해할 수 있어 페이지 랭킹이 개선될 수 있어.
- 표준 지원: Schema.org는 모든 주요 검색 엔진에서 지원돼.
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data)는 JSON 형식으로 마이크로데이터를 인코딩하고 페이지의 <script> 태그 안에 삽입할 수 있는 방법이야. Google은 구조화된 데이터로 JSON-LD를 사용하는 것을 권장해.
JSON-LD 사용 예시
조직 (Organization):
<body>
<h1>회사 이름</h1>
<p>회사 설명</p>
<div>연락처</div>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "회사 이름",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "고객 서비스"
}
}
</script>
9.4 Microdata
Microdata는 HTML에 내장된 마이크로데이터 포맷이야. microdata 속성은 Schema.org 사전의 타입과 속성에 HTML 요소를 연결하기 위해 직접 HTML 요소에 추가돼.
Microdata 사용 예시
이벤트 (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">이벤트 이름</h1>
<p itemprop="startDate" content="2024-05-01T19:00">2024년 5월 1일, 19:00</p>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">장소 이름</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">거리 주소</span>
<span itemprop="addressLocality">도시</span>
<span itemprop="postalCode">우편 번호</span>
<span itemprop="addressCountry">국가</span>
</div>
</div>
</body>
마이크로데이터 사용의 장점:
- 리치 스니펫: 검색 엔진이 검색 결과에서 확장된 스니펫을 표시할 수 있어, 클릭률이 올라갈 수 있어.
- 콘텐츠 이해도 향상: 검색 엔진이 콘텐츠를 더 잘 이해할 수 있어 페이지 랭킹이 개선될 수 있어.
- 음성 검색 지원: 구조화된 데이터가 음성 검색 결과를 개선할 수 있어.
- 다른 서비스와의 통합: 마이크로데이터는 Google Knowledge Graph 등의 다양한 서비스와 콘텐츠를 통합할 수 있도록 해줘.
GO TO FULL VERSION