웹사이트 데이터 구조화 방법: Microdata와 RDFa

해당 글은 인공지능 언어 모델인 ChatGPT가 작성한 것입니다.

 

데이터 구조화는 웹사이트의 검색 엔진 최적화(SEO)와 사용자 경험을 향상시키는 중요한 요소입니다. 그 중에서도 Microdata와 RDFa는 HTML 태그와 속성을 활용하여 데이터를 구조화하는 방법으로 널리 사용되고 있습니다. 이번 글에서는 Microdata와 RDFa에 대해 자세히 알아보고, 실제 구현 예제를 통해 그 활용 방법을 배워보겠습니다.

 

Microdata

Microdata는 HTML5의 일부로 포함된 데이터 구조화 방법으로, 간단한 데이터 표현에 적합합니다. HTML 태그의 속성으로 "itemscope", "itemtype", "itemprop" 등을 사용하여 데이터를 정의하고 표시합니다. 예를 들어, 제품의 이름, 가격, 설명 등을 구조화할 수 있습니다. 아래는 Microdata를 활용한 제품 정보의 예시 코드입니다.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">제품명</h1>
  <span itemprop="price">가격</span>
  <p itemprop="description">제품 설명</p>
</div>

 

RDFa

RDFa는 Resource Description Framework in Attributes의 약자로, HTML 태그의 속성을 사용하여 데이터를 구조화하는 방법입니다. Microdata와 마찬가지로 "itemscope", "itemtype", "itemprop" 등의 속성을 사용합니다. RDFa는 Microdata보다 조금 더 복잡한 구조화 작업에 적합합니다. 아래는 RDFa를 활용한 제품 정보의 예시 코드입니다.

<div vocab="https://schema.org/" typeof="Product">
  <h1 property="name">제품명</h1>
  <span property="price">가격</span>
  <p property="description">제품 설명</p>
</div>

위의 예제 코드에서 "제품명", "가격", "제품 설명"은 실제 데이터로 대체되어야 합니다.

 

Microdata와 RDFa를 사용하면 검색 엔진은 웹사이트의 데이터를 더 잘 이해하고, 검색 결과에 더 많은 정보를 표시할 수 있습니다. 또한 스크린 리더 등의 보조 기술을 사용하는 사용자에게도 더 나은 접근성을 제공할 수 있습니다.

 

이제 실제로 Microdata와 RDFa를 활용한 구조화 데이터 예제를 살펴보겠습니다.

 

아래는 토마토 파스타 레시피를 Microdata를 활용하여 구조화한 예시입니다:

<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">토마토 파스타</h2>
  <img src="tomato-pasta.jpg" alt="토마토 파스타" itemprop="image">

  <p itemprop="description">신선한 토마토와 향긋한 양파로 만든 맛있는 파스타입니다.</p>
  <ul>
    <li itemprop="ingredient">파스타 면</li>
    <li itemprop="ingredient">토마토</li>
    <li itemprop="ingredient">양파</li>
    <li itemprop="ingredient">올리브 오일</li>
    <li itemprop="ingredient">소금</li>
    <li itemprop="ingredient">후추</li>
  </ul>
  <h3>조리 절차</h3>
  <ol>
    <li itemprop="recipeInstructions">물에 소금을 첨가하여 파스타 면을 삶습니다.</li>
    <li itemprop="recipeInstructions">양파를 썰고, 토마토를 다져 준비합니다.</li>
    <li itemprop="recipeInstructions">팬에 올리브 오일을 두르고 양파를 볶습니다.</li>
    <li itemprop="recipeInstructions">다진 토마토를 넣고 익힙니다.</li>
    <li itemprop="recipeInstructions">삶은 파스타 면을 넣고 잘 섞어줍니다.</li>
    <li itemprop="recipeInstructions">소금과 후추로 간을 맞추고 완성합니다.</li>
  </ol>
</div>

 

아래는 토마토 파스타 레시피를 RDFa를 활용하여 구조화한 예시입니다:

<div vocab="http://schema.org/" typeof="Recipe">
  <h1 property="name">토마토 파스타</h1>
  <p property="description">신선한 토마토로 만든 맛있는 파스타 요리법입니다.</p>
  <img property="image" src="https://example.com/images/tomato-pasta.jpg" alt="토마토 파스타 이미지">
  <div property="author" typeof="Person">
    <p property="name">홍길동</p>
  </div>
  <span property="datePublished" content="2023-05-15">2023년 5월 15일</span>
  <span property="prepTime" content="PT30M">30분</span>
  <span property="cookTime" content="PT20M">20분</span>
  <span property="totalTime" content="PT50M">50분</span>
  <span property="recipeYield">2인분</span>
  <ul property="ingredients">
    <li>200g 스파게티</li>
    <li>2개 토마토</li>
    <li>1개 양파</li>
    <li>2개 마늘</li>
    <li>올리브 오일</li>
    <li>소금과 후추</li>
  </ul>
  <ol property="recipeInstructions">
    <li>물에 소금을 넣고 스파게티를 삶습니다.</li>
    <li>팬에 올리브 오일을 두르고 양파와 마늘을 볶습니다.</li>
    <li>토마토를 추가하고 조리합니다.</li>
    <li>삶은 스파게티를 넣고 소금과 후추로 간을 맞춥니다.</li>
    <li>완성된 파스타를 그릇에 담아서 서빙합니다.</li>
  </ol>
</div>

 

위의 예제는 토마토 파스타 레시피를 Microdata와 RDFa를 활용하여 구조화한 것입니다. 각 요소에는 적절한 속성을 부여하여 데이터를 명확하게 표현하였습니다. 레시피의 이름, 이미지, 설명, 재료, 조리 절차 등이 구조화되어 있습니다.

 

이와 같이 Microdata와 RDFa를 활용하여 데이터를 구조화하면 검색 엔진은 이러한 정보를 더 잘 인식하고, 검색 결과에 풍부한 스니펫을 표시할 수 있습니다. 또한, 웹사이트의 사용자들은 보다 쉽게 필요한 정보를 찾을 수 있게 되며, 접근성도 향상됩니다.

 

이번 글에서는 Microdata와 RDFa에 대해 소개하고, 실제 구현 예제를 통해 그 활용 방법을 알아보았습니다. 데이터 구조화는 웹사이트의 가시성과 사용자 경험을 향상시키는 데 큰 역할을 할 수 있으므로, 블로그 글 작성 시에도 적극적으로 활용해보시기 바랍니다.