หน้า 1 จากทั้งหมด 1

Schema

โพสต์แล้ว: 11/06/2014 3:50 pm
โดย buay
Schema.org

ทั้ง Facebook และ Google ต่างก็ใช้ Social Graph ในการ implement Social Network ของตนเอง ในขณะที่ Facebook ใช้ Open Graph Protocol สำหรับการใส่ information เพิ่มเติมใน Web Page ทาง Google ก็เลือกใช้ markup ในรูปแบบของ schema.org เพื่อใช้ในการเพิ่ม information ลงใน Web Page

การใช้ markup ในรูปแบบของ schema.org มีข้อดีคือ Search Engine ไม่ว่าจะเป็น Bing, Yahoo!, Google ต่างก็เข้าใจ syntax และสามารถนำข้อมูลที่อยู่ในรูปแบบของ schema.org มาใช้ในการปรับปรุงผลลัพธ์ในการ Search ของตนเอง

HTML Tag จะบอกถึงวิธีการ Display แต่ไม่ได้ระบุว่าสิ่งที่กำลัง Display นั้นหมายถึงอะไร ยกตัวอย่างเช่น <h1>Avatar</h1> อาจจะหมายถึงภาพยนตร์เรื่อง Avatar หรืออาจจะหมายถึง Profile Picture ก็ได้ ซึ่งเป็นเรื่องยากที่ Search Engine จะสามารถเข้าใจได้ ซึ่งถ้า Search Engine สามารถเข้าใจว่าเราหมายถึงอะไร Search Engine ก็จะสามารถแสดงเนื้อหาที่เกี่ยวข้องได้ตรงกับที่เราต้องการมากขึ้น นั่นจึงเป็นที่มาของ schema.org ซึ่งมีหน้าที่ในการกำหนด คำศัพท์ ที่ผู้พัฒนา web สามารถนำไปใช้เพื่อให้ Search Engine สามารถเข้าใจความหมายของเนื้อหา โดยทั่วไปเรามักจะใช้ คำศัพท์ จาก schema.org คู่กับ รูปแบบของ microdata ในการเพิ่ม information ให้กับ HTML

โค้ด: เลือกทั้งหมด

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
จากตัวอย่างจะเห็นว่าเราใช้ itemscope และ itemtype ในการกำหนดขอบเขต และชนิดของข้อมูล ซึ่งมีความหมายว่า ข้อมูลใน div ที่เรากำหนด itemscope เอาไว้ จะหมายถึงข้อมูลที่เกี่ยวกับภาพยนตร์ ซึ่งในที่นี้คือภาพยนตร์เรื่อง Avatar นั่นเอง

นอกจากนั้นเรายังสามารถเพิ่ม information ให้กับข้อมูลได้อีกโดยใช้ itemprop ดังตัวอย่างต่อไปนี้

โค้ด: เลือกทั้งหมด

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>
จากตัวอย่างจะเห็นว่าเรามีการใช้ itemprop="name" เพื่อเป็นการระบุชื่อภาพยนตร์ และใช้ itemprop="director" เพื่อเป็นการระบุชื่อผู้กำกับ ซึ่งถึงตอนนี้ Search Engine จะสามารถเข้าใจได้ว่าข้อมูลนี้เกี่ยวกับภาพยนตร์เรื่อง Avatar ที่กำกับโดย James Cameron