Schema Markup และ Structured Data คืออะไร

structured-data

Schema Markup และ Structured Data คืออะไร? เริ่มเป็นคำถามที่สำคัญในโลก SEO ในรอบปีสองปีที่ผ่านมา โพสต์นี้จะกล่าวถึงปัจจัยใจที่มีผลต่อ SEO ที่มีการพัฒนาล่าสุดในโลกพัฒนาเว็บไซต์เพื่อให้ Search Engine ต่างๆมองเนื้อหาในเว็บไซต์ได้อย่างชัดเจนยิ่งขึ้น และให้ Search Engine สมารถแยกแยะได้ว่าข้อความในแต่ละส่วนที่ปรากฏในเว็บหมายถึงอะไร ซึ่งก็คือ Structured Data และมาตรฐาน Schema Markup ดังนั้มีเนื้อหาเกี่ยวข้องกับศัพท์เทคนิคมากกว่าปรกติแต่ผมจะพยายามเลี่ยงข้อมูลทางเทคนิคให้มากที่สุดจะอธิบายให้เข้าใจง่ายๆ

 

Structured Data คืออะไร

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

อาจจะงงๆ ขอยกตัวอย่างเช่น ในหน้าเว็บไซต์หน้าหนึ่งมีคำว่า Amazon เป็นตัวอักษรขนาดใหญ่ ถ้าดูใน HTML จะมีหน้าตาแบบนี้

<H1>Amazon</H1>

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

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

ดังนั้น Structured Data หรือ ข้อมูลที่มีรูปแบบเป็นโครงสร้างที่มีการระบุว่าแต่ละคำหรือแต่ละประโยคที่แทรกอยู่ใน HTML เพื่อให้อธิบายว่าแต่ละส่วนของเนื้อหาหมายถึงอะไร เมื่อ Google เข้ามาอ่านก็จะเข้าใจในทันทีว่าคำคำนี้คืออะไรและควรนำไปจัดเก็บและแสดงเป็นผลการค้นหาอย่างไร ทำให้การจัดเก็บข้อมูลของ Google ง่ายกว่าเดิม และมีประสิทธิภาพมากกว่า และนอกจากนั้นเจ้าของเว็บไซต์ก็ได้ประโยชน์ที่สามารถสื่อให้ Google รู้ว่าคำๆแต่ละคำควรจะหมายถึงอะไร การแสดงผลการค้นก็จะมีประสิทธิภาพและใกล้เคียงกับสิ่งที่ผู้ท่องเว็บต้องมากที่สุด ส่วนอธิบายเพิ่มในหน้าผลการค้นหาดังกล่าวกล่าวเรียกว่า Rich Snippets ดังที่แสดงในภาพด้านล่าง

 

ภาพ: Google Support

 

ตัวอย่างด้านบน เป็นผลการค้นหาโรงแรง Lupo’s Heartbreak Hotel ซึ่งได้แสดงส่วนอธิบายเพิ่มว่ามี event อะไรที่กำลังจะมาถึงบ้าง ส่วนอธิบายเพิ่มนี้เรียกว่า Rich Snippets ซึ่งเป็นผลมาจากเว็บไซต์ที่มีการจัดการ Structured Data เป็นอย่างดี เมื่อค้นหาข้อมูลเกี่ยวกับโรงแรม Google พบว่าโรงแรมนี้มีการแสดงที่กำลังจะมาถึง ก็จะแสดงกำหนดการการแสดงดังกล่าวได้

 

MicroData คืออะไร

เมื่อ Structured Data คือสิ่งที่เราเรียกข้อมูลที่มีรูปแบบเป็นโครงสร้างที่แทรกใน HTML และเมื่อเราชี้เฉพาะจุดหนึ่งของข้อมูลดังกล่าว เราเรียกข้อมูลตรงจุดนั้นว่าว่า Microdata

Microdata เป็นส่วนย่อยหนึ่งๆของ Structured Data ซึ่งแทรกอยู่ใน เพื่ออธิบายว่าเนื้อหาตรงส่วนนั้นหมายถึงอะไร ลองมาดูตัวอย่างกันดีกว่าครับ

โค๊ดด้านล่างเป็นโค๊ด HTML ทั่วไป ซึ่งไม่ได้บอกความหมายใดๆเลย หากเป็นคนอื่นก็พอจะบอกได้ว่าเป็นเนื้อหาเกี่ยวกับหนังสือเกี่ยวกับ SEO แต่ Search Engine จะไม่สามารถบอกได้เลยเนื้อหาเกี่ยวข้องกับหนังสือ

<div>
<h1>What is SEO?</h1>
<span>Author: Mr. Donkey</span>
<span>Number of Pages: 400</span>
</div>

เมื่อนำ Microdata มาเป็นส่วนขยายให้กับ HTML เพื่ออธิบายว่าเนื้อหาแต่ละส่วนคืออะไร จะได้โค๊ด Microdata ดังตัวอย่างด้านล่าง

<div itemscope itemtype="http://schema.org/Book">
<H1 itemprop="name">What is SEO?</H1>
<span itemprop="author">Mr. Donkey</span> 
<span itemprop="numberOfPages">400</span>
</div>

จากตัวอย่างนี้เราจะเห็นว่าภายใน tag div นี้ระบุว่าข้อมูลส่วนนี้คือข้อมูลของหนังสือ (Book) ซึ่งดูได้จาก

<div itemscope itemtype="http://schema.org/Book">

ส่วนต่อมา คำว่า What is SEO? เป็นข้อมูลของ ชื่อ (Name) ดูได้จาก

<H1 itemprop="name">What is SEO?</H1>

ส่วน Mr. Dunkey เป็นข้อมูลของ ผู้แต่ง (Author) ดูได้จาก

<span itemprop="author">Mr. Donkey</span>

และตัวเลข 400 คือจำนวนหน้า (Number of Pages) ดูได้จาก

<span itemprop="numberOfPages">400</span>

องค์ประกอบของโครงสร้างข้อมูลที่แสดงตัวอย่างข้างต้นนี้เรียกว่า Microdata หรือข้อมูลส่วนย่อย และเรียกข้อมูลส่วนย่อยทั้งหมดรวมกันว่า Structured Data

ในสถานการณ์ทั่วไปเราสามารถใช้คำว่า Structured Data และ Microdata แทนระหว่างกันได้เลย

 

Schema คืออะไร

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

Schema คือพจนานุกรม ของ Structured Data ทั้งหมดที่บรรจุข้อมูลประเภทของ Structured Data มาตรฐานที่ว่าประกอบไปด้วยอะไรบ้าง Schema เป็นผลลัพธ์ของการร่วมมือกันจัดทำขึ้นมาระหว่าง Google, Yahoo, Bing และ Yandex ในปี 2011 และมีการปรับปรุงเรื่อยมา โดยที่เนื้อหาของ Schema ทั้งหมดถูกบรรจุลงในเว็บไซต์ www.schema.org  หรือ Schema.org การนำประเภทของข้อมูลที่ว่ามาใช้สามารถทำมาใช้ได้ผ่าน tag พิเศษ ที่เรียกว่า Schema Markup โดยแทรกเข้าไปใน HTML ตามที่ระบุใน schema.org

schema-google-yahoo-bing

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

ตัวอย่างของประเภทของข้อมูล Microdata ที่ระบุใน Schema.org ได้แก่

  • Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
  • Embedded non-text objects: AudioObject, ImageObject, VideoObject
  • Event
  • Organization
  • Person
  • Place, LocalBusiness, Restaurant
  • Product, Offer, AggregateOffer
  • Review, AggregateRating

จะเห็นได้ว่าธรุกิจประเภท Local Business หรือกิจการต่างๆ ที่มีเว็บไซต์จะได้ประโยชน์จากการทำ Schema มาใช้เป็นอย่างมาก แต่นอกจากธุจกิจแล้วเว็บไซต์ประเภทอื่นๆที่มีข้อมูลที่รองรับ Schema ก็จะได้รับประโยชน์ด้วยเช่นกัน เราสามารถเข้าไปดูประเภทของข้อมูลใน Schema ทั้งหมด

 

ความแตกต่างระหว่าง Structured Data, MicroData และ Schema

ทั้ง 3 คำนี้มักจะใช้ร่วมกันเสมอ เมื่อมีสิ่งหนึ่งก็ต้องมีอีกสองสิ่งอยู่ด้วยกันแยกกันไม่ได้ แต่เราสามารถอธิบายความแตกต่างได้ดังนี้

Structured Data คือระบบข้อมูลที่ระบุประเภทออกมาได้ โดยใช้ tag พิเศษที่เรียกว่า Schema Markup แทรกเข้าไปใน HTML เดิมเพื่อให้ Search Engine รู้ว่าแต่ละคำที่ปรากฏในเนื้อหาคืออะไร

Microdata คือ ส่วนย่อยหนึ่งๆ ของ Structured Data ที่ใช้อธิบายว่าแต่ละคำหรือแต่ละประโยคเป็นข้อมูลประเภทไหน

Schema คือ พจนานุกรมของ Structured Data ที่ระบุว่าประเภทของข้อมูลมีอะไรบ้าง โดยนำมาใช้ผ่าน tag ที่เรียกว่า Schema Markup

Schema-for-SEO

ในหลายๆสถานการณ์เราสามารถใช้คำว่า Structured Data และ Microdata แทนกันได้เนื่องจากหมายถึงสิ่งเดียวกัน

 

แล้ว Structured Data มีประโยชน์อะไรบ้าง

ประโยชน์หลักๆของการสร้าง Structured Data ตามมาตรฐานของ Schema คือให้ Google รู้ว่าเนื้อหาในเว็บของเราคืออะไร เพื่อให้ Google จัดเก็บได้อย่างมีประสิทธิภาพ และเมื่อถึงเวลาแสดงผลการค้นหา Google ก็จะแสดงผลการค้นหาให้ผู้ใช้งานชัดเจนยิ่งขึ้นว่าเนื้อหาในหน้าเว็บเพจนั้นมีลักษณะอย่างไรบ้าง

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

ตัวอย่างของ ผลการค้าหาที่มาจาก Structured Data แสดงให้ดูแบบง่ายๆที่เราเห็นคุ้นเคยๆด้านล่าง

schema-rich-snippets

 

แล้ว Google ไปเอาข้อมูลดังกล่าวมาจากไหน คำตอบก็คือเอามาจาก Structured Data ที่ทางเว็บมาสเตอร์จัดเตรียมไว้ใน HTML ของหน้าเพจนั้นนั่นเอง หากกลับไปดู HTML จะพบว่ามาจากโค๊ดดังที่แสดงที่แสดงด้านล่าง

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 
<span itemprop="ratingValue"> 4 </span><span>stars</span>
<span itemprop="reviewCount">36</span><span>reviews</span> 
</div>

ตอนนี้ยังไม่ต้องสนใจว่า Code ที่เห็นคืออะไร อธิบายคร่าวๆได้ ใน HTML มีการแทรก schema เข้าไป เพื่อประกาศค่าประเภทของข้อมูลในส่วนที่อยู่ภายใน <div> ว่าเป็นข้อมูลประเภท เรตติง (AggregateRating) และองค์ประกอบของข้อมูลอื่นยังมี ค่าเรตติ้งเป็น 4 (ratingValue) และจำนวนรีวิว 36 รีวิว (reviewCount)

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

แต่ที่แน่นอนคือมีประโยชน์ให้ Google เข้าใจว่าเนื้อหาคืออะไร จัดเก็บได้ง่ายขึ้น เว็บไซต์ที่มีตำแหน่งสูงอยู่แล้วจะได้ประโยชน์จากที่ Google แสดงผลการค้นหาที่ชัดเจนขึ้น แต่ที่สำคัญมีแนวโน้มจะทำ Click Through Rate (ความหมายคือให้ผู้ค้นหากดเข้าไปดูเว็บไซต์มากขึ้น) สูงขึ้นอย่างแน่นอน สามารถติดตาม แหล่งอ้างอิงเป็นคำยืนยันของ Matt Cutts ซึ่งเป็นข้อมูลปี 2012 แต่ยังคงมีผลถึงปัจจุบัน จนกว่าจะมีการเปลี่ยนแปลงจาก Google

 

นำ Schema มาใช้อย่างไร

ตอนนี้ก็มาถึงวิธีการนำ schema มาใช้งานบนเว็บเพจของเรา วิธีการนั้นก็ไม่ยากจนเกินไป สิ่งแรกที่ควรเข้าใจก่อนใช้ schema คือเข้าใจ HTML เบื้องต้น หลังจากนั้นก็แค่เข้าใจองค์ประกอบของ schema ที่จะแทรกเข้าไปใน HTML องค์ประกอบที่ว่านี้เรียวกว่า Attribute ซึ่งมีลักษณะคล้ายกับ Attribute ทั่วไปของ HTML ที่เราใช้งาน เพียงแต่ Attribute ของ schema ที่เราต้องใช้ เราต้องไปเอามาจาก www.schema.org เท่านั้นเอง

การเข้าใจ 4 Attribute หลักๆของ schema กล่าวคือ  itemscope, itemtype, itemprop และ ULR ระบุประภทข้อมูลในเว็บ schema.org ก็เพียงพอแล้วสำหรับการเริ่มต้น สามารถอ่าน คู่มือสำหรับการเริ่มต้น ได้ในเว็บไซต์ schema.org

มาดูตัวอย่างกันเลยครับ

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Jack Dorsey</span>
<img src="http://www.seodummy.com/wp-content/uploads/2015/09/jack-dorsey.jpg" itemprop="image" />
<span itemprop="jobTitle">CEO</span>
<span itemprop="worksFor">Twitter</span>
</div>

เมื่อเปิดหน้า HTML ทางบราวเซอร์แล้วจะได้หน้าดังที่เห็นด้านล่าง ซึ่งไม่ได้มีอะไรต่างจากผลลัพธ์ของ HTML ทั่วไปเลย

jack-dorsey

อธิบายได้ดังนี้

  • เริ่มต้นด้วยการประกาศ scope ว่า schema จะคลอบคลุมส่วนไหนบ้าง  HTML โดยประกาศ itemscope  ในกรณีนี้คลอบคลุม <div></div>
  • itemtype ที่ระบุใน <div> ใช้บอกว่าภายใน <div> เป็นประเภทข้อมูลของ คน ที่เอามาจาก http://schema.org/Person
  • itemprop ที่ระบุใน <span> ใช้ระบุว่าคำว่า Jack Dorsey เป็นข้อมูลประเภท name (ชื่อ)
  • itemprop ที่ระบุใน <span> ใช้ระบุว่าลิงค์ src=”http://www.seodummy.com/wp-content/uploads/2015/09/jack-dorsey.jpg เป็นข้อมูลประเภทรูปภาพ (image)
  • itemprop ที่ระบุใน <span> ใช้ระบุว่าคำว่า CEO ว่าเป็น ตำแหน่ง (jobTitle)
  • itemprop ที่ระบุใน <span> ใช้ระบุว่าคำว่า Twitter ว่าเป็น บริษัทที่ทำงาน (workFor)

 

วิธีตรวจว่า Schema ที่ทำไว้ถูกต้องหรือไม่

เข้าไปลิงค์ Structured Data Testing Tool  (หรือ https://developers.google.com/structured-data/testing-tool/) ของ Google ผลออกมาจะต้องเป็น All good และจะพบว่า Google สามารถจำแนกแต่ละส่วนในเนื้อหาออกมาว่าเป็นข้อมูลอะไรบ้าง

jack-dorsey-test page-check-schema

 

เท่านี้ก็ถือว่าทำ Structured Data เบื้องต้นได้แล้ว นี่เป็นแค่เพียงข้อมูลเบื้องต้นของ Schema เท่านั้น การใช้งานจริงก็ไม่ยากอย่างที่เข้าใจหลักการง่ายๆคือนำ ประเภทของข้อมูลที่อยู่ใน schema.org มาประกาศแทรกใน HTML ของเว็บเพจของเรา และตรวจสอบความถูกต้องผ่าน Structured Data Testing Tool ของ Google ก็จะได้ Structured Data ตามที่ต้องการ

2 Comments

  1. ช้อปสบาย December 26, 2017
  2. PONSAK COMPITHAKDET January 26, 2018

Leave a Reply

Your email address will not be published. Required fields are marked *