HTML5-마이크로 데이터

마이크로 데이터는 웹 페이지에 추가적인 의미를 제공하는 표준화 된 방법입니다.

Microdata를 사용하면 사용자 지정 요소를 정의하고 웹 페이지에 사용자 지정 속성을 포함 할 수 있습니다. 상위 수준에서 마이크로 데이터는 이름-값 쌍 그룹으로 구성됩니다.

그룹은 items, 각 이름-값 쌍은 property. 항목과 속성은 일반 요소로 표시됩니다.

예

항목을 생성하려면 itemscope 속성이 사용됩니다.
항목에 속성을 추가하려면 itemprop 속성은 항목의 하위 항목 중 하나에 사용됩니다.

여기에 각각 "이름"속성이있는 두 개의 항목이 있습니다.

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

다음 결과가 생성됩니다-

속성은 일반적으로 문자열 값을 가지고 있지만 다음과 같은 데이터 유형을 가질 수 있습니다-

글로벌 속성

Microdata는 모든 요소에서 사용할 수있는 5 가지 전역 속성을 도입하고 데이터에 대한 머신의 컨텍스트를 제공합니다.

Sr. 아니.	속성 및 설명
1	itemscope 아이템을 생성하는 데 사용됩니다. itemscope 속성은이 페이지에 마이크로 데이터가 있고 여기에서 시작된다는 것을 알려주는 부울 속성입니다.
2	itemtype 이 속성은 항목을 정의하고 속성에 대한 컨텍스트를 제공하는 유효한 URL입니다.
삼	itemid 이 속성은 항목의 전역 식별자입니다.
4	itemprop 이 속성은 항목의 속성을 정의합니다.
5	itemref 이 속성은 항목의 이름-값 쌍을 찾기 위해 크롤링 할 추가 요소 목록을 제공합니다.

속성 데이터 유형

속성에는 일반적으로 위의 예에서 언급 한 문자열 인 값이 있지만 URL 인 값도있을 수 있습니다. 다음 예제에는 값이 URL 인 "image"라는 하나의 속성이 있습니다.

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

속성은 날짜, 시간 또는 날짜와 시간 값을 가질 수도 있습니다. 이것은time 요소와 그 datetime 속성.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

다음 결과가 생성됩니다-

속성을 선언하는 요소에 itemscope 속성을 넣어 속성 자체가 이름-값 쌍의 그룹이 될 수도 있습니다.

Microdata API 지원

브라우저가 HTML5 마이크로 데이터 API를 지원하는 경우 전역 문서 객체에 getItems () 함수가 있습니다. 브라우저가 마이크로 데이터를 지원하지 않으면 getItems () 함수가 정의되지 않습니다.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr는 아직 마이크로 데이터 API 검사를 지원하지 않으므로 위에 나열된 것과 같은 함수를 사용해야합니다.

HTML5 마이크로 데이터 표준에는 HTML 마크 업 (주로 검색 엔진 용)과 DOM 기능 집합 (주로 브라우저 용)이 모두 포함됩니다.

웹 페이지에 마이크로 데이터 마크 업을 포함 할 수 있으며 마이크로 데이터 속성을 이해하지 못하는 검색 엔진은이를 무시합니다. 그러나 DOM을 통해 마이크로 데이터에 액세스하거나 조작해야하는 경우 브라우저가 마이크로 데이터 DOM API를 지원하는지 확인해야합니다.

마이크로 데이터 어휘 정의

마이크로 데이터 어휘를 정의하려면 작동중인 웹 페이지를 가리키는 네임 스페이스 URL이 필요합니다. 예를 들어 https://data-vocabulary.org/Person은 다음과 같은 이름의 속성을 가진 개인 마이크로 데이터 어휘의 네임 스페이스로 사용될 수 있습니다.

name − 간단한 문자열로 된 사람 이름
Photo − 사람 사진에 대한 URL.
URL − 그 사람의 웹 사이트.

약 속성을 사용하면 사람 마이크로 데이터는 다음과 같습니다.

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

다음 결과가 생성됩니다-

Google은 Rich Snippets 프로그램의 일부로 마이크로 데이터를 지원합니다. Google의 웹 크롤러가 페이지를 파싱하고 http://datavocabulary.org/Person 어휘를 준수하는 마이크로 데이터 속성을 찾으면 해당 속성을 파싱하여 나머지 페이지 데이터와 함께 저장합니다.

http://www.tutorialspoint.com/html5/microdata.htm을 사용하여 Rich Snippets Testing Tool을 사용 하여 위의 예를 테스트 할 수 있습니다 .

Microdata에 대한 추가 개발은 언제든지 HTML5 Microdata를 참조 할 수 있습니다 .