สร้าง Structured Data ด้วย JavaScript

เว็บไซต์ในปัจจุบันใช้ JavaScript เพื่อแสดงเนื้อหาแบบไดนามิกจำนวนมาก มีบางอย่างที่คุณต้องระวังเมื่อใช้ JavaScript ในการสร้าง Structured Data ในเว็บไซต์ คู่มือนี้จะกล่าวถึงแนวทางปฏิบัติแนะนำและกลยุทธ์ในการนำไปใช้งาน หากคุณเพิ่งใช้ Structured Data เป็นครั้งแรก โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ Structured Data

การสร้าง Structured Data ด้วย JavaScript นั้นมีหลายวิธีด้วยกัน แต่วิธีที่ใช้กันโดยทั่วไปมีดังนี้

ใช้ Google Tag Manager เพื่อสร้าง JSON-LD แบบไดนามิก

Google Tag Manager เป็นแพลตฟอร์มที่ช่วยให้คุณจัดการแท็กในเว็บไซต์ได้โดยไม่ต้องแก้ไขโค้ด ทำตามขั้นตอนต่อไปนี้เพื่อสร้าง Structured Data ด้วย Google Tag Manager

  1. ตั้งค่าและติดตั้ง Google Tag Manager ในเว็บไซต์
  2. เพิ่มแท็ก HTML ที่กำหนดเองใหม่ในคอนเทนเนอร์
  3. วางบล็อก Structured Data ที่รองรับในเนื้อหาแท็ก
  4. ติดตั้งคอนเทนเนอร์ตามที่แสดงในส่วนติดตั้ง Google Tag Manager ของเมนูผู้ดูแลระบบของคอนเทนเนอร์
  5. นำคอนเทนเนอร์ไปใช้จริงในอินเทอร์เฟซของ Google Tag Manager เพื่อเพิ่มแท็กลงในเว็บไซต์
  6. ทดสอบการใช้งาน

ใช้ตัวแปรใน Google Tag Manager

Google Tag Manager (GTM) รองรับตัวแปรเพื่อใช้ข้อมูลในหน้าเป็นส่วนหนึ่งของ Structured Data ใช้ตัวแปรเพื่อดึง Structured Data จากหน้าแทนการทำซ้ำข้อมูลใน GTM เพราะการทำซ้ำข้อมูลใน GTM จะทำให้เนื้อหาของหน้าและ Structured Data ที่แทรกเข้ามาทาง GTM มีโอกาสไม่ตรงกันมากขึ้น

เช่น คุณอาจสร้างบล็อก JSON-LD สำหรับสูตรอาหารแบบไดนามิกซึ่งใช้ชื่อหน้าเป็นชื่อสูตรอาหาร โดยการสร้างตัวแปรที่กำหนดเองชื่อ recipe_name 

function() { return document.title; }

จากนั้นจึงใช้ {{recipe_name}} ใน HTML ของแท็กที่กำหนดเอง

เราขอแนะนำให้สร้างตัวแปรเพื่อรวบรวมข้อมูลที่จำเป็นทั้งหมดจากหน้าที่ใช้ตัวแปร

ลองดูตัวอย่างเนื้อหาแท็ก HTML ที่กำหนดเอง

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

สร้าง Structured Data ด้วย JavaScript ที่กำหนดเอง

คุณสร้าง Structured Data ได้อีก 1 วิธี คือการใช้ JavaScript เพื่อสร้าง Structured Data ทั้งหมด หรือใส่ข้อมูลเพิ่มเติมใน Structured Data ซึ่งแสดงผลฝั่งเซิร์ฟเวอร์ ไม่ว่าคุณจะเลือกวิธีใด Google Search ก็เข้าใจและประมวลผล Structured Data ซึ่งมีอยู่ใน DOM เมื่อแสดงผลหน้าได้ โปรดอ่านคู่มือพื้นฐานเกี่ยวกับ JavaScript สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Google Search ประมวลผล JavaScript

ลองดูตัวอย่างของ Structured Data ซึ่งสร้างด้วย JavaScript ต่อไปนี้

  1. เลือกประเภท Structured Data ที่คุณสนใจ
  2. แก้ไข HTML ของเว็บไซต์ให้มีข้อมูลโค้ด JavaScript ตามตัวอย่างต่อไปนี้ (ดูเอกสารประกอบจาก CMS หรือผู้ให้บริการโฮสติ้ง หรือสอบถามนักพัฒนาซอฟต์แวร์)
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. ทดสอบการใช้งานด้วยการทดสอบผลการค้นหาที่เป็นสื่อสมบูรณ์

ใช้การแสดงผลฝั่งเซิร์ฟเวอร์

หากใช้การแสดงผลฝั่งเซิร์ฟเวอร์ คุณจะรวม Structured Data ไว้ในผลที่แสดงได้ด้วย ดูวิธีสร้าง JSON-LD สำหรับประเภท Structured Data ที่สนใจได้จากเอกสารประกอบของเฟรมเวิร์กที่คุณใช้

ทดสอบการใช้งาน

ทดสอบการใช้งานเพื่อให้ Google Search รวบรวมข้อมูลและจัดทำดัชนี Structured Data ได้

  1. เปิดการทดสอบผลการค้นหาที่เป็นสื่อสมบูรณ์
  2. ป้อน URL ที่ต้องการทดสอบ
  3. คลิกทดสอบ URL

    สำเร็จ: หากคุณทำทุกอย่างถูกต้องและมีการรองรับประเภท Structured Data ในเครื่องมือ คุณจะเห็นข้อความ "หน้ามีสิทธิ์แสดงผลการค้นหาที่เป็นริชมีเดีย"
    หากการทดสอบผลการค้นหาที่เป็นริชมีเดียไม่รองรับประเภท Structured Data ที่คุณทดสอบ ให้ตรวจสอบ HTML ที่แสดงผล หาก HTML ที่แสดงมี Structured Data ระบบของ Google Search จะประมวลผลข้อมูลนั้นได้

    ลองอีกครั้ง: หากคุณเห็นข้อผิดพลาดหรือคำเตือน อาจเป็นเพราะมีข้อผิดพลาดทางไวยากรณ์หรือไม่มีพร็อพเพอร์ตี้บางอย่าง อ่านเอกสารประกอบเกี่ยวกับประเภท Structured Data ที่คุณใช้และตรวจสอบว่าได้เพิ่มพร็อพเพอร์ตี้ครบทั้งหมดแล้ว หากยังเกิดปัญหาขึ้นอยู่ โปรดอ่านคำแนะนำในการแก้ไขปัญหา JavaScript ที่เกี่ยวข้องกับการค้นหา