Microdata trong HTML5

Microdata trong HTML5

Microdata là một cách được tiêu chuẩn hóa để cung cấp các semantic bổ sung trong trang web của bạn.

Microdata cho bạn định nghĩa các phần tử tùy chỉnh của riêng bạn và bắt đầu nhúng các thuộc tính tùy chỉnh trong các trang web. Ở một mức độ cao, microdata bao gồm một nhóm các cặp tên-giá trị.

Các nhóm này được gọi là các item – mục, và mỗi cặp tên-giá trị là một thuộc tính (property). Các item và các thuộc tính được biểu diễn bởi các phần tử chính quy.

Ví dụ Microdata trong HTML5

• Để tạo một item, thuộc tính itemscope được sử dụng.

• Để thêm một thuộc tính tới một item, thuộc tính itemprop được sử dụng trên một trong những item con.

Ở đây có hai item, mỗi item có thuộc tính "name":

<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>

Nói chung các thuộc tính có các giá trị mà là các chuỗi nhưng nó có thể có các kiểu dữ liệu sau:

Các thuộc tính Global

Microdata giới thiệu 5 thuộc tính Global sẽ có sẵn cho bất kỳ phần tử nào để sử dụng và cung cấp ngữ cảnh cho các thiết bị về dữ liệu của bạn:

Các kiểu dữ liệu của thuộc tính

Nói chung các thuộc tính có các giá trị mà là các chuỗi được đề cập trong ví dụ trên, nhưng chúng cũng có thể có các giá trị là các URL. Ví dụ sau có một thuộc tính, "image", giá trị của nó là một URL:

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

Các thuộc tính cũng có thể có các giá trị là ngày, thời gian hoặc ngày và thời gian. Điều này được thực hiện bởi sử dụng phần tử time và thuộc tính datetime của nó.

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

Các thuộc tính chính nó cũng có thể là nhóm các cặp tên-giá trị, bằng việc đặt thuộc tính itemscope trên phần tử mà khai báo thuộc tính đó.

Hỗ trợ Microdata API

Nếu một trình duyệt hỗ trợ HTML5 Microdata API, nó sẽ là hàm getItem() trên đối tượng tài liệu global. Nếu trình duyệt không hỗ trợ Microdata, hàm getItem() sẽ không được định nghĩa.

Output:

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

Modernizr vẫn không hỗ trợ việc kiểm tra cho Microdata API, vì thế bạn sẽ cần sử dụng hàm đó như đã liệt kê ở trên.

HTML5 Microdata chuẩn bao gồm cả HTML Markup (chủ yếu cho phương tiện tìm kiếm) và tập hợp các hàm DOM (chủ yếu cho trình duyệt).

Bạn có thể bao gồm Microdata Markup trong các trang web của bạn, và các phương tiện tìm kiếm mà không hiểu các thuộc tính microdata sẽ bỏ qua chúng. Nhưng nếu bạn cần truy cập hoặc thao tác microdata thông qua DOM, bạn sẽ cần kiểm tra có hay không trình duyệt hỗ trợ Microdata DOM API.

Định nghĩa Microdata Vocabulary

Để định nghĩa Microdata Vocabulary, bạn cần một URL không gian tên mà chỉ tới một trang web đang làm việc. Ví dụ: http://data-vocabulary.org/Person có thể được sử dụng như là không gian tên cho một Microdata Vocabulary cá nhân với các thuộc tính được đặt tên như sau:

• name - Tên người như là một chuỗi đơn.

• Photo - Một URL tới một hình ảnh của người đó.

• URL - Một Website thuộc về người đó.

Sử dụng các thuộc tính trên như sau:

<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Andy Runie</h1>
<p>
<img itemprop="photo" src="http://www.example.com/photo.jpg">
</p>
<a itemprop="url" href="http://www.example.com/blog">My Blog</a>
</section>

Google hỗ trợ Microdata như là một phần của chương trình Rich Snippets của họ. Khi Crawler phân tích trang web của bạn và tìm thấy thuộc tính microdata mà phù hợp với http://data-vocabulary.org/Person, nó phân tích những thuộc tính này và lưu chúng cùng với phần còn lại của dữ liệu trang.

Bạn có thể kiểm tra ví dụ trên sử dụng Rich Snippets Testing Tool.