การปรับแต่ง On-Page SEO ขั้นสูง: Schema Markup และ Structured Data

การปรับแต่ง On-Page SEO ขั้นสูง: Schema Markup และ Structured Data

สวัสดีครับนักพัฒนาเว็บทุกท่าน! จากบทความที่แล้วที่เราได้เรียนรู้เรื่องโครงสร้างเว็บไซต์ที่เป็นมิตรต่อ SEO กันไปแล้ว ในบทความนี้เราจะมาเจาะลึกกันในเรื่องของการปรับแต่ง On-Page SEO ขั้นสูง นั่นก็คือการใช้ Schema Markup (สคีมา มาร์กอัป) และ Structured Data (โครงสร้างข้อมูล) เพื่อช่วยให้ Google เข้าใจเนื้อหาในเว็บไซต์ของเราได้ดียิ่งขึ้นครับ

Schema Markup คืออะไรและมีประโยชน์อย่างไร?

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

Schema Markup (สคีมา มาร์กอัป) คือชุดของโค้ดที่เราใส่ลงไปใน HTML ของเว็บไซต์ เพื่อให้ Search Engine อย่าง Google เข้าใจเนื้อหาในหน้านั้นๆ ได้อย่างถูกต้องและแม่นยำยิ่งขึ้น โดยใช้ vocabulary (คำศัพท์) ที่กำหนดไว้ใน schema.org ซึ่งเป็นความร่วมมือระหว่าง Search Engine รายใหญ่ๆ เช่น Google, Bing, Yahoo! และ Yandex

ประโยชน์ของ Schema Markup:

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

ประเภทของ Schema Markup ที่ควรรู้

Schema.org มี Schema Markup ให้เลือกใช้มากมาย ครอบคลุมเนื้อหาหลากหลายประเภท แต่สำหรับนักพัฒนาเว็บที่เริ่มต้น เราจะมาดูกันที่ Schema Markup ที่นิยมใช้กันบ่อยๆ และมีประโยชน์ต่อ SEO นะครับ

• Article: ใช้สำหรับบทความข่าว บทความบล็อก หรือบทความอื่นๆ ที่มีเนื้อหาเป็นข้อความ
• Product: ใช้สำหรับหน้าสินค้าที่ขายบนเว็บไซต์
• Recipe: ใช้สำหรับสูตรอาหาร
• Event: ใช้สำหรับข้อมูลกิจกรรมต่างๆ เช่น คอนเสิร์ต งานสัมมนา หรือการประชุม
• LocalBusiness: ใช้สำหรับข้อมูลธุรกิจในท้องถิ่น เช่น ร้านอาหาร โรงแรม หรือร้านค้า
• Organization: ใช้สำหรับข้อมูลองค์กรหรือบริษัท
• Person: ใช้สำหรับข้อมูลบุคคล เช่น นักเขียน นักแสดง หรือผู้เชี่ยวชาญ
• Review: ใช้สำหรับรีวิวสินค้า บริการ หรือสถานที่
• FAQPage: ใช้สำหรับหน้าคำถามที่พบบ่อย (Frequently Asked Questions)
• HowTo: ใช้สำหรับคำแนะนำทีละขั้นตอน (How-to guide)

นอกจากนี้ยังมี Schema Markup อื่นๆ อีกมากมายให้เลือกใช้ตามความเหมาะสมกับเนื้อหาของเว็บไซต์ของคุณ สามารถศึกษาเพิ่มเติมได้ที่ schema.org ครับ

วิธีการ Implement Schema Markup บนเว็บไซต์

การ Implement Schema Markup บนเว็บไซต์สามารถทำได้หลายวิธี แต่ที่นิยมใช้กันมี 3 วิธีหลักๆ คือ

1. JSON-LD (JavaScript Object Notation for Linked Data): เป็นรูปแบบที่ Google แนะนำให้ใช้ เพราะง่ายต่อการ Implement และจัดการ
2. Microdata: เป็นรูปแบบที่ใช้ Attribute ใน HTML Tag
3. RDFa (Resource Description Framework in Attributes): เป็นรูปแบบที่คล้ายกับ Microdata แต่มีความซับซ้อนกว่า

ในบทความนี้เราจะเน้นที่ JSON-LD เพราะเป็นวิธีที่ง่ายที่สุดและ Google แนะนำครับ

ตัวอย่างการ Implement Schema Markup แบบ JSON-LD:

สมมติว่าเรามีบทความเกี่ยวกับ "วิธีทำอาหารไทยง่ายๆ":

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.example.com/วิธีทำอาหารไทยง่ายๆ"
  },
  "headline": "วิธีทำอาหารไทยง่ายๆ สำหรับมือใหม่",
  "description": "เรียนรู้วิธีทำอาหารไทยยอดนิยมง่ายๆ ได้ที่บ้าน",
  "image": {
    "@type": "ImageObject",
    "url": "https://www.example.com/images/thaifood.jpg",
    "width": 1200,
    "height": 630
  },
  "author": {
    "@type": "Person",
    "name": "สมชาย ใจดี"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Thai Food Tips",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.example.com/images/logo.png",
      "width": 600,
      "height": 60
    }
  },
  "datePublished": "2023-10-27",
  "dateModified": "2023-10-28"
}
</script>

คำอธิบาย:

• @context: กำหนด Context เป็น Schema.org
• @type: กำหนดประเภทของเนื้อหา (ในที่นี้คือ Article)
• mainEntityOfPage: กำหนด URL ของหน้าที่เนื้อหานี้อยู่
• headline: กำหนดหัวข้อของบทความ
• description: กำหนดคำอธิบายของบทความ
• image: กำหนด URL ของรูปภาพที่เกี่ยวข้อง
• author: กำหนดผู้เขียนบทความ
• publisher: กำหนดผู้เผยแพร่บทความ
• datePublished: กำหนดวันที่เผยแพร่บทความ
• dateModified: กำหนดวันที่แก้ไขบทความล่าสุด

ขั้นตอนการ Implement:

1. เลือก Schema Markup ที่เหมาะสมกับเนื้อหาของหน้าเว็บ
2. สร้าง JSON-LD Script โดยใส่ข้อมูลที่เกี่ยวข้อง
3. วาง JSON-LD Script ไว้ใน <head> หรือ <body> ของหน้าเว็บ

กรณีใช้งานจริง:

สมมติว่าคุณมีเว็บไซต์ขายสินค้า และต้องการใช้ Schema Markup เพื่อให้ Google แสดงข้อมูลสินค้าของคุณในรูปแบบ Rich Snippets คุณสามารถใช้ Schema Markup ประเภท Product ได้ดังนี้:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "เสื้อยืดคอกลมสีขาว",
  "image": [
    "https://www.example.com/images/tshirt-white-1.jpg",
    "https://www.example.com/images/tshirt-white-2.jpg",
    "https://www.example.com/images/tshirt-white-3.jpg"
   ],
  "description": "เสื้อยืดคอกลมผ้าฝ้าย 100% ใส่สบาย ระบายอากาศได้ดี",
  "sku": "SKU-001",
  "brand": {
    "@type": "Brand",
    "name": "Brand A"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/products/tshirt-white",
    "priceCurrency": "THB",
    "price": "299",
    "availability": "https://schema.org/InStock"
  }
}
</script>

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

ข้อผิดพลาดที่พบบ่อย:

• ใส่ข้อมูลไม่ถูกต้อง: ตรวจสอบให้แน่ใจว่าข้อมูลที่คุณใส่ใน Schema Markup ถูกต้องและตรงกับเนื้อหาของหน้าเว็บ
• ใช้ Schema Markup ไม่เหมาะสม: เลือกใช้ Schema Markup ที่เหมาะสมกับประเภทของเนื้อหา
• ไม่ตรวจสอบ Schema Markup: ตรวจสอบ Schema Markup ของคุณด้วยเครื่องมือตรวจสอบของ Google เพื่อหาข้อผิดพลาด

การตรวจสอบ Schema Markup

หลังจากที่คุณ Implement Schema Markup บนเว็บไซต์แล้ว สิ่งสำคัญคือการตรวจสอบว่า Schema Markup ของคุณทำงานได้อย่างถูกต้องหรือไม่ Google มีเครื่องมือให้คุณตรวจสอบ Schema Markup ได้ฟรี นั่นคือ Rich Results Test (เครื่องมือทดสอบผลการค้นหาที่เป็น Rich Results)

วิธีใช้งาน Rich Results Test:

1. เข้าไปที่ Rich Results Test
2. ป้อน URL ของหน้าเว็บที่คุณต้องการตรวจสอบ
3. คลิก "ทดสอบ URL"
4. เครื่องมือจะตรวจสอบ Schema Markup ของคุณและแสดงผลลัพธ์

ถ้ามีข้อผิดพลาด เครื่องมือจะแสดงรายละเอียดของข้อผิดพลาดเพื่อให้คุณแก้ไขได้

นอกจาก Rich Results Test แล้ว คุณยังสามารถใช้ Google Search Console เพื่อตรวจสอบประสิทธิภาพของ Schema Markup และดูว่า Google พบปัญหาอะไรบ้าง

Structured Data (โครงสร้างข้อมูล) เป็นคำที่ใช้เรียก Schema Markup โดยรวม ดังนั้นเมื่อคุณได้ยินคำว่า Structured Data ก็ให้เข้าใจว่าหมายถึง Schema Markup นั่นเองครับ

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