웹 시맨틱을위한 마이크로 데이터

더 많은 의미 정보로 페이지를 향상시키는 방법

Tom 배우기, 프로그레시브 웹 앱

마이크로 데이터-작은 규모와 큰 영향

웹 앱이 문서의 <head>에있는 좋은 오래된 메타 요소보다 훨씬 더 많은 정보를 제공 할 수 있다는 사실을 알고 계셨습니까? 오늘날 웹 애플리케이션은 그 어느 때보 다 상호 연결되어 있으므로 각 페이지의 목적을 명확하게 정의하는 것이 점점 더 관련성이 높아지고 있습니다.

실제 사례

이게 조금 이상하게 들리면 간단한 예를 간단히 살펴 보겠습니다. 블로그가 있고 당연히 검색 엔진이 모든 기사와 함께 게시하는 콘텐츠를 더 잘 이해하기를 원합니다. 명확하고 의미 상 올바른 HTML 구조는 기본 요구 사항이지만 시작에 불과합니다.

JSON-LD와 같은 표준 개발 덕분에 일관된 방식으로 구조화 된 데이터를 제공 할 수 있습니다. 여기서 키워드는 검색 엔진과 해당 봇이이 메타 데이터를 정확하게 이해하도록 프로그래밍되어 있으므로이 추가 메타 데이터가 사용자에 의해 정의되는 표준화 된 형식입니다.

예를 들어 블로그 기사의 경우 기사의 주요 속성을 설명하는 JSON-LD 요소 "article"을 사용할 수 있습니다.

JSON-LD의 대안

이 모든 것이 매우 좋게 들리지만 마이크로 데이터와 어떤 관련이 있습니까? 마이크로 데이터는 기본적으로 위에서 설명한 JSON-LD와 동일한 목적을 가지고 있습니다. 사용 된 페이지에 더 많은 메타 데이터를 제공합니다. 주요 차이점은 JSON-LD가 웹 앱의 <head> 요소에 정의되어야한다는 것입니다. 그러나 마이크로 데이터 요소는 <head>와 <body>간에 데이터를 분할 할 필요없이 페이지의 콘텐츠 내에서 직접 사용할 수 있습니다.

<!-- 
The following eample is taken from Mozilla's site,
linked in the addendum. 
-->

<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

사용 사례 또는 특징에 따라 JSON-LD보다 더 나은 유지 관리 솔루션이 될 수 있습니다. 마이크로 데이터의 좋은 점은 실제로 DOM의 별도 요소가 아니라 기존 HTML을 향상시킬 수있는 속성 집합이라는 것입니다.

예를 들어 장소, 사람 또는 제품과 같이 마이크로 데이터에 대해 선택할 수있는 다양한 변형이 있습니다. 검색 엔진의 봇에서 잘 알려져 있으므로 JSON-LD에 대한 실행 가능한 대안을 제공합니다.

행위

Feedback

추천 게시물