เข้าใจกันมากขึ้นด้วย Microdata

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

Microdata ก็เป็นเพียงแค่ attributes !

การใช้ Microdata มาช่วยนั้น ทำได้ไม่ยากเลยครับ เราไม่จำเป็นต้องแก้โครงสร้างของ html5 ที่เราเขียนไป เพราะ Microdata เป็นเพียงกลุ่มของ attribute ที่เราจะนำไปใส่ใน html tag ดังนี้ครับ

• itemscopeประกาศว่า Element นี้ เป็น “item” ของ Microdata โดยจะมี Information ต่างๆ (Property) ตาม Element ที่อยู่ข้างใน Element นี้
• itemtype=”url”กำหนด URL ที่ใช้บอก vocabulary ซึ่งก็คือความหมายของ Property ต่างๆ ของ item นั้นๆ
• itemprop=”property-name”กำหนดให้ Element นั้น เป็น Property ของ Microdata
• สำหรับ Element ทั่วๆ ไป ค่าของ Property จะเป็น Content ของ Element นั้นๆ
• สำหรับ Element ที่มี URL attribute ค่าของ Property จะเป็นค่าของ URL attribute (<img>, <a>, <object> เป็นต้น)
• สำหรับ <time> element ค่าของ Property จะเป็นค่าของ datetime attribute
• หากเราต้องการเพิ่ม Property ให้กับ Metadata แต่ใน html ของเราไม่มี Element ที่ใช้แสดง Information นั้นๆ เราสามารถใช้ <meta itemprop="property-name"content="Value"> ซึ่งค่าของ Property จะเป็นค่าของ content attribute ครับ
• itemref=”element-id”ใช้สำหรับเพิ่ม Property ที่มี Element อยู่นอก item ของ Microdata โดยการระบุ id ของ Element ที่เป็น Property ที่ต้องการจะเพิ่มเข้าไป

เริ่มลงมือเปลี่ยนเนื้อหาให้มี Microdata

เอาละครับ หลังจากที่เรารู้จัก Microdata กันแล้ว ว่าเป็น attributes ที่จะช่วยให้ Search Engine ทั้งหลายเข้าใจว่าเนื้อหาของเราคืออะไร เราลองมาดูตัวอย่างการใช้ Microdata กันเลยครับ

<section> Hello, my name is John Doe, I am a graduate research assistant at the University of Dreams. My friends call me Johnny. 
You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.
I live at 1234 Peach Drive Warner Robins, Georgia.</section>

ด้านบนเป็นเนื้อหาเกี่ยวกับการแนะนำตัวครับ ซึ่ง Search Engine อาจจะไม่เข้าใจทั้งหมด เราลองมาเปลี่ยนเนื้อหานี้ ให้มี Microdata ครับ

<section itemscope itemtype="http://data-vocabulary.org/Person"> 
        Hello, my name is 
        <span itemprop="name">John Doe</span>, 
        I am a 
        <span itemprop="title">graduate research assistant</span> 
        at the 
        <span itemprop="affiliation">University of Dreams</span>. 
        My friends call me 
        <span itemprop="nickname">Johnny</span>. 
        You can visit my homepage at 
        <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. 
        <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                I live at 
                <span itemprop="street-address">1234 Peach Drive</span> 
                <span itemprop="locality">Warner Robins</span>
                , 
                <span itemprop="region">Georgia</span>.
        </section>
</section>

เนื้อหาด้านบนนี้ มีการนำ Microdata เข้ามาช่วย ซึ่ง Search Engine อย่าง Google จะอ่านโค้ดด้านบน แล้วประมวลผลออกมาได้ตามนี้ครับ

Item
   Type: http://data-vocabulary.org/Person
   name = John Doe
   title = graduate research assistant
   affiliation = University of Dreams
   nickname = Johnny
   url = http://www.johnnyd.com/
   address = Item(1)
Item 1
   Type: http://data-vocabulary.org/Address
   street-address = 1234 Peach Drive
   locality = Warner Robins
   region = Georgia

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