เหตุใดการแสดงผลแบบไดนามิกจึงไม่ใช่โซลูชันระยะยาว

ในกรณีที่คุณพลาด Google เพิ่งระบุว่า:

• การแสดงผลแบบไดนามิกเป็นวิธีแก้ปัญหาและไม่ใช่วิธีแก้ปัญหาระยะยาวสำหรับปัญหา JavaScript และ
• Google แนะนำให้ใช้การแสดงผลฝั่งเซิร์ฟเวอร์ การแสดงผลแบบคงที่ หรือการไฮเดรชั่นแทน

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

หากคำถามนี้ทำให้คุณค้นหาคำตอบเหมือนผม มาเจาะลึกกัน!

เหตุใดการอัปเดตนี้จึงสำคัญ

เพื่อทำความเข้าใจว่าเหตุใดเราจึงถือว่าการอัปเดตนี้มีความสำคัญ ให้ย้อนกลับไปดูว่าก่อนหน้านี้ Google ดำเนินการกับการแสดงผล (ไดนามิก) อย่างไร

ไทม์ไลน์เรื่องราวการเรนเดอร์แบบไดนามิก

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

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

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

นั่นคือเหตุผลที่ Bartosz Goralewicz ซีอีโอของ Onely เริ่มค้นคว้าหัวข้อและทดลองเพื่อดู ว่า Google สามารถรวบรวมข้อมูลและจัดทำดัชนีเฟรมเวิร์ก JavaScript ได้อย่างเหมาะสม หรือไม่

ในขณะที่จากฝั่งของ Google ข้อมูลที่แม่นยำยิ่งขึ้นเกี่ยวกับการแสดงผลแบบไดนามิกปรากฏขึ้นในปี 2018 ในระหว่างการประชุม Google I/O Googler ยอมรับว่าพวกเขาใช้การจัดทำดัชนีสองคลื่น โดยสรุปว่า โดยทั่วไป การแสดงผลเว็บไซต์ที่ใช้ JavaScript จะถูกเลื่อนออกไป ตราบใดที่ Google ไม่มีทรัพยากรในการประมวลผลเนื้อหานั้น นอกจากนี้ ไม่นานหลังจากการประชุม Google ได้เผยแพร่ เอกสารอย่างเป็นทางการ (อัปเดตแล้ว) แนะนำให้เรนเดอร์แบบไดนามิกเพื่อให้เนื้อหา JavaScipt ของคุณจัดทำดัชนีเร็วขึ้น

จากนั้นในปี 2019 Bartosz Goralewicz ได้อธิบายรายละเอียดเกี่ยวกับการเรนเดอร์แบบไดนามิกในระหว่าง การนำเสนอของเขา ที่ SMX WEST เขามีวัตถุประสงค์เพื่ออธิบายว่าเหตุใดโซลูชันนี้จึงไม่ใช่สัญลักษณ์แสดงหัวข้อย่อยสีเงินสำหรับปัญหาการเรนเดอร์ทั้งหมด

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

การเรนเดอร์แบบไดนามิกคืออะไร?

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

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

Google เติมเต็มคำจำกัดความนั้นโดยระบุ:

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

ที่มา: John Muller

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

นั่นเป็นเหตุผลที่ Google แนะนำว่าการเรนเดอร์แบบไดนามิกอาจเป็นข้อเสียสำหรับเว็บไซต์เป็นหลัก:

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

การเรนเดอร์ไดนามิกแตกต่างจากวิธีการให้บริการ JavaScript ยอดนิยมอื่นๆ อย่างไร

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

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

การแสดงผลฝั่งไคลเอ็นต์

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

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

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

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

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

ไม่มีโบนัสการจัดอันดับ SEO สำหรับการใช้งานไม่ทางใดก็ทางหนึ่ง – เป็นเพียงวิธีการที่แตกต่างกันในการจัดทำดัชนีเนื้อหา (เช่นเดียวกับการแสดงผลฝั่งไคลเอ็นต์) ความแตกต่างระหว่างการเรนเดอร์แบบไดนามิกและการเรนเดอร์ฝั่งเซิร์ฟเวอร์จาก POV ของฉันนั้นมากกว่าในแง่ของการตั้งค่าและบำรุงรักษาโครงสร้างพื้นฐานที่ใช้งานได้จริง (มันอาจส่งผลต่อความเร็วได้เช่นกัน ขึ้นอยู่กับว่าคุณตั้งค่าอะไรไว้)

ที่มา: John Muller

การเรนเดอร์แบบไดนามิกทำงานอย่างไร

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

Google แนะนำให้ใช้ตัวแสดงไดนามิกต่อไปนี้:

• Prerender.io (ซอฟต์แวร์บุคคลที่สาม),
• Puppeteer (ซอฟต์แวร์โอเพ่นซอร์ส) หรือ
• Rendertron (ซอฟต์แวร์โอเพ่นซอร์ส)

เมื่อกำหนดค่าโซลูชันที่แนะนำแล้ว อย่าลืม:

1. เลือกตัวแทนผู้ใช้ที่คุณต้องการให้บริการในเวอร์ชัน HTML คงที่ของเว็บไซต์ของคุณ เช่น “googlebot” หรือ “twitterbot”
2. ตั้งค่าแคชเพื่อให้เว็บไซต์ของคุณสามารถให้บริการได้โดยเร็วที่สุดและหลีกเลี่ยงระยะหมดเวลา
3. ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณเวอร์ชันที่แสดงล่วงหน้าให้บริการเวอร์ชันที่เน้นอุปกรณ์ กล่าวอีกนัยหนึ่ง โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาบนมือถือควรเห็นไซต์เวอร์ชันมือถือของคุณเมื่อโปรแกรมรวบรวมข้อมูลอื่น ‒ เวอร์ชันเดสก์ท็อป
4. ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณสามารถให้บริการ HTML แบบคงที่แก่ตัวแทนผู้ใช้ที่เลือก

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

เหตุใดจึงจะเริ่มนำทางไปยังปัญหาการเรนเดอร์แบบไดนามิกได้อย่างไร

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

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

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

ใช้การ ทดสอบความเหมาะกับมือถือ

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

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

ภายในเครื่องมือ คุณสามารถเจาะลึกไปที่ส่วนรายละเอียดเพื่อเรียนรู้ว่าหน้าเว็บถูกรวบรวมข้อมูลเมื่อใดและโดยใด หรือแม้แต่ตรวจสอบการตอบสนองของ HTTP หากคุณกำลังตรวจสอบโดเมนของคุณ การทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่สามารถโอนคุณเข้าสู่การวิเคราะห์เพิ่มเติมใน Google Search Console

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

ใช้ Google Search Console

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

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

คุณลักษณะที่เป็นประโยชน์อีกประการหนึ่งใน Google Search Console คือ เครื่องมือตรวจ สอบ URL เครื่องมือตรวจสอบ URL คล้ายกับการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่ ซึ่งช่วยให้คุณตรวจสอบสถานะของหน้าที่ทดสอบและดูเวอร์ชันที่แสดงผลได้

ใช้ ZipTie.dev

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

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

ZipTie.dev วิเคราะห์การจัดทำดัชนีร่วมกับจุดข้อมูลอื่นๆ เช่น จำนวนคำ ชื่อ ส่วนหัว คำอธิบายเมตา และอื่นๆ วิธีนี้จะช่วยคุณระบุสาเหตุที่เป็นไปได้ของปัญหาการจัดทำดัชนี (และการแสดงผล)

ใช้การทดสอบผลการค้นหาที่เป็นสื่อสมบูรณ์

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

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

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

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

การแก้ปัญหา (ไดนามิก) การแสดงผลมักจะต้องใช้ความรู้ด้านเทคนิค SEO ทั่วไปและการวิเคราะห์อย่างละเอียด

เหตุใดการเรนเดอร์แบบไดนามิกจึงไม่ใช่วิธีแก้ปัญหาระยะยาว

การแสดงผลแบบไดนามิกใช้ทรัพยากรเซิร์ฟเวอร์จำนวนมาก

การแสดงผลแบบไดนามิกอาจทำให้เซิร์ฟเวอร์ของคุณช้าลงอย่างมาก คำขอการแสดงผลล่วงหน้าจำนวนมากอาจทำให้ตัวแสดงภาพล้มเหลว ดังนั้น Googlebot จะ:

• รับหน้าว่าง ‒ Googlebot เห็นเฉพาะ HTML เริ่มต้น แต่เนื่องจากไม่มีการอ้างอิง JavaScript ในโค้ด ส่วนที่เหลือของเว็บไซต์จึงมองไม่เห็น ไม่สามารถจัดทำดัชนีเว็บไซต์ได้เนื่องจาก Googlebot ไม่เห็นเนื้อหา
• รับเว็บไซต์เวอร์ชันแสดงผลฝั่งไคลเอ็นต์ ‒ Google สามารถจัดการกับ JavaScript ในทางเทคนิคได้ในหลายกรณี แต่จุดรวมของการใช้การเรนเดอร์แบบไดนามิกคือการให้บริการเนื้อหาแบบคงที่ ในบางกรณี ค่าใช้จ่ายในการดาวน์โหลดเนื้อหา JavaScript และการอัปเดตเวอร์ชัน HTML เริ่มต้นของเว็บไซต์อาจสูงเกินไปสำหรับ Googlebot

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

การใช้งานและการบำรุงรักษาการแสดงผลแบบไดนามิกสามารถใช้ทรัพยากรเซิร์ฟเวอร์จำนวนมากได้ และ หากคุณเห็นว่า Googlebot สามารถจัดทำดัชนีหน้าเว็บของคุณได้อย่างถูกต้อง หากคุณไม่ได้ทำการเปลี่ยนแปลงที่สำคัญและความถี่สูงในไซต์ของคุณ บางทีคุณอาจไม่จำเป็นต้องใช้อะไรเป็นพิเศษ […]

ที่มา: John Muller

การแสดงผลแบบไดนามิกสร้างโครงสร้างไซต์แยกกันสองโครงสร้างแทนที่จะเป็นหนึ่ง

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

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

การเรนเดอร์แบบไดนามิกทำให้ประสบการณ์ผู้ใช้แย่ลง

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

การแสดงผลแบบไดนามิกช่วยเพิ่มความซับซ้อนอีกชั้นเมื่อเพิ่มประสิทธิภาพเว็บไซต์

ด้วยการเรนเดอร์แบบไดนามิก การ ระบุ และรับรู้ปัญหาที่เกิดจากมันทำได้ยากกว่า

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

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

อะไรคือทางเลือกที่ดีกว่าในการเรนเดอร์แบบไดนามิก?

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

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

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

เป็นหนึ่งในโซลูชันยอดนิยมที่คุณสามารถใช้ได้แทนการเรนเดอร์แบบไดนามิก

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

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

แต่ระวัง: ด้วยการแสดงผลฝั่งเซิร์ฟเวอร์ ผู้ใช้อาจพบกับตัวชี้วัด Time to First Byte ที่แย่กว่าเล็กน้อย หากเซิร์ฟเวอร์ต้องการสร้าง HTML ad hoc แบบคงที่ หรือเซิร์ฟเวอร์แคชการตอบสนองนั้นไม่มีประสิทธิภาพเพียงพอ

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

การแสดงผลแบบคงที่

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

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

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

การคืนน้ำ

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

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

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

การเรนเดอร์แบบไดนามิกสามารถทำงานในระยะยาวได้หรือไม่

มันอาจจะ แต่ไม่ค่อยทำ โดยเฉพาะอย่างยิ่งถ้าคุณมีเว็บไซต์ขนาดใหญ่และไม่เข้าใจเทคโนโลยี SEO อย่าใช้วิธีนี้เพียงอย่างเดียว

และจำไว้ว่า แม้ว่าคุณจะไม่กังวลเกี่ยวกับ SEO ทางเทคนิค แต่การเรนเดอร์แบบไดนามิกก็ยังมีค่าใช้จ่ายสูงในการรักษา

ต่อไปนี้คือตัวอย่างสองตัวอย่างเมื่อลูกค้าของเราใช้การเรนเดอร์แบบไดนามิกสำหรับ:

ให้บริการลิงก์แสดงผลฝั่งไคลเอ็นต์สำหรับผู้ใช้ในส่วนท้าย

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

แสดงรายการผลการค้นหาภายในที่แสดงผลฝั่งไคลเอ็นต์ให้กับผู้ใช้

ลูกค้าตัดสินใจให้บริการเวอร์ชันแสดงผลฝั่งเซิร์ฟเวอร์กับบอท (เวอร์ชันที่เบากว่าของรายการ) และเวอร์ชันแสดงผลฝั่งไคลเอ็นต์ให้กับผู้ใช้ (เมื่อสร้างรายการผลิตภัณฑ์เฉพาะกิจและสามารถปรับเปลี่ยนให้เป็นแบบส่วนตัวได้)

ห่อ

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

หากคุณต้องการใช้การเรนเดอร์แบบไดนามิก อย่าลืมทำตามสี่ขั้นตอนเหล่านี้:

1. วางแผนการอัปเดตและการปรับใช้ของคุณ ตรวจสอบให้แน่ใจว่าทีมพัฒนาและ SEO ของคุณมีทรัพยากรเพียงพอที่จะจัดการกับการใช้งานและบำรุงรักษาเว็บไซต์ที่แสดงล่วงหน้า
2. ตรวจสอบให้แน่ใจว่าการตั้งค่ามีประสิทธิภาพและปราศจากข้อบกพร่อง พัฒนาวิธีการตรวจสอบว่าการตั้งค่าทำงานอย่างถูกต้องและไม่มีองค์ประกอบของหน้าหลักขาดหายไปจากเวอร์ชันที่ให้บริการกับบอท
3. จำไว้ว่าคุณต้องสามารถเปรียบเทียบเวอร์ชัน HTML และ JavaScript ของเว็บไซต์ของคุณและตรวจจับความคลาดเคลื่อนได้
4. โปรดจำไว้ว่า ในกรณีส่วนใหญ่ การแสดงผลแบบไดนามิกควรเป็นวิธีแก้ปัญหาชั่วคราวเท่านั้น มองหาโอกาสในการเปลี่ยนไปใช้โซลูชันที่แนะนำอื่นๆ โดยพิจารณาจากทรัพยากรการพัฒนาและความสามารถด้านเทคโนโลยีของคุณ