JavaScript SEO: หลีกเลี่ยงข้อผิดพลาดของการแสดงผลฝั่งเซิร์ฟเวอร์

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

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

นัดรับ!

มีการแสดงผลฝั่งเซิร์ฟเวอร์ประเภทใดบ้าง

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

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

มีสามวิธีหลักในการตั้งค่าและดำเนินการแสดงผลฝั่งเซิร์ฟเวอร์:

1. การเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย HTML . แบบไดนามิก

การเรนเดอร์ฝั่งเซิร์ฟเวอร์จะสร้างเวอร์ชัน HTML ที่แสดงผลของแต่ละ URL แบบออนดีมานด์

2. การเรนเดอร์แบบคงที่ด้วย HTML . แบบคงที่

โดยพื้นฐานแล้ว สิ่งนี้จะสร้าง URL เวอร์ชัน HTML ที่แสดงผลล่วงหน้า (คงที่) ล่วงหน้าและจัดเก็บไว้ในแคช

3. การเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย (ซ้ำ) การเติมน้ำด้วยไดนามิก HTML และ JS/DOMs

เซิร์ฟเวอร์จัดเตรียมเวอร์ชัน HTML แบบคงที่ของ URL และไคลเอ็นต์ (เบราว์เซอร์ ฯลฯ) ที่มีมาร์กอัป Document Object Model (DOM) แบบมีโครงสร้างอยู่แล้ว ลูกค้าใช้สิ่งนี้และเปลี่ยนเป็น DOM แบบไดนามิกที่สามารถตอบสนองต่อการเปลี่ยนแปลงฝั่งไคลเอ็นต์และทำให้มีการโต้ตอบมากขึ้น

Google เผยแพร่ภาพรวมที่ดีของการแสดงผลเว็บพร้อมทั้งข้อดีและข้อเสีย พร้อมคำอธิบายที่ลึกซึ้งยิ่งขึ้นหากคุณสนใจ แต่ก่อนอื่น หากคุณกำลังมองหาความช่วยเหลือในหัวข้อ JavaScript SEO หรือ Server Side Rendering โปรดติดต่อเราที่ Searchmetrics Digital Strategies Group

ได้รับการติดต่อ!

ข้อผิดพลาดเมื่อแสดงเว็บไซต์ JavaScript ผ่านเซิร์ฟเวอร์

เมื่อเร็วๆ นี้เราพบปัญหา SSR กับลูกค้ารายใดรายหนึ่งของเรา พวกเขาใช้งานเว็บไซต์บน Angular JS และแสดงผลด้วย Rendertron ผ่าน Chrome แบบไม่มีหัว

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

1. เมื่อคุณไม่ทำอะไรเลย

เมื่อคุณไม่สนใจและไม่สนใจว่า Google แสดงหน้าเว็บของคุณอย่างไร ให้ฉันแสดงให้คุณเห็นว่า Google แสดงผล (เห็นจริง) หน้าของคุณอย่างไร สิ่งนี้อิงตามเว็บไซต์ที่สร้างจาก Single-Page Application (SPA) โดยใช้เฟรมเวิร์ก JavaScript โดยไม่มีการแสดงผลฝั่งเซิร์ฟเวอร์

มันดูไม่น่าหวังเลยใช่ไหม? ซึ่งเป็นสาเหตุว่าทำไมการใช้ SSR จึงสำคัญ เพราะมันมีลักษณะดังนี้:

2 . การแบ่งหน้า

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

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

ซึ่งหมายความว่าคุณให้ Google 10 เพจที่มีเนื้อหาและบทความเหมือนกัน ตามหลักการแล้ว คุณต้องการให้ Google แสดงหน้าทั้งหมดไม่ซ้ำกับบทความที่มีการแบ่งหน้าอย่างถูกต้อง

3 . ต่ออายุหน้าหมวดหมู่รุ่นที่แสดงผลหลังจากเผยแพร่บทความ/ผลิตภัณฑ์ใหม่

ลูกค้าของเราได้เพิ่มอันดับในทรัพย์สินของ Google News เกือบทุกรายการอย่างมีนัยสำคัญ เช่น AMP Carousels, Google News Boxes และ Mobile News Boxes โดยมี Publisher Carousels เป็นข้อยกเว้น เราเริ่มตรวจสอบสิ่งนี้ และปรากฎว่าลูกค้าของเราไม่ได้อัปเดตเวอร์ชันแคชเมื่อมีการเผยแพร่บทความใหม่ เราพบว่าพวกเขาได้ต่ออายุหมวดหมู่หลักในเวอร์ชันแคชในสัปดาห์ต่อมา:

และในหมวดย่อยแม้ในอีกหนึ่งเดือนต่อมา

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

4 . การแสดงผลอาจทำให้เกิดเนื้อหาที่ซ้ำกันและการกำหนดรูปแบบบัญญัติที่ไม่ถูกต้อง

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

มีแม้กระทั่ง Canonical ใหม่ที่ตั้งค่าโดยเอ็นจิ้น SSR สำหรับ URL นั้น ค่อนข้างน่ากลัวใช่มั้ย?

ตามหลักการแล้ว คุณต้องการยกเว้นพารามิเตอร์เหล่านี้จากการรวบรวมข้อมูลของ Google

5 . เปลี่ยนชื่อเพจเมื่อเรนเดอร์

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

เพื่อให้แน่ใจว่ามีการแสดงผลข้อมูลเมตาอย่างถูกต้องเสมอ คุณควรรวมไว้ใน URL เวอร์ชันที่ไม่แสดงผล (JavaScript)

บทสรุป

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

ก่อนที่จะเปิดใหม่จากเว็บไซต์ที่ใช้ HTML ไปเป็นเฟรมเวิร์กที่ใช้ JavaScript ตรวจสอบให้แน่ใจว่าได้รวมการแสดงผลฝั่งเซิร์ฟเวอร์และให้บริการแบบไดนามิกเสมอ!

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

นัดรับ!