Google Rich Snippet

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

Google Rich Snippet

นอกจากจะเป็นผลดีกับ search engine แล้วยังเป็นผลดีกับ user ด้วย เพราะช่วยให้ user เข้าใจรายละเอียดเบื้องต้นของหน้านั้นได้โดยที่ไม่ต้องคลิกเข้าดู ลองดูภาพประกอบต่อไปนี้

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 1

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

คราวนี้เราลองมาดูรูปด้านล่าง ที่ไม่มีดาว ดูแล้วก็รู้สึกธรรมดาไม่ได้โดดเด่นอะไร เทียบกันกับ รูปด้านบน รูปที่มีดาวดึงดูดให้อยากคลิกมากกว่าแน่นอน

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 2

วิธีตรวจดูว่าบทความที่เราเขียนมี structure data หรือไม่

คลิก  แล้วกรอก url เว็บที่เราต้องการลงไปแล้วกด RUN TEST  หรือใครที่ลงปลั๊กอิน yoast seo ไว้แล้วก็เลือกตามภาพได้เลย

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 3

รอสักครู่ระบบจะตรวจว่าบทความเรามีข้อมูลอะไรบ้างและนำมาแสดงผลบอกเราทางด้านขวามือตามภาพ

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 4

จากรูปคือบทความ  แจ้งเตือนเว็บล่มผ่าน Line บริการฟรี ที่คนทำเว็บห้ามพลาด  ซึ่งมีข้อมูลอยู่ 2 ก้อนคือ Article และ Breadcrumb

ลองคลิกเข้าไปดูจะเจอรายละเอียดของบทความต่าง ๆ เช่น ชื่อบทความ headline วันที่เขียน ฯ ตามรูป

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 5

จากรูปจะสังเกตุเห็นว่าปุ่ม PREVIEW ด้วย ลองกดดูจะเป็นแบบนี้

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 6

ถ้าของใครไม่มีแสดงว่าบทความยังไม่รองรับ AMP นะครับ วิธีทำอ่านได้ที่นี่  วิธีติดตั้ง AMP ใน WordPress

อธิบายมาพอสมควรต่อไปมาดูวิธีทำกันครับ

1.ใช้ Structured Data Markup Helper

Structured Data Markup Helper  เป็นเครื่องมือที่ทาง Google มีไว้ให้เราสามารถใช้งานได้ฟรี โดยเจ้าเครื่องมือนี้จะช่วยสร้าง schema ให้เรานำไปใช้ได้โดยที่เราไม่จำเป็นต้องมีความรู้ทางด้านนี้ก็ได้ สามารถเข้าไป Generate Schema ได้ที่ลิงก์นี้  คลิก

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 7

ขั้นตอนที่ 1

เข้ามาแล้วจะเจอตามภาพด้านบน สำหรับหน้านี้ให้เราเลือกประเภทของ schema ที่เราต้องการนะครับ จากตัวอย่างผมเลือกเป็น Articles หรือก็คือบทความนั่นเอง เสร็จแล้วให้เราใส่ url ของบทความที่เราจะทำ schema ลงไปที่ช่อง URL แล้วกด Start Tagging

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 8

ขั้นตอนที่ 2

สำหรับขั้นตอนนี้ ให้เราระบุข้อมูลที่ระบบต้องการสำหรับ Generate Schema ให้เราครับ จากภาพข้อมูลที่จำเป็นต้องมีคือ Name:

ให้เรา Drag ที่ชื่อบทความด้านซ้ายมือแล้วเลือก Name แค่นี้ ชื่อบทความก็จะถูกนำไปกรอกใส่ช่อง Name: ทางด้านขวามือให้อัตโนมัติ

ลองดูภาพประกอบภาพนี้

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 9

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 10

เสร็จแล้วกด CREATE HTML เราก็จะได้ Code ที่พร้อมใช้งานตามภาพด้านล่าง copy เอาไปใส่ในบทความเราได้เลย

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 11

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

WordPress มาทางนี้

ผมทดลองใช้หลาย ๆ ปลั๊กอิน จนได้ 2 ปลั๊กอินที่คิดว่าใช้งานง่ายเลยนำมาแนะนำให้ลองนำไปใช้กัน

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 12

1.Schema

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

ข้อเสียคือ ใส่เรทติ้ง (ดาว) เองไม่ได้

Google Rich Snippet สิ่งสำคัญที่คนทำเว็บต้องรู้ 13

2.WP SEO Structured Data Schema

จากที่ลองใช้ปลั๊กอินนี้ดูก็พบว่าใช้งานได้ค่อนข้างง่าย สามารถกำหนดประเภทของ schema ได้หลายประเภท ใส่เรทติ้ง (ดาว) เองก็ได้จะใส่กี่ดาวก็ตามใจเราเลย แต่ก็มีข้อเสียอยู่ข้อคือ ไม่ซัพพอร์ท Post Type ที่เป็นสินค้า ใครใช้ WooCommerce ก็อดนะครับ

สรุป

  1. Google Rich Snippet ดีทั้งต่อ search engine และ user
  2. ดึงดูดให้ user คลิก
  3. ทำได้โดยใช้ปลั๊กอินและเครื่องมือจาก google

หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้พบกันบทความต่อไปครับ

โปรแกรมเมอร์คนหนึ่งที่อยากแชร์ประสบการณ์การทำงาน ปัญหาที่พบเจอและวิธีแก้ปัญหา มาร่วมแชร์ความรู้กันนะ