วิธีเพิ่ม JSON-LD Structured Data ใน Next.js (App Router)
JSON-LD เป็นวิธีที่ Google แนะนำสำหรับใส่ structured data บทความนี้แสดงวิธีทำใน Next.js App Router แบบ server-rendered
ทำไมต้องเป็น Server Component
เมื่อใส่ JSON-LD ใน server component สคริปต์จะถูกส่งมากับ HTML ตั้งแต่ครั้งแรก ทำให้ crawler ของ Google และ AI bot ที่ไม่รัน JavaScript อ่านข้อมูลได้ครบทันที ต่างจาก client component ที่ต้องรอ JS ทำงานก่อน
ขั้นตอนโดยสรุป
ขั้นตอนหลักมีสี่ขั้น เริ่มจากสร้างคอมโพเนนต์ inject script ตามด้วยรวมฟังก์ชันสร้าง schema ไว้ที่เดียว นำไปใส่ในแต่ละหน้า แล้วทดสอบด้วยเครื่องมือ validator ดูรายละเอียดแต่ละขั้นใน HowTo ด้านบนซึ่งถูกแปลงเป็น schema ให้ AI อ่านด้วย
schema ที่ใช้บ่อย
หน้าเนื้อหาทั่วไปควรมี Organization และ WebSite ระดับเว็บ ส่วนหน้าบทความควรเพิ่ม Article หรือ BlogPosting พร้อม BreadcrumbList และถ้ามีคำถาม-คำตอบให้เพิ่ม FAQPage เพื่อเพิ่มโอกาสถูกหยิบไปตอบ
คำถามที่พบบ่อย
ควรใส่ JSON-LD ใน server หรือ client component
ควรใส่ใน server component เพื่อให้ script ถูก render มากับ HTML ตั้งแต่แรก crawler และ AI ที่ไม่รัน JavaScript จะอ่านได้ครบ
ต้องลง library เสริมไหม
ไม่จำเป็น สามารถ stringify object เป็น JSON แล้วใส่ใน script tag ได้เลย จะใช้ helper เล็ก ๆ ของตัวเองเพื่อความเป็นระเบียบก็ได้