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

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

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

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

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

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

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

การแสดงผลแบบไดนามิกไม่ใช่การปิดบังหน้าเว็บจริง

โดยทั่วไป Googlebot จะไม่ถือว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง ตราบใดที่การแสดงผลนั้นสร้างเนื้อหาที่เหมือนกัน Googlebot จะไม่มองว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง

ขณะตั้งค่าการแสดงผลแบบไดนามิก เว็บไซต์อาจสร้างหน้าข้อผิดพลาดขึ้นมา Googlebot จะไม่ถือว่าหน้าข้อผิดพลาดเหล่านี้เป็นการปิดบังหน้าเว็บจริง และปฏิบัติต่อข้อผิดพลาดนั้นเช่นเดียวกับหน้าข้อผิดพลาดอื่นๆ

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

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

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

  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 เห็นเนื้อหาของคุณ

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

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

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

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

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

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

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

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

การแก้ปัญหา

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

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

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

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

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

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

แก้ปัญหา

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

คอมโพเนนต์เว็บไม่แสดงผลตามที่คาดไว้

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

แก้ปัญหา

  1. โหลด polyfill webcomponents.js สำหรับเอลิเมนต์ที่กำหนดเองและ Shadow DOM
  2. ใช้การทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่หรือเครื่องมือตรวจสอบ URL เพื่อตรวจสอบว่าเนื้อหาปรากฏใน HTML ที่แสดงผลของโซลูชันการแสดงผล

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

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

แก้ปัญหา

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