HTML5 Microdata

HTML5 마이크로데이터(Microdata)


마이크로데이터의 개념과 활용(Concept and Use of Microdata)

마이크로데이터는 HTML5에서 제공하는 기능으로, 웹 페이지 내의 데이터에 구조를 부여하여 검색 엔진과 다른 애플리케이션이 데이터를 더 잘 이해하고 처리할 수 있게 합니다. 이를 통해 웹 콘텐츠의 의미를 명확히 하고, 검색 엔진 최적화(SEO)에 유리한 영향을 줍니다.

활용:

  • 검색 엔진 최적화(SEO): 검색 엔진이 페이지 내용을 더 잘 이해하여 검색 결과에 구조화된 데이터를 표시할 수 있게 합니다.
  • 데이터 구조화: 웹 페이지 내의 데이터를 구조화하여 다양한 애플리케이션에서 데이터를 쉽게 활용할 수 있도록 합니다.

마이크로데이터를 사용한 구조화된 데이터 제공(Providing Structured Data with Microdata)

마이크로데이터를 사용하여 웹 페이지 내의 콘텐츠를 더 잘 설명할 수 있습니다. 이를 위해 HTML 요소에 특별한 속성을 추가합니다.

기본 구조:

<div itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">123 Main St</span>
        <span itemprop="addressLocality">Anytown</span>
        <span itemprop="addressRegion">CA</span>
        <span itemprop="postalCode">12345</span>
    </div>
    <span itemprop="telephone">(123) 456-7890</span>
</div>

위의 예제에서, itemscopeitemtype 속성은 특정 타입의 항목(여기서는 Person)을 정의하며, itemprop 속성은 항목의 속성을 지정합니다.


마이크로데이터의 속성: itemscope, itemtype, itemprop

itemscope: 이 속성이 있는 요소는 새로운 항목을 정의합니다. 이 항목 내의 모든 속성은 이 항목에 속하게 됩니다.

itemtype: 이 속성은 항목의 타입을 지정합니다. URL을 통해 타입을 정의하며, 보통 schema.org에서 제공하는 타입을 사용합니다.

itemprop: 이 속성은 항목의 속성을 정의합니다. 속성의 이름은 특정 타입에 따라 다르며, schema.org에서 해당 타입의 속성을 참조할 수 있습니다.

예제: 책 정보 마이크로데이터

<div itemscope itemtype="http://schema.org/Book">
    <span itemprop="name">The Catcher in the Rye</span>
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">J.D. Salinger</span>
    </span>
    <span itemprop="isbn">978-0-316-76948-0</span>
    <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        <span itemprop="name">Little, Brown and Company</span>
    </span>
    <meta itemprop="datePublished" content="1951-07-16" />
</div>

마이크로데이터와 SEO(Microdata and SEO)

마이크로데이터를 사용하면 검색 엔진이 페이지의 콘텐츠를 더 잘 이해할 수 있으며, 이는 검색 결과에 긍정적인 영향을 미칩니다. 검색 엔진은 마이크로데이터를 통해 구조화된 데이터를 인식하고, 이를 검색 결과에 풍부한 스니펫으로 표시할 수 있습니다.

SEO 효과:

  • 풍부한 스니펫: 검색 결과에서 제목과 설명 외에도 별점, 가격, 리뷰 등 다양한 정보를 제공.
  • 검색 가시성 향상: 구조화된 데이터는 검색 엔진이 콘텐츠의 맥락을 이해하는 데 도움을 주어 검색 순위에 긍정적인 영향을 미칠 수 있습니다.
  • 클릭률 증가: 더 많은 정보를 제공하여 검색 사용자에게 매력적인 검색 결과를 제공, 클릭률(CTR) 향상.

마이크로데이터를 사용하면 웹 페이지의 콘텐츠를 보다 구조화되고 의미 있게 만들 수 있습니다. 이는 검색 엔진이 페이지를 더 잘 이해하고, 사용자가 검색 결과에서 더 유용한 정보를 얻을 수 있도록 도와줍니다. 다양한 예제를 통해 마이크로데이터의 적용 방법을 익히고, 이를 실습하여 SEO 효과를 극대화할 수 있습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *