Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML5 마이크로데이터 어휘(Vocabulary)란? 개념부터 실전 예제까지

마이크로데이터 어휘(Microdata Vocabulary)란?

HTML5의 마이크로데이터에서 어휘(vocabulary)를 정의하려면, 실제로 접근 가능한 웹 페이지를 가리키는 네임스페이스 URL이 필요합니다. 이 URL은 단순히 고유한 식별자 역할을 하며, 해당 어휘가 어떤 종류의 데이터를 다루는지 구분해 줍니다.

예를 들어 https://data-vocabulary.org/Person은 '사람(Person)'에 관한 마이크로데이터 어휘의 네임스페이스로 사용할 수 있으며, 다음과 같은 이름 붙은 속성(named properties)들을 포함합니다.

  • name — 사람의 이름을 나타내는 단순 문자열
  • photo — 해당 사람의 사진 이미지를 가리키는 URL
  • url — 그 사람이 소유한 웹사이트 주소

Person 어휘를 활용한 마이크로데이터 작성 예제

위에서 정의한 속성들을 사용하면, 특정 인물에 대한 정보를 담은 마이크로데이터를 아래와 같이 작성할 수 있습니다.

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

코드 설명

  • itemscope — 해당 요소가 하나의 마이크로데이터 항목(item)임을 선언합니다.
  • itemtype — 항목이 어떤 어휘(스키마)에 속하는지 네임스페이스 URL로 지정합니다.
  • itemprop — 각 자식 요소가 어휘에 정의된 어떤 속성(name, photo, url)에 해당하는지 명시합니다.

참고: 최신 표준은 Schema.org를 권장

예제에 사용된 data-vocabulary.org는 과거 구글 등 검색 엔진이 지원하던 어휘이지만, 현재는 공식적으로 지원이 중단(deprecated)되었습니다. 따라서 새로운 프로젝트에서는 https://schema.org/Person처럼 Schema.org에서 제공하는 어휘를 사용하는 것이 좋습니다. 작성 방식은 동일하며, itemtype 값만 교체하면 됩니다.