HTML5 - Microdata

Microdata เป็นวิธีมาตรฐานในการให้ความหมายเพิ่มเติมในหน้าเว็บของคุณ

Microdata ช่วยให้คุณกำหนดองค์ประกอบที่คุณกำหนดเองและเริ่มฝังคุณสมบัติที่กำหนดเองในหน้าเว็บของคุณ ในระดับสูง microdata ประกอบด้วยกลุ่มคู่ชื่อ - ค่า

เรียกว่ากลุ่มต่างๆ itemsและชื่อ - ค่าแต่ละคู่คือ a property. รายการและคุณสมบัติแสดงโดยองค์ประกอบปกติ

ตัวอย่าง

ในการสร้างรายการไฟล์ itemscope ใช้แอตทริบิวต์
ในการเพิ่มคุณสมบัติให้กับไอเท็มไฟล์ itemprop แอตทริบิวต์ถูกใช้กับหนึ่งในผู้สืบทอดของรายการ

ที่นี่มีสองรายการซึ่งแต่ละรายการมีคุณสมบัติ "ชื่อ" -

<html>
   <body>
      
      <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>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติโดยทั่วไปมีค่าที่เป็นสตริง แต่สามารถมีชนิดข้อมูลต่อไปนี้ -

แอตทริบิวต์ส่วนกลาง

Microdata แนะนำแอตทริบิวต์ส่วนกลาง 5 รายการซึ่งจะพร้อมใช้งานสำหรับองค์ประกอบใด ๆ ที่จะใช้และให้บริบทสำหรับเครื่องเกี่ยวกับข้อมูลของคุณ

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	itemscope สิ่งนี้ใช้เพื่อสร้างไอเท็ม แอตทริบิวต์ itemscope เป็นแอตทริบิวต์บูลีนที่บอกว่ามี Microdata ในหน้านี้และนี่คือจุดเริ่มต้น
2	itemtype แอตทริบิวต์นี้เป็น URL ที่ถูกต้องซึ่งกำหนดรายการและจัดเตรียมบริบทสำหรับคุณสมบัติ
3	itemid แอตทริบิวต์นี้เป็นตัวระบุส่วนกลางสำหรับรายการ
4	itemprop แอตทริบิวต์นี้กำหนดคุณสมบัติของรายการ
5	itemref แอตทริบิวต์นี้ให้รายการขององค์ประกอบเพิ่มเติมเพื่อรวบรวมข้อมูลเพื่อค้นหาคู่ชื่อ - ค่าของรายการ

คุณสมบัติประเภทข้อมูล

คุณสมบัติโดยทั่วไปมีค่าที่เป็นสตริงตามที่กล่าวไว้ในตัวอย่างข้างต้น แต่ยังสามารถมีค่าที่เป็น URL ได้ ตัวอย่างต่อไปนี้มีคุณสมบัติหนึ่งรายการ "รูปภาพ" ซึ่งมีค่าเป็น URL -

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

คุณสมบัติยังสามารถมีค่าที่เป็นวันเวลาหรือวันที่และเวลา สิ่งนี้ทำได้โดยใช้ไฟล์time องค์ประกอบและของมัน datetime แอตทริบิวต์

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติยังสามารถเป็นกลุ่มของคู่ชื่อ - ค่าได้โดยการใส่แอตทริบิวต์ itemscope บนองค์ประกอบที่ประกาศคุณสมบัติ

รองรับ Microdata API

หากเบราว์เซอร์รองรับ HTML5 microdata API จะมีฟังก์ชัน getItems () บนวัตถุเอกสารส่วนกลาง หากเบราว์เซอร์ไม่รองรับ microdata ฟังก์ชัน getItems () จะไม่ถูกกำหนด

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

Modernizr ยังไม่รองรับการตรวจสอบ microdata API ดังนั้นคุณจะต้องใช้ฟังก์ชันเหมือนกับที่ระบุไว้ข้างต้น

มาตรฐานไมโครดาต้า HTML5 ประกอบด้วยทั้งมาร์กอัป HTML (โดยเฉพาะสำหรับเครื่องมือค้นหา) และชุดฟังก์ชัน DOM (สำหรับเบราว์เซอร์เป็นหลัก)

คุณสามารถรวมมาร์กอัป microdata ในหน้าเว็บของคุณและเครื่องมือค้นหาที่ไม่เข้าใจแอตทริบิวต์ microdata จะเพิกเฉยต่อสิ่งเหล่านี้ แต่ถ้าคุณต้องการเข้าถึงหรือจัดการไมโครดาต้าผ่าน DOM คุณจะต้องตรวจสอบว่าเบราว์เซอร์รองรับ microdata DOM API หรือไม่

การกำหนดคำศัพท์ Microdata

ในการกำหนดคำศัพท์ microdata คุณต้องมี URL เนมสเปซที่ชี้ไปยังหน้าเว็บที่ใช้งานได้ ตัวอย่างเช่น https://data-vocabulary.org/Person สามารถใช้เป็นเนมสเปซสำหรับคำศัพท์ microdata ส่วนตัวพร้อมคุณสมบัติที่มีชื่อต่อไปนี้ -

name - ชื่อบุคคลเป็นสตริงธรรมดา
Photo - URL ไปยังรูปภาพของบุคคล
URL - เว็บไซต์ที่เป็นของบุคคล

การใช้ข้อมูลเกี่ยวกับคุณสมบัติของบุคคลอาจเป็นดังนี้ -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Google สนับสนุน Microdata ซึ่งเป็นส่วนหนึ่งของโปรแกรม Rich Snippets เมื่อโปรแกรมรวบรวมข้อมูลเว็บของ Google แยกวิเคราะห์หน้าเว็บของคุณและพบคุณสมบัติของไมโครดาต้าที่สอดคล้องกับ http://datavocabulary.org/ คำศัพท์ส่วนบุคคลโปรแกรมจะแยกวิเคราะห์คุณสมบัติเหล่านั้นและจัดเก็บไว้ข้างข้อมูลส่วนที่เหลือของหน้า

คุณสามารถทดสอบตัวอย่างข้างต้นโดยใช้Rich Snippets Testing Tool โดยใช้ http://www.tutorialspoint.com/html5/microdata.htm

สำหรับการพัฒนาเพิ่มเติมเกี่ยวกับ Microdata คุณสามารถอ้างถึงHTML5 Microdataได้ตลอดเวลา