HTML Microdata สำหรับ E-Commerce
Microdata ช่วยให้สินค้าของคุณมีอันดับในการค้นหาที่ดีขึ้นบน Search Engine เนื่องจากเว็บที่มีข้อมูลเพียงพอสำหรับการค้นหาที่เฉพาะเจาะจงยิ่งขึ้น จะช่วย Search Engine ในการตัดสินใจแสดงผลการค้นหาได้ง่ายขึ้น ยกตัวอย่างเช่น หากมีการค้นหา เครื่องรับโทรทัศน์ Sony ราคา 10000 บาท สำหรับการค้นหาบนเว็บทั่วๆไปจะเป็นการค้นหาที่มาจากเนื่อหาทั้งหมดบนเว็บ ซึ่งอาจทำให้ผลการค้นหาไม่ตรงกับที่ต้องการนัก เช่น อาจค้นหาได้หน้าที่มีข้อความ Sony รุ่น 10000 มาแทนได้ แต่ถ้าเราระบุ Microdata ลงไป การค้นหาราคา สามารถหาได้จากฟิลด์ข้อมูลที่ระบุไว้ว่าเป็นราคาสินค้าได้เลย ซึ่งจะทำให้ได้ผลลัพท์การค้นหาที่แม่นยำกว่า
องค์ประกอบสำหรับหน้าแสดงสินค้า
องค์ประกอบที่ดีของหน้าเว็บจะช่วยให้สินค้าของเราดูโดดเด่นน่าสนใจขึ้น ซึ่งองค์ประกอบสำคัญที่ควรมีสำหรับหน้าแสดงสินค้าได้แก่
- tag <h1> ควรอยู่ที่ด้านบนของหน้า ใช้สำหรับระบุชื่อของผลิตภัณฑ์
- รูปภาพของสินค้าควรจะอยู่ถัดจากชื่อสินค้า
- ราคาและรายละเอียดอื่นๆของสินค้า ควรวางไว้ด้านข้างของรูปสินค้า
- คุณสมบัติของสินค้า (Featured) และความคิดเห็นต่อสินค้า (Reviews) ควรวางไว้ด้านล่างของหน้า
การประกาศ 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/...%2Fex%2Fproduct.html