HTML Microdata สำหรับ E-Commerce

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

องค์ประกอบสำหรับหน้าแสดงสินค้า

องค์ประกอบที่ดีของหน้าเว็บจะช่วยให้สินค้าของเราดูโดดเด่นน่าสนใจขึ้น ซึ่งองค์ประกอบสำคัญที่ควรมีสำหรับหน้าแสดงสินค้าได้แก่

tag <h1> ควรอยู่ที่ด้านบนของหน้า ใช้สำหรับระบุชื่อของผลิตภัณฑ์
รูปภาพของสินค้าควรจะอยู่ถัดจากชื่อสินค้า
ราคาและรายละเอียดอื่นๆของสินค้า ควรวางไว้ด้านข้างของรูปสินค้า
คุณสมบัติของสินค้า (Featured) และความคิดเห็นต่อสินค้า (Reviews) ควรวางไว้ด้านล่างของหน้า

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

การประกาศ Markup สำหรับการแสดงสินค้า

อย่างแรกเลยคือเว็บของคุณต้องเป็น HTML5 เนื่องจาก Microdata ถูกกำหนดให้ใช้ร่วมกับ HTML5 เท่านั้นนะครับ
ประกาศ itemscope และ itemtype เพื่อระบุว่าเป็นชนิด Product

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

........

</section>

องค์ประกอบอื่นๆที่ควรมีสำหรับหน้าแสดงสินค้า

ชื่อสินค้า (Product Names)
<header><h1 itemprop=name>Goragod Content Management System</h1></header>
รูปภาพของสินค้า (Product Images)
<img itemprop=image src="https://www.goragod.com/product.jpg" alt="Keywords">
ยี่ห้อของสินค้า (Brand Name)

<p itemprop=brand itemscope itemtype=http://schema.org/Organization>ยี่ห้อ : <span itemprop=name>GCMS</span></span></p>

คำอธิบายเกี่ยวกับสินค้า (Product Description)

<p>รายละเอียด : <span itemprop=description>GCMS เป็น ระบบบริหารจัดการเว็บไซต์ ด้วย Ajax....</span></p>

รุ่น (Model Number)
<p>เวอร์ชั่น : <span itemprop=model>6.0.3</span></p>
ราคา และ ส่วนลด (Prices and Discounts)

<p itemprop=offers itemscope itemtype=http://schema.org/Offer>

ราคา <span itemprop=price>1000</span> <span itemprop=priceCurrency content=THB>บาท</span>

</p>

สถานะสินค้า (Availability)
<link itemprop=availability href=http://schema.org/InStock>

ความคิดเห็นต่อสินค้า (Reviews)

ความคิดเห็นต่อสินค้าจะช่วยให้การตัดสินใจในการเลือกซื้อสินค้าง่ายขึ้น รวมถึงเราอาจใช้ข้อมูลนี้ในการปรับปรุงสินค้าของเราให้ตรงกับความต้องการของลูกค้าได้มากขึ้น

<article>

<header><h1>Reviews</h1></header>

<section itemprop=review itemscope itemtype=http://schema.org/Review>

<p>เมื่อ <meta itemprop=datePublished content=2013-03-01>1 มีนาคม 2556</p>

<p>โดย <span itemprop=author>Goragod Wiriya</span></p>

<p itemprop=description>สุดยอดเลยครับ</p>

</section>

<section>......</section>

<section>......</section>

</article>

ตัวอย่าง https://www.goragod.com/ex/product.html
ผลทดสอบการอ่านค่าจากตัวอย่างของ Google http://www.google.com/.......html