เริ่มต้นใช้งานการแสดงผลแบบไดนามิก

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

เว็บไซต์ที่ควรใช้การแสดงผลแบบไดนามิก

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

ทำความเข้าใจวิธีการทำงานของการแสดงผลแบบไดนามิก

การแสดงผลแบบไดนามิกจะทำให้เว็บเซิร์ฟเวอร์ตรวจหาโปรแกรมรวบรวมข้อมูล (เช่น ด้วยการตรวจสอบ User Agent) คำขอจากโปรแกรมรวบรวมข้อมูลจะส่งไปยังตัวแสดงผล คำขอจากผู้ใช้จะแสดงผลตามปกติ ในกรณีที่จำเป็น ตัวแสดงผลแบบไดนามิกจะแสดงเนื้อหาในเวอร์ชันที่เหมาะสมกับโปรแกรมรวบรวมข้อมูล เช่น อาจแสดงเวอร์ชัน HTML แบบคงที่ คุณเลือกเปิดใช้ตัวแสดงผลแบบไดนามิกสำหรับทุกหน้าหรือเลือกเปิดใช้แบบหน้าต่อหน้าก็ได้

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

นำการแสดงผลแบบไดนามิกไปใช้

โปรดทำตามหลักเกณฑ์ทั่วไปเพื่อตั้งค่าการแสดงผลแบบไดนามิก คุณต้องอ่านรายละเอียดการกำหนดค่าที่เจาะจงเพราะการนำไปใช้สำหรับเนื้อหาแต่ละประเภทจะแตกต่างกัน

  1. ติดตั้งและกำหนดค่าตัวแสดงผลแบบไดนามิกเพื่อเปลี่ยนรูปแบบเนื้อหาเป็น HTML แบบคงที่ซึ่งทำให้โปรแกรมรวบรวมข้อมูลจัดการได้ง่ายขึ้น ตัวแสดงผลแบบไดนามิกที่รู้จักโดยทั่วไป ได้แก่ Puppeteer, Rendertron และ prerender.io
  2. เลือก User Agent ที่คุณคิดว่าควรได้รับ HTML แบบคงที่และดูรายละเอียดการกำหนดค่าที่เจาะจงเกี่ยวกับวิธีอัปเดตหรือเพิ่ม User Agent ด้านล่างนี้เป็นตัวอย่างของรายการ User Agent ที่พบทั่วไปในมิดเดิลแวร์ Rendertron
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. หากการแสดงผลล่วงหน้าทำให้เซิร์ฟเวอร์ช้าลงหรือคุณเห็นคำขอการแสดงผลล่วงหน้าจำนวนมาก ให้ลองใช้แคชสำหรับเนื้อหาที่แสดงผลล่วงหน้า หรือตรวจสอบว่าคำขอมาจากโปรแกรมรวบรวมข้อมูลที่ถูกต้อง
  4. ระบุว่า User Agent กำหนดว่าต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ใช้การแสดงผลแบบไดนามิกเพื่อระบุเวอร์ชันที่เหมาะสมกับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ด้านล่างนี้เป็นตัวอย่างวิธีที่การกำหนดค่าระบุว่า User Agent ต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. กำหนดค่าเซิร์ฟเวอร์ที่จะส่ง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูลที่คุณเลือก โดยมีหลายวิธีให้เลือกใช้ตามตัวอย่างด้านล่าง ทั้งนี้ขึ้นอยู่กับเทคโนโลยีที่ใช้ด้วย
    • คำขอพร็อกซีที่มาจากโปรแกรมรวบรวมข้อมูลไปยังตัวแสดงผลแบบไดนามิก
    • แสดงผลล่วงหน้าในฐานะส่วนหนึ่งของกระบวนการทำให้ใช้งานได้และทำให้เซิร์ฟเวอร์แสดง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูล
    • สร้างการแสดงผลแบบไดนามิกลงในโค้ดเซิร์ฟเวอร์ที่กำหนดเอง
    • แสดงเนื้อหาแบบคงที่จากบริการการแสดงผลล่วงหน้าไปยังโปรแกรมรวบรวมข้อมูล
    • ใช้มิดเดิลแวร์สำหรับเซิร์ฟเวอร์ (เช่น มิดเดิลแวร์ Rendertron)

ตรวจสอบการกำหนดค่า

หลังจากที่นำการแสดงผลแบบไดนามิกไปใช้เรียบร้อยแล้ว ให้ตรวจสอบว่าทุกอย่างทำงานได้ตามที่คาดไว้โดยตรวจสอบ URL ด้วยการทดสอบต่อไปนี้

  1. ทดสอบเนื้อหาในอุปกรณ์เคลื่อนที่ด้วยการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่และตรวจสอบว่า Google เห็นเนื้อหาของคุณ

    done สำเร็จแล้ว: เนื้อหาในอุปกรณ์เคลื่อนที่ตรงกับสิ่งที่คุณคาดหวังให้ผู้ใช้เห็น

    error ลองใหม่: หากเนื้อหาที่เห็นไม่ตรงกับสิ่งที่คุณคาดหวัง โปรดดูส่วนการแก้ปัญหา

  2. ทดสอบเนื้อหาเดสก์ท็อปด้วยเครื่องมือตรวจสอบ URL เพื่อดูว่าเนื้อหาเดสก์ท็อปปรากฏอยู่ในหน้าที่แสดงผลด้วย (หน้าที่แสดงผลคือลักษณะที่ Googlebot เห็นหน้าของคุณ)

    done สำเร็จแล้ว: เนื้อหาในเดสก์ท็อปตรงกับสิ่งที่คุณคาดหวังให้ผู้ใช้เห็น

    error ลองใหม่: หากเนื้อหาที่คุณเห็นไม่ตรงกับสิ่งที่คุณคาดหวัง โปรดดูส่วนการแก้ปัญหา

  3. หากคุณใช้ข้อมูลที่มีโครงสร้าง ให้ทดสอบว่าข้อมูลที่มีโครงสร้างแสดงผลอย่างถูกต้องด้วยเครื่องมือทดสอบข้อมูลที่มีโครงสร้าง

    done สำเร็จแล้ว: ข้อมูลที่มีโครงสร้างปรากฏขึ้นตามที่คุณคาดหวังไว้

    error ลองใหม่: หากข้อมูลที่มีโครงสร้างไม่ปรากฏตามที่คาดหวัง โปรดดูส่วนการแก้ปัญหา

การแก้ปัญหา

หากเนื้อหาแสดงข้อผิดพลาดในการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่หรือเนื้อหาไม่ปรากฏในผลการค้นหาของ Google Search ให้ลองแก้ไขปัญหาที่พบบ่อยที่สุดซึ่งแสดงอยู่ด้านล่าง หากยังคงประสบปัญหา ให้โพสต์หัวข้อใหม่ในฟอรัมผู้ดูแลเว็บ

เนื้อหาไม่สมบูรณ์หรือดูแตกต่างไป

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

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

เวลาในการตอบสนองนาน

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

done แก้ปัญหา

  1. ตั้งค่าแคชสำหรับ HTML ที่แสดงผลล่วงหน้าหรือสร้าง HTML เวอร์ชันคงที่สำหรับเนื้อหาเป็นส่วนหนึ่งของกระบวนการสร้างของคุณ
  2. อย่าลืมเปิดใช้แคชในการกำหนดค่า (เช่น ชี้โปรแกรมรวบรวมข้อมูลไปยังแคช)
  3. ตรวจสอบว่าโปรแกรมรวบรวมข้อมูลได้รับเนื้อหาอย่างรวดเร็วโดยใช้เครื่องมือทดสอบ เช่น การทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่หรือ webpagetest (โดยใช้สตริง User Agent ที่กำหนดเองจากรายการ User Agent ของโปรแกรมรวบรวมข้อมูลของ Google) โดยคำขอของคุณต้องไม่หมดเวลาไปก่อน

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

error สาเหตุของปัญหา: การไม่มี User Agent ข้อมูลที่มีโครงสร้างหรือไม่ได้รวมแท็กสคริปต์ JSON-LD ในเอาต์พุตอาจทำให้เกิดข้อผิดพลาดเกี่ยวกับข้อมูลที่มีโครงสร้าง

done แก้ปัญหา

  1. ใช้เครื่องมือทดสอบข้อมูลที่มีโครงสร้างเพื่อตรวจสอบว่าข้อมูลดังกล่าวนั้นปรากฏอยู่ในหน้า จากนั้นกำหนดค่า User Agent สำหรับเครื่องมือทดสอบข้อมูลที่มีโครงสร้างเพื่อทดสอบเนื้อหาที่แสดงผลล่วงหน้า
  2. ตรวจสอบว่าแท็กสคริปต์ JSON-LD รวมอยู่ใน HTML ที่แสดงผลแบบไดนามิกของเนื้อหา ดูข้อมูลเพิ่มเติมในเอกสารเกี่ยวกับโซลูชันการแสดงผล