เข้าใจกันมากขึ้นด้วย 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>

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

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

I live at

<span itemprop="street-address">1234 Peach Drive</span>

<span itemprop="locality">Warner Robins</span>

<span itemprop="region">Georgia</span>.

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

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 ค้นหาผลลัพธ์ได้ตรงกับความต้องการของผู้ใช้งานมากขึ้น และอันดับของเว็บเราก็จะดีขึ้นไปด้วยครับ