ทำเว็บต้องรองรับ SCHEMA HTML เพื่อผลลัพท์ที่ดีกว่า

ทำเว็บต้องรองรับ SCHEMA HTML เพื่อผลลัพท์ที่ดีกว่า

การสร้างเอกสาร โดยปกติเราก็ควรที่จะสร้างตามมาตรฐานอะไรสักอย่างหนึ่ง เช่น หน้าเว็บ เราก็สร้างมาตรฐาน HTML ขึ้นมา เพื่อให้ Web browser สามารถแสดงผลได้อย่างถูกต้องตรงกันทุก Browser ต่อมา ก็มีการพัฒนาขึ้นมาเรื่อยๆ จนนอกจาก Web Browser แล้ว เราก็ยังมี Robot ที่มาคอยอ่านหน้าเว็บเอาไปทำงานต่อ เช่น Google มาอ่านหน้าเว็บเราไปเก็บเอาไว้ แล้วเวลามีคนค้นหาก็เอาหน้าเว็บเราไปแสดง หรือว่า ยังมี Screen Reader ต่างๆ บางคนอาจจะไม่เคยเห็น โดยปกติก็จะเป็นโปรแกรมติดตั้งในเครื่อง แล้วมันจะอ่านสิ่งต่างๆที่อยู่หน้าจอออกมาเป็นเสียงทั้งหมด ไม่ได้จำกัดแต่หน้าเว็บ แต่มันหมายถึง Windows ทั้งหมดที่เราเห็นเลย

ผมเคยไปทำบุญที่บ้านเด็กตาบอดและพิการซ้ำซ้อนที่จังหวัดลพบุรี และก็ได้เดินเยี่ยมความเป็นอยู่ของน้องๆ โดยเจ้าหน้าที่ให้น้องๆที่พอมีความสามารถนำพาเราเดินเยี่ยมชมส่วนต่างๆของ ที่นั่น แล้วพอไปถึงห้อง Computer ผมก็ต้องทึ่งทันที เพราะว่าเห็นน้องๆที่กำลังใช้งาน Facebook , MSN อยู่ (ยุคนั้นยังมี MSN อยู่) โดยที่กำลัง chat กับเพื่อนอีกต่างหาก แต่ที่ผมต้องอึ้งก็คือ น้องเค้ามองจอไม่เห็นครับ ใช่ครับ น้องเค้าสูญเสียศักยภาพการมองเห็น ผมถามน้องเค้า เค้าบอกว่า มองแทบไม่เห็นเลย เค้าก็ยังสามารถใช้ Computer ได้อย่างรวดเร็วคล่องแคล่วมากๆ คือเร็วกว่าคนปกติด้วย ยังจำติดตาได้มาจนถึงตอนนี้ เพราะว่าเวลาที่เค้าใช้งาน computer เค้าจะฟังเสียงจากสิ่งต่างๆที่มันอ่านออกมาทางลำโพง โดย software screen reader นี่แหล่ะ แล้วเค้าจะจำได้ว่าต้องกด tab กี่ที จึงจะ Post ข้อความได้ กด tab กี่ทีปิดโปรแกรม หรือ เปิดโปรแกรมต้องกดอะไรอย่างไรบ้าง แน่นอน ว่าเร็วกว่าการจับเม้าส์ไปกดแน่นอน เพราะเราต้องเล็งอีก แต่กด key ลัดไม่กี่ทีก็จบแล้ว

ความเป็นมาของ schema

ทีนี้ด้วยความที่ HTML5 เปิดกว้างกว่าเดิมมากในการเขียน syntax จากเดิมจะ xhtml จะ strict อยู่ syntax จำนวนไม่มาก แต่ HTML5 เพิ่มเข้ามาอีกเยอะ และหลาย syntax ก็ยังเอามาใช้กันแบบผิดๆถูกๆ เพราะว่าไม่มีใครที่ Definition มันได้อย่างชัดเจน ส่วนหนึ่งเป็นเพราะว่าต้องการเปิดกว้างและการรองรับการใช้งานที่หลากหลาย ทำให้ HTML5 ไม่สามารถ Definition การใช้ syntax หลายตัวได้อย่างละเอียดมากนัก การให้เกิดปัญหาเป็นอย่างมากในการแยกแยะส่วนต่างๆของเว็บ รวมไปถึงคนที่ใช้งาน Screen Reader ก็ได้รับผลกระทบโดยตรงด้วย ลองนึกภาพ หากคุณต้องหลับตาใช้ Computer สิ่งแรกก็คือ ลืมเรื่อง mouse ไปได้เลย สิ่งที่สอง คุณต้องเอาหูฟัง Screen reader ที่มันอ่านออกมา ว่าตอนนี้คุณกำลัง Focus อยู่กับอะไรในหน้าจอ แล้วก็ต้องกด tab ไปเรื่อยๆ คงลำบากไม่น้อย ถ้ากดไปโดนอะไรก็ไม่รู้ ที่ไม่มีคำอธิบาย และต้องมานั่งฟังเนื้อหามันก่อนทุกครั้ง ว่าส่วนนี้คืออะไร ก่อนที่จะตัดสินใจว่า ใช่หรือไม่ใช่สิ่งที่ต้องการ หรืออีกตัวอย่าง ให้เห็นภาพก็คือ เว็บแรก เค้าอาจจะใช้ div > p ในการขึ้นย่อหน้าใหม่ แต่บางเว็บ อาจจะใช้ div อย่างเดียว ในการใส่ข้อความแต่ละชุด แค่นี้ก็ยากต่อการแยกแยะแล้ว หนำซ้ำบางเว็บ ยังมี footer ยาวยังกับบทความทำให้เกิดความสับสนขึ้นไปอีก ว่า footer ที่กำลังฟังอยู่นี้คือบทความหรือ ส่วนของหน้าเว็บ หรือว่ามันคือ footer

กำเนิด micro format

จากปัญหาข้างต้น ทำให้เกิดโครงการ micro format ขึ้นมา เพื่อพยายามจะสร้างมาตรฐานขึ้น โดยให้เราเขียน attribute บางค่าใส่เข้าไป เพื่อจะบอกว่า ข้อความที่กำลังจะปรากฏนี้มีความหมายว่าอะไร ตัวอย่าง ถ้าเราจะเขียนข้อความเพื่อบอกรายละเอียดของ Event เราก็อาจจะเขียนแค่ว่า

July 15th, 2015 ชื่องาน at กทม
มาเที่ยวกัน

ซึ่งมันก็ดูเป็น Text ธรรมดาๆ แต่หากเราต้องการทำให้ Screen Reader และ robot เข้าใจ เราก็ต้องเขียนโค้ดแบบนี้ ตามหลักการของ microformat

<div class="vevent" id="hcalendar-ชื่องาน">
    <time datetime="2015-07-15" class="dtstart">July 15th</time>, 
    <time datetime="2015-07-16" class="dtend"> 2015</time> 
    <span class="summary">ชื่องาน</span> at 
    <span class="location">กทม</span>
</div>

ก็ดูดีขึ้น เข้าใจได้มากขึ้น แต่ว่าติดปัญหาอย่างเดียว ก็คือ microformat ไม่ได้รับความนิยมเท่าที่ควร อาจจะเป็นด้วยว่า มาตรฐานยังไม่ชัดเจนมากในการใช้งาน เช่น ผมก็ตั้งคำถามว่า ทำไม end มันถึงไปอยู่ทีเลขของปี? แล้วทำไมหน้าเว็บถึงไม่ปรากฏ end time อะไรเหล่านี้เป็นต้น ดังนั้น micro format จึงยังไม่ได้รับความนิยมเท่าที่ควร จะพลาดไปก็ตรงที่ซ่อน value บางอย่าง และหน้าเว็บ ก็เห็นไม่เหมือนกับที่ robot เห็นนี่แหล่ะ (ซึ่งเป็นสิ่งที่ผิดนะครับ code ต้องให้ความหมายได้เหมือนกับหน้าเว็บครับ)

Google Bing Yahoo จับมือกัน ตั้ง Schema.org

เรื่อง Schema ก็ไม่ใช่เรื่องเล็กๆอีกต่อไป เมื่อ 3 บริษัทยักษ์ใหญ่จับมือกัน ก่อตั้งเว็บ Schema.org เพื่อสร้างให้เป็นมาตรฐานจริงจังเป็นเรื่องราวซะเลย เพราะว่า microformat เองก็ยังทำได้ไม่ดี และใช้งานได้ยาก (ซึ่งจริงๆช่วงที่ผ่านมาก็มีมาตรฐานอื่นที่นอกเหนือจาก microformat อีก เช่น RDFa, Microdata และ JSON-LD) และยังไม่มีเจ้าภาพ หรือมีเจ้าภาพก็ดันไม่มีคนใช้ซะอีก การจับมือกันระหว่างยักษ์ใหญ่ที่ดูแล robot spider ของโลกคราวนี้ จึงทำให้แต่ละบริษัท มั่นใจได้ว่า จะไม่มีใครไปสร้างมาตรฐานอะไรใหม่อีก (อย่างน้อยก็ต้องเป็นบริษัทที่ใหญ่กว่า 3 บริษัทนี้รวมกัน เพื่อจะทำให้ 3 บริษัทนี้เชื่อและหันไปใช้ได้อ่ะนะ)

schema จึงถูกตั้งขึ้นมาเพื่อกำหนดการแสดงผลของข้อมูลในส่วนต่างๆ เช่น บทความ, สูตรอาหาร, ตารางเวลา, กิจกรรม, บุคคล, สถานที่, เพลง, หนังสือ, ภาพยนตร์, TV Series, รูปภาพ, ไฟล์เสียง, ไฟล์ VDO, บริษัท, สินค้า, review, บริษัทท้องถิ่น และอื่นๆอีกหลายอย่าง โดยจะทำหน้าที่ในการประกาศ attribute ที่ใช้งาน ว่าแต่ละแบบต้องประกอบด้วย attribute อะไรบ้าง เพื่อให้หยิบไปใช้งานได้อย่างถูกต้อง และตรงกันตามมาตรฐาน

หรือพูดให้เข้าใจง่ายๆ มันคือ การกำหนด standard ให้การเขียนโค้ด แล้วมีความหมายในระดับโค้ดเลย ว่า Text หรือ Object ที่แสดงออกหน้าเว็บตรงนี้ หมายถึง สถานที่ที่ไหน หมายถึงวันเวลาอะไร เหล่านี้เป็นต้นครับ

ตัวอย่างการใช้ schema ในการอธิบายสถานที่

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

ร้านกินเที่ยวเดี๋ยวก็พัก
บริการอาหารไทย อีสาน บริการดีไม่มีตก
เปิดบริการ : ทุกวัน 11 โมงเช้า ถึงเที่ยงคืน
เบอร์โทร : 0889997777
ดู เมนูอาหาร

แต่ว่าเวลาเขียนโค้ดเราจะเขียนอธิบายดังนี้

<div vocab="http://schema.org/" typeof="Restaurant">
  <p property="name">ร้านกินเที่ยวเดี๋ยวก็พัก</p>
  <p property="description">บริการอาหารไทย อีสาน บริการดีไม่มีตก</p>
  <p>เปิดบริการ : <time property="openingHours" datetime="Mo,Tu,We,Th,Fr,Sa,Su 11:00-24:00">ทุกวัน 11 โมงเช้า ถึงเที่ยงคืน</time></p>
  <p>เบอร์โทร : <span property="telephone" content="+66889997777">0889997777</span></p>
  <p>ดู <a property="menu" href="http://example.com/menu">เมนูอาหาร</a></p>
</div>

แบบนี้ก็คือการแสดง ผลหน้าเว็บ และแบบ schema จะเห็นได้ว่า หน้าบ้านแสดงผลเหมือนเดิมตามปกติเลย แต่ว่าเนื้อโค้ด เราเขียนอธิบายมากกว่าที่หน้าบ้านเห็น ซึ่งพวกนี้ คือ สิ่งที่ screen reader จะมองเห็น (หากว่ารองรับ schema.org เรียบร้อยแล้ว) แล้วในที่สุด Google หรือ Robot ก็จะเข้าใจว่าข้อมูลส่วนนี้มันคืออะไร และจะให้คะแนนผลการค้นหาแบบเจาะจงข้อมูลพวกนี้ที่ดีขึ้นด้วย

ผมจำได้ว่าเมื่อก่อน สักสามปีที่แล้วโรงภาพยนตร์แห่งหนึ่งในบ้านเราก็ใช้กระบวนการตามหลัก schema เหมือนกัน (แต่ตอนนั้นเข้าใจว่าใช้ Microformat) ทำให้เวลาที่เราค้นข้อมูลจาก Google จะมีการแสดงรอบฉายและเวลาขึ้นมาทันที โดยที่ไม่ต้องคลิกเข้าหน้าเว็บเลย แต่ตอนนี้ไม่มีแล้ว และไปตรวจสอบหน้าเว็บเค้าก็ไม่ได้ใช้ Schema แล้วจริงๆ ไม่รู้ว่าเป็นความตั้งใจหรือไม่ตั้งใจกันแน่นะ

เริ่มใช้ schema ได้อย่างไร

ไม่ยากครับ ก็แค่พิจารณาว่า เรากำลังใช้งาน object อะไรโดยอ้างอิงจาก รายละเอียด Schema ทั้งหมด เพื่อหาว่าสิ่งที่เรากำลังจะแสดงผลหน้าเว็บ เป็น Object แบบใดก็คลิกเข้าไปดูรายละเอียด เราก็จะเห็น property ต่างๆมากมาย พร้อมคำอธิบาย ตัวอย่าง ผมเข้ามาดู Place > Restaurant จะเห็นว่ามี property name ก็ใช้เพื่อการบอกว่า Item นั้นคืออะไร ในที่นี้ก็คือ ร้านอาหารนั้นชื่อว่าอะไรนั่นเอง ง่ายๆครับ ใน Schema หน้าเดียวกันของแต่ละประเภทสามารถหยิบมาใช้ได้ทั้งหมด แต่ไม่ได้บังคับว่าต้องใช้ทั้งหมดก็ได้ เอาเท่าที่เหมาะสมและพอเหมาะสำหรับ User ครับ จากตัวอย่างย่อหน้าบนจะเห็นว่า ใช้ 5 Property เท่านั้น ก็คือ name, description, openingHours, telephone, menu เท่านั้น แต่ถ้าจะเพิ่ม Property ของ Place อีกก็ได้ เช่นเพิ่ม address, geo เพื่อบอกสถานที่ของร้าน และ geo location ของร้านครับ ง่ายๆแค่นี้เอง

ย้ำ อีกที ให้เน้นสิ่งที่ลูกค้าจำเป็นต้องเห็นก่อน แล้วค่อย map property เข้าไป ไม่ต้องเอามาทุก property ที่มี มันเยอะไป แล้วหลายอันก็ไม่ได้ใช้จริงหรือไม่มีคนใช้ แต่ก็อย่าน้อยไป จนไม่เข้าใจอะไรเลย พยายามให้นึงถึงคนใช้งานเอาไว้ก่อนเสมอ แต่ถ้าอ่าน schema ดูก็จะเป็นการช่วย Guide เราได้ดีระดับหนึ่งเลย

ประโยชน์ที่ได้รับจากการใช้งาน Schema HTML

ที่แน่ๆเลย ก็คือเว็บเราจะกลายเป็น Web semantic มากขึ้น ก็คือ ตัวโค้ด สามารถอธิบายได้ถึงองค์ประกอบต่างๆของหน้าเว็บ ว่าแต่ละส่วนนั้นคืออะไร มีประโยชน์หรือไม่มีประโยชน์อย่างไร ตรงนี้ คนที่ได้รับผลประโยชน์ตรง คือคนที่ใช้ screen reader ในการอ่านหน้าเว็บของเราหลักๆก็จะเป็นคนพิการทางสายตาครับ ซึ่งมีจำนวนไม่น้อยนะครับ แล้วเค้าเหล่านั้นก็มีไม่น้อยที่ใช้งานคอมเหมือนเราๆท่านๆนี่แหล่ะ (เคยคุยกับคนพิการทางสายตา เค้ามีเพื่อนที่พิการทางสายตาเป็น programmer ด้วยนะครับ)

คนที่ได้รับประโยชน์ต่อมาก็คือ เจ้าของเว็บนั่นเอง ตัวอย่างการอธิบายเอาไว้ถึงสถานที่ร้านอาหารอย่างชัดเจน จะทำให้ Google หรือ robot เข้าใจได้ทันทีว่า ร้านนี้ตั้งอยู่ที่ไหนอย่างไร ทำให้สามารถแสดงผลได้ตำแหน่งดีขึ้นในหน้าผลการค้นหาของ Google แต่ก็ไม่ได้หมายความว่าทำตามนี้เป๊ะๆแล้วจะขึ้นที่ 1 นะครับ มันเป็นองค์ประกอบหนึ่งเท่านั้น จาก 200 กว่าองค์ประกอบที่ Google ไม่เคยเปิดเผยครับ

วิธีตรวจสอบ schema ว่าเราเขียนถูกต้องหรือเปล่า

หลังจากที่เราได้เขียนเรียบร้อยแล้ว ขั้นต่อมา เราก็เอาเว็บเข้าไปตรวจสอบ เพื่อช่วยเช็คว่า ที่เราเขียนขึ้นมานั้น ตรงตามหลักการของ Schema หรือเปล่า มีอะไรที่ไม่เกี่ยวข้องเกินมาหรือเปล่า ซึ่งนั่นจะทำให้เราได้รับประโยชน์จาก Schema ได้ไม่เต็มที่ โดยระบบตรวจสอบ ทาง Google ก็ได้พัฒนามาให้เราใช้แล้ว ใช้งานได้ที่ เครื่องมือตรวจสอบ Schema จาก Google เราก็วางโค้ดส่วนที่เราต้องการได้เลย แล้วกดปุ่ม ตรวจสอบ Google ก็จะรายงานมาเลยว่ามีปัญหาตรงไหนหรือไม่ จากตัวอย่างที่ผมเขียนข้างต้น ก็สามารถเอาไป validate ได้ก็จะผ่านครับ

อีกเครื่องมือตรวจสอบ ก็คือ เครื่องมือตัวสอบ Schema จาก yandex.com แต่ว่าเครื่องมือตัวนี้จะตรวจสอบได้น้อยกว่า คือตรวจสอบได้เบื้องต้นว่า refer ไป schema ที่ไหนอย่างไรบ้าง และมี value ว่าอย่างไรบ้างเท่านั้น

เครื่องมือช่วยสร้าง Schema

แน่นอนว่า เมื่อมีเครื่องช่วยตรวจ ก็ต้องมี เครื่องมือช่วยเราสร้าง schema โดยเครื่องมือนี้เป็นของ Google อีกแล้วครับ โดยเมื่อเราเปิดเข้าไป ก็จะถามว่า เราจะสร้าง markup ประเภทใด ในตัวอย่างนี้ผมเลือกสร้างแบบ บทความ ซึ่งน่าจะเป็นประเภทหนึ่งที่ถูกใช้บ่อยมากๆ พร้อมทั้ง ใส่ URL ของหน้าเว็บที่เราต้องการสร้าง schema เข้าไป (ดังนั้น หน้าเว็บที่เราจะทำต้องเป็นหน้าเว็บที่ public ก่อนแล้วนะครับ)

ป้อนข้อมูลเพื่อเริ่มสร้าง โครงสร้าง schema จากหน้าเว็บ

จากนั้น google จะเอาหน้าเว็บใน url ที่เราป้อนมาแสดงผล พร้อมกับด้านขวามือ Google ก็จะบอกเอาไว้ว่า เราควรมี Property อะไรบ้าง และอะไรที่ Require บ้าง วิธีใช้ก็คือ ให้เอาเม้าส์ไปปาดส่วนที่เราต้องการสร้าง schema แล้วจะมีเมนูเด้งขึ้นมาว่า ส่วนที่เราปาดนั้นคืออะไร ผมก็ปาดหัวข้อเลย ไม่รอช้า แล้วระบุว่าเป็นชื่อ แล้วก็ทำกับส่วนอื่นๆไปเรื่อยๆ จนเราจะพบว่า บางอย่างเราไม่มีใส่ในหน้าเว็บ ซึ่งอย่างที่บอกเอาไว้ก่อนหน้า ว่าทุกอย่างไม่จำเป็นต้องใส่ก็ได้ อย่างกรณีที่ผมยกตัวอย่าง ก็ขาดหลายอย่างเลย Url, ผู้เขียน แต่ผมกำลัง งง กับ ส่วนของบทความ กับ เนื้อหาบทความ เพราะว่าพอปาดเยอะๆแล้วไม่สามารถทำงานได้ และไม่เข้าใจว่ามันคืออะไร พอเปิด รายละเอียด schema ของ article ถึงได้เข้าใจ ว่ามันคือ articleBody , articleSection นั่นเอง โดยอ่านแบบภาษาอังกฤษจะเข้าใจมากกว่า และมีการยกตัวอย่างอย่างชัดเจนครับ

ปาดเนื้อหาที่ต้องการ เพื่อสร้าง schema property ต่างๆ

สำหรับ articleBody แนะนำว่า ให้ใส่เอาไว้ที่ syntax ที่ครอบเนื้อหาทั้งหมดอยู่แค่จุดเดียวพอครับ เพื่อไม่ให้ตัวอ่านสับสน และการเรียงลำดับของ property ก็ไม่มีผลนะครับ อะไรมาก่อนหลังก็ได้ทั้งหมด ไม่แตกต่างกันครับ เราสามารถสลับตำแหน่งการจัดวางเพื่อความสวยงามได้ จากนั้น เมื่อเราได้เลือกตำแหน่งที่ต้องการเรียบร้อยแล้ว เราก็ทำการกด create HTML ที่มุมขวาบน ก็จะได้ source code แสดงออกมา โดย Google จะ highlight สีส้มเอาไว้ ว่าโค้ดตรงไหนบ้างที่เราต้องเพิ่มเข้าไปในบทความของเรา อย่างของผมก็ประมาณนี้ครับ

ผลลัพท์ที่ได้จากการสร้าง schema จะเห็นถึงความเปลี่ยนไปใน source code ของตัวอย่างของเรา

อ้อ หลายคนอาจจะเจอปัญหาว่าส่วนของ articleBody อาจจะไม่ได้อยู่ภายใต้ itemtype ที่เราใส่เอาไว้ วิธีก็คือ ให้ใช้ itemref เข้าช่วยครับ มีโค้ดดังตัวอย่างด้านล่างนี้ อ้างอิงตัวอย่างจาก stack overflow

<html>
  <body>
    <div itemref="content company" id="articleHeader" itemscope itemtype="http://schema.org/NewsArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="author">John Doe</span>
    </div>
    <div id="content" itemprop="articleBody">
        <p>
          Lorem Ipsum blah blah blah
        </p>
    </div>
    <div id="company" itemprop="copyrightHolder">
        My Awesome Company
    </div>
  </body>
</html>

โดยตัวที่อ้างอิงถึงกัน ก็คือ itemref และชื่อ id ของ element ครับ

จบ แล้วครับ สำหรับ Schema หลังจากนี้ ก็คือการประยุกต์ใช้ของแต่ละเว็บ แต่ละคนแล้วครับ เพราะว่าแต่ละคนก็มีเว็บที่แตกต่างเรื่องราว และรูปแบบกันไป ขอเพียงเข้าใจพื้นฐานของ schema ก็จะสามารถประยุกต์ต่อยอดได้ครับ

Create: Modify : 2015-08-06 18:51:56 Read : 9813 URL :