ทำความเข้าใจกับ Microdata

Microdata ถูกแนะนำให้ใช้ร่วมกับ HTML5 ด้วยการแทรกเข้าไปยัง HTML โดยตรง โดยที่ Microdata ถูกใช้เพื่ออธิบายเกี่ยวกับองค์ประกอบของหน้าเว็บ ซึ่งจะถูกใช้งานโดย Search Engine ว่าเนื้อหานั้นๆเกี่ยวข้องกับอะไร เช่น หน้าเว็บสำหรับขายหนังสือ Microdata จะถูกใช้เพื่อบอกว่าส่วนนี้คือข้อมูลของสินค้า เช่น ชื่อหนังสือ ผู้แต่ง กับ Search Engine ได้ด้วย

global attributes ของ Microdata

itemscope ใช้เพื่อบอกว่า element ต่างๆที่อยู่ถัดจาก element นี้ คือองค์ประกอบของข้อมูลนี้
itemtype ใช้สำหรับระบุประเภทของข้อมูลว่า ข้อมูลใน element นี้เกี่ยวข้องกับอะไร เช่น name หรือ url เป็นต้น
itemprop ใช้สำหรับระบุรายละเอียดอื่นๆหรือคุณสมบัติต่างๆ (property) ของ Microdata นี้

ตัวอย่างโค้ดที่ไม่มีองค์ประกอบของ Microdata

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset=utf-8>

<title>ตัวอย่างโค้ดที่ไม่มีองค์ประกอบของ Microdata</title>

</head>

<body>

<section>

<h1>คู่มือ HTML5 + CSS3</h1>

<span>Author: Goragod Wiriya</span>

<span>Category : Web design</span>

<span>รายละเอียดเกี่ยวกับหนังสือ</span>

</section>

</body>

</html>

ตัวอย่างโค้ดที่มีองค์ประกอบของ Microdata

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset=utf-8>

<title>ตัวอย่างโค้ดที่มีองค์ประกอบของ Microdata</title>

</head>

<body>

<section itemscope itemtype="http://schema.org/Book">

<h1 itemprop="name">คู่มือ HTML5 + CSS3</h1>

<span>Author: <span itemprop="author">Goragod Wiriya</span></span>

<span>Category : <span itemprop="genre">Web design</span></span>

<span itemprop="detail">รายละเอียดเกี่ยวกับหนังสือ<span>

</section>

</body>

</html>

จะเห็นได้ว่า เว็บที่มีองค์ประกอบของ Microdata สามารถช่วยให้ Search Engine สามารถระบุได้ลงไปเลยว่า ข้อความใดคือ ชื่อหนังสือ ใครเป็นคนแต่ง และ คำอธิบายอย่างย่อๆสำหรับหนังสือ