ทำความเข้าใจกับ 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 สามารถระบุได้ลงไปเลยว่า ข้อความใดคือ ชื่อหนังสือ ใครเป็นคนแต่ง และ คำอธิบายอย่างย่อๆสำหรับหนังสือ
ผู้เขียน goragod โพสต์เมื่อ 28 ก.พ. 2556 เปิดดู 7,000 ป้ายกำกับ HTML5Microdata
^