HTML Academy · บทเรียน

พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD

เพิ่มข้อมูลแบบมีโครงสร้างที่เครื่องอ่านได้ด้วย JSON-LD

พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ข้อมูลที่มีโครงสร้างคืออะไร

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

JSON-LD เป็นรูปแบบที่แนะนำ

รูปแบบที่ Google แนะนำคือ JSON-LD ซึ่งเป็นบล็อก <script type="application/ld+json"> เดียวในส่วนหัวหรือเนื้อหา ซึ่งมีออบเจ็กต์ schema.org อย่างน้อยหนึ่งรายการ รูปแบบนี้แยกออกจาก HTML ที่มองเห็นได้ ดังนั้นการเพิ่มหรือปรับปรุงจึงไม่ต้องเขียนแม่แบบใหม่

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2024-05-01"
}
</script>

@context และ @type

ออบเจ็กต์ JSON-LD ทุกตัวต้องมี @context (เกือบ תמידคือ "https://schema.org") และ @type (คลาสของ schema.org เช่น Article, Recipe, Product, FAQPage) @context บอกตัวแยกวิเคราะห์ว่าชื่อคุณสมบัติมาจากชุดคำศัพท์ใด

คุณสมบัติทั่วไปของ Article

สำหรับ Article ให้ระบุ headline, image (URL หรืออาร์เรย์), datePublished, dateModified, author (ออบเจ็กต์ Person หรือ Organization) และ publisher (Organization ที่มีโลโก้) ฟิลด์เหล่านี้เป็นข้อมูลขั้นต่ำที่ Google ต้องใช้เพื่อพิจารณาแสดงหน้าในแถบเลื่อนข่าวเด่น

สคีมาผลิตภัณฑ์

หน้าผลิตภัณฑ์ประกาศ @type Product พร้อม name, image, description, brand, sku และออบเจ็กต์ย่อย offers ที่มี price, priceCurrency และ availability เมื่อใช้ร่วมกับ aggregateRating แล้ว Google จะแสดงการจัดอันดับด้วยดาวและข้อมูลราคาโดยตรงในผลการค้นหาได้

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coddy Plus",
  "offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}

สคีมาเส้นทางการนำทาง

BreadcrumbList อธิบายลำดับชั้นการนำทาง แต่ละ itemListElement เป็น ListItem ที่มี position, name และ item (URL) เมื่อมีข้อมูลนี้ Google จะแทนที่บรรทัด URL ในตัวอย่างผลการค้นหาด้วยเส้นทางการนำทางที่มีป้ายกำกับ ซึ่งช่วยเพิ่มจำนวนการคลิก

FAQ และ HowTo

สคีมา FAQPage และ HowTo เคยปลดล็อกวิดเจ็ตผลการค้นหาแบบริชใน SERP ก่อนหน้านี้ Google ได้จำกัดผลการค้นหาแบบริชของ FAQ ไว้สำหรับหมวดหมู่เว็บไซต์เพียงไม่กี่ประเภท (gov, edu) แต่มาร์กอัปนี้ยังมีประโยชน์สำหรับผู้ช่วยสั่งงานด้วยเสียงและผู้บริโภครายอื่น ๆ ดังนั้นควรคงไว้ในหน้าคำถามที่พบบ่อยจริง

ให้ตรงกับหน้าที่มองเห็น

Google ลงโทษมาร์กอัปที่ไม่ตรงกับสิ่งที่ผู้ใช้เห็น อย่าประกาศคะแนน 5 ดาวที่ไม่ปรากฏบนหน้า และอย่าแสดงราคา $9.99 ที่ผู้ใช้ไม่เคยเห็น ข้อมูลมีโครงสร้างต้องอธิบายเนื้อหาที่แสดงผลอย่างถูกต้อง

การตรวจสอบด้วย Rich Results Test

Rich Results Test ของ Google (search.google.com/test/rich-results) จะวิเคราะห์ URL ใด ๆ หรือโค้ดที่วางลงไป แสดงรายการประเภทสคีมาที่ตรวจพบ และแจ้งเตือนเมื่อคุณสมบัติที่จำเป็นขาดหายไป ควรเรียกใช้ก่อนนำการเปลี่ยนแปลงใด ๆ ของข้อมูลมีโครงสร้างขึ้นใช้งาน

หลายสคีมาในหน้าเดียว

คุณสามารถประกาศบล็อก JSON-LD หลายบล็อกในหน้าเดียวกันได้ เช่น Article + BreadcrumbList + Organization หรือรวมทั้งหมดไว้ในอาร์เรย์ @graph เดียว ทั้งสองรูปแบบถูกต้อง คุณจึงเลือกใช้รูปแบบที่นำไปสร้างแม่แบบในกระบวนการสร้างระบบได้ง่ายกว่า

อัปเดตโดยไม่แสดงผลหน้าใหม่

JSON-LD อยู่ในแท็ก script ที่แยกจากเนื้อหาที่มองเห็น หากต้องการอัปเดต ให้สร้างบล็อก JSON ขึ้นใหม่ อย่าแทรกข้อมูลมีโครงสร้างผ่าน JavaScript ฝั่งไคลเอ็นต์เพียงอย่างเดียว เพราะ Googlebot ไม่ได้ทำงานกับ JS อย่างน่าเชื่อถือเสมอไปก่อนจัดทำดัชนี

ตรวจสอบความรู้

คุณสมบัติระดับบนสุดสองรายการใดที่ออบเจ็กต์ JSON-LD ทุกออบเจ็กต์ต้องมี จึงจะถือเป็นข้อมูลมีโครงสร้างที่ถูกต้อง

สรุป

JSON-LD ประกาศข้อมูลมีโครงสร้างไว้ในบล็อกสคริปต์ application/ld+json เดียว โดยใช้ @context และ @type ระบุออบเจ็กต์แต่ละรายการ สคีมาที่ใช้กันทั่วไป เช่น Article, Product และ BreadcrumbList จะช่วยปลดล็อกผลการค้นหาแบบริชเมื่อมาร์กอัปสะท้อนหน้าที่มองเห็นได้อย่างถูกต้อง ควรตรวจสอบด้วย Rich Results Test ก่อนนำขึ้นใช้งาน

คำถามที่พบบ่อย

บทเรียน “พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD”

เพิ่มข้อมูลแบบมีโครงสร้างที่เครื่องอ่านได้ด้วย JSON-LD คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

OpenGraph og:title og:description og:image
เมตาแท็ก Twitter Card
พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD
Hreflang สำหรับหน้าสากล

← กลับไปที่ HTML Academy