Vue.js และ SEO: วิธีเพิ่มประสิทธิภาพเว็บไซต์ปฏิกิริยาสำหรับเครื่องมือค้นหาและบอท

Reactive JavaScript Frameworks (เช่น React, Vue.js และ Angular) เป็นที่นิยมอย่างมากในช่วงที่ผ่านมา และไม่น่าแปลกใจเลยที่พวกมันถูกใช้ในเว็บไซต์และแอปพลิเคชันต่างๆ มากขึ้นเรื่อยๆ เนื่องจากมีความยืดหยุ่น เป็นแบบโมดูล และความง่ายในการทดสอบอัตโนมัติ

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

ในบทความนี้ ผมจะพูดถึง Vue.js เป็นส่วนใหญ่ เนื่องจากเป็นเฟรมเวิร์กที่ผมใช้บ่อยที่สุด และฉันมีประสบการณ์ตรงในด้านการสร้างดัชนีโดยเสิร์ชเอ็นจิ้นในโครงการหลัก ๆ แต่ฉันคิดว่าส่วนใหญ่ สิ่งที่ฉันจะกล่าวถึงก็ใช้ได้กับกรอบงานอื่นเช่นกัน

ความเป็นมาบางประการเกี่ยวกับปัญหา

การทำดัชนีทำงานอย่างไร

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

ประวัติศาสตร์เล็กน้อย

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

เป็นเรื่องธรรมดามากที่นักต้มตุ๋นใส่เนื้อหาที่เป็นมิตรกับ SEO จำนวนมากใน HTML และซ่อนไว้ใน JavaScript เป็นต้น Google ได้เตือนเสมอถึงการปฏิบัตินี้:

“การแสดงเนื้อหาที่แตกต่างจากผู้ใช้ทั่วไปของ Googlebot ถือเป็นการปิดบังหน้าเว็บจริง และขัดต่อหลักเกณฑ์สำหรับผู้ดูแลเว็บของเรา”

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

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

ตัวอย่างเช่น ถ้าเนื้อหาที่อ่านโดย AJAX มาจากบริการเว็บภายนอก จำเป็นต้องทำซ้ำบริการเว็บเดียวกันที่เรียกฝั่งเซิร์ฟเวอร์ และสร้าง HTML ฝั่งเซิร์ฟเวอร์เดียวกันซึ่งจะสร้างในฝั่งไคลเอ็นต์โดย JavaScript — หรืออย่างน้อยก็คล้ายกันมาก สิ่งนี้ซับซ้อนมากเพราะก่อนการถือกำเนิดของ Node.js อย่างน้อยจำเป็นต้องทำซ้ำตรรกะการเรนเดอร์เดียวกันในสองภาษาการเขียนโปรแกรมที่แตกต่างกัน: JavaScript สำหรับส่วนหน้าและ PHP, Java, Python, Ruby เป็นต้น แบ็กเอนด์ สิ่งนี้เรียกว่า " การเรนเดอร์ ฝั่งเซิร์ฟเวอร์ ” และอาจนำไปสู่ความยุ่งยากในการบำรุงรักษา: หากคุณทำการเปลี่ยนแปลงที่สำคัญเกี่ยวกับวิธีการแสดงเนื้อหาในส่วนหน้า คุณจะต้องทำซ้ำการเปลี่ยนแปลงเหล่านั้นในแบ็กเอนด์

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

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

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

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

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

Google สร้างดัชนีหน้าจริง ๆ ด้วย Front-End Framework อย่างไร?

การทดลอง

เพื่อดูว่าจริง ๆ แล้ว Google จัดทำดัชนีอะไรในเว็บไซต์ที่สร้างด้วยเฟรมเวิร์กส่วนหน้า ฉันจึงสร้างการทดลองเล็กน้อย ไม่ได้ครอบคลุมกรณีการใช้งานทั้งหมด แต่อย่างน้อยก็เป็นวิธีค้นหาเพิ่มเติมเกี่ยวกับพฤติกรรมของ Google ฉันสร้างเว็บไซต์ขนาดเล็กด้วย Vue.js และมีการแสดงข้อความส่วนต่างๆ ที่แตกต่างกัน

เนื้อหาของเว็บไซต์นำมาจากคำอธิบายของหนังสือ Infinite Jest โดย David Foster Wallace ใน Infinite Jest Wiki ( ขอบคุณมาก! ) มีข้อความเกริ่นนำสำหรับหนังสือทั้งเล่มและรายชื่อตัวละครพร้อมชีวประวัติของแต่ละคน:

• ข้อความบางส่วนใน HTML แบบคงที่ นอกคอนเทนเนอร์หลักของ Vue.js
• Vue.js แสดงข้อความบางข้อความทันที เนื่องจากมีอยู่ในตัวแปรที่มีอยู่แล้วในโค้ดของแอปพลิเคชัน: มีการกำหนดไว้ในวัตถุ data ของส่วนประกอบ
• #บางข้อความแสดงโดย Vue.js จากวัตถุ data แต่มีความล่าช้า 300 มิลลิวินาที
• ประวัติตัวละครมาจากชุด API ที่เหลือ ซึ่งฉันสร้างโดยมีวัตถุประสงค์โดยใช้แซนด์บ็อกซ์ เนื่องจากฉันคิดว่า Google จะดำเนินการโค้ดของเว็บไซต์และหยุดหลังจากผ่านไประยะหนึ่งเพื่อถ่ายภาพสแนปชอตของสถานะปัจจุบันของหน้า ฉันจึงตั้งค่าแต่ละบริการเว็บให้ตอบสนองด้วยการหน่วงเวลาที่เพิ่มขึ้น อันแรกมี 0 มิลลิวินาที อันที่สองมี 300 มิลลิวินาที ตัวที่สามที่มี 600ms และต่อเนื่องไปจนถึง 2700ms

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

ฉันเผยแพร่ไซต์ทดสอบเล็กๆ นี้ไปยัง Github Pages ของฉัน และขอสร้างดัชนี — ลองดูสิ

ผลลัพธ์

ผลลัพธ์ของการทดสอบ (เกี่ยวกับหน้าแรก) มีดังนี้:

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

การทดลองนี้บอกอะไรเราบ้าง? โดยพื้นฐานแล้ว Google จะสร้างดัชนีเนื้อหาที่สร้างแบบไดนามิก แม้ว่าจะมาจากบริการเว็บภายนอก แต่ก็ไม่รับประกันว่าเนื้อหาจะได้รับการจัดทำดัชนีหาก "มาถึงช้าเกินไป" ฉันมีประสบการณ์ที่คล้ายคลึงกันกับเว็บไซต์การผลิตจริงอื่นๆ นอกเหนือจากการทดลองนี้

SEO ที่แข่งขันได้

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

จากประสบการณ์ของฉัน ฉันสามารถบอกได้ว่าเนื้อหาที่สร้างขึ้นแบบไดนามิกสามารถอยู่ในตำแหน่งบนสุดของ SERPS ได้ ฉันได้ทำงานบนเว็บไซต์สำหรับโมเดลใหม่ของบริษัทรถยนต์รายใหญ่ โดยเปิดตัวเว็บไซต์ใหม่ที่มีโดเมนระดับที่สามใหม่ ไซต์นี้สร้างขึ้นอย่างสมบูรณ์ด้วย Vue.js โดยมีเนื้อหาเพียงเล็กน้อยใน HTML แบบคงที่ นอกเหนือจากแท็ก <title> และคำอธิบาย meta

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

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

แต่เมื่อพิจารณาจากข้อเท็จจริงที่ว่าเราต้องเผชิญกับการต่อต้านอย่างรุนแรงจากบริษัท SEO ที่ดูแลโครงการนี้ ผมคิดว่าผลลัพธ์ก็ยังโดดเด่น

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

ข้อความเคลื่อนไหว

สิ่งที่ Google ไม่ ได้ จัดทำดัชนีคือข้อความที่มีภาพเคลื่อนไหวจำนวนมาก เว็บไซต์ของบริษัทแห่งหนึ่งที่ฉันทำงานด้วยคือ Rabbit Hole Consulting มีข้อความแอนิเมชั่นจำนวนมาก ซึ่งดำเนินการในขณะที่ผู้ใช้เลื่อนหน้าจอ และต้องการให้ข้อความถูกแบ่งออกเป็นส่วนต่างๆ ในแท็กต่างๆ

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

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

ข้อความในส่วนท้ายได้รับการจัดทำดัชนีและแสดงใน SERP แม้ว่าผู้ใช้จะไม่สามารถมองเห็นได้ทันทีเว้นแต่จะเลื่อนไปที่ด้านล่างของหน้า และ คลิกที่ปุ่ม "คำถาม" เพื่อเปิดแบบฟอร์มการติดต่อ นี่เป็นการยืนยันความเห็นของฉันว่าเนื้อหาได้รับการจัดทำดัชนีแม้ว่าจะไม่แสดงต่อผู้ใช้ทันที ตราบใดที่มีการแสดงผลใน HTML ในไม่ช้า — ตรงข้ามกับการแสดงผลตามความต้องการหรือหลังจากล่าช้าเป็นเวลานาน

สิ่งที่เกี่ยวกับการแสดงผลล่วงหน้า?

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

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

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

การอ่านที่แนะนำ : การออกแบบเว็บบนมือถือส่งผลต่อการค้นหาในท้องถิ่นอย่างไร (และจะทำอย่างไรกับมัน)

ข้อควรพิจารณาอื่น ๆ

ความเข้ากันได้

เมื่อไม่นานมานี้ Googlebot ใช้ Chromium เวอร์ชันเก่า (โครงการโอเพนซอร์สที่ใช้ Google Chrome) คือเวอร์ชัน 41 ซึ่งหมายความว่า Google ไม่สามารถแสดงผลคุณลักษณะ JavaScript หรือ CSS ล่าสุดบางรายการได้อย่างถูกต้อง (เช่น IntersectionObserver ไวยากรณ์ ES6 และอื่นๆ)

Google ได้ประกาศเมื่อเร็วๆ นี้ว่าขณะนี้กำลังใช้งาน Chromium เวอร์ชันล่าสุด (74 ในขณะที่เขียน) ใน Googlebot และเวอร์ชันดังกล่าวจะได้รับการอัปเดตเป็นประจำ การที่ Google ใช้งาน Chromium 41 อาจมีนัยสำคัญสำหรับไซต์ที่ตัดสินใจละเว้นความเข้ากันได้กับ IE11 และเบราว์เซอร์รุ่นเก่าอื่นๆ

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

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

JavaScript Errors

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

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

จะดีกว่าถ้ามีซอฟต์แวร์ตรวจสอบข้อผิดพลาดแบบเรียลไทม์ (เช่น Sentry หรือ LogRocket) ซึ่งจะแจ้งเตือนคุณถึงข้อผิดพลาด edge-case ที่คุณอาจไม่ได้เลือกระหว่างการทดสอบหน่วยหรือการทดสอบด้วยตนเอง สิ่งนี้เพิ่มความซับซ้อนในการพึ่งพา JavaScript สำหรับเนื้อหา SEO

เครื่องมือค้นหาอื่น ๆ

เครื่องมือค้นหาอื่นๆ ใช้งาน ไม่ได้ เช่นเดียวกับ Google ที่มีเนื้อหาแบบไดนามิก ดูเหมือนว่า Bing จะไม่สร้างดัชนีเนื้อหาแบบไดนามิกเลย และ DuckDuckGo หรือ Baidu ก็เช่นกัน อาจเป็นเพราะเสิร์ชเอ็นจิ้นเหล่านั้นขาดทรัพยากรและพลังการประมวลผลที่ Google มีอยู่ในจอบ

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

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

บอทอื่นๆ

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

หน้าย่อย

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

บทสรุป

ข้อสรุปที่ฉันได้มาขณะค้นคว้าบทความนี้มีดังต่อไปนี้:

1. หากคุณกำหนดเป้าหมายเฉพาะ Google ไม่จำเป็นต้องใช้การแสดงผลล่วงหน้า เพื่อให้เว็บไซต์ของคุณได้รับการจัดทำดัชนีโดยสมบูรณ์ อย่างไรก็ตาม:
2. คุณ ไม่ ควรพึ่งพา บริการเว็บของบุคคลที่สาม สำหรับเนื้อหาที่ต้องจัดทำดัชนี โดยเฉพาะอย่างยิ่งหากพวกเขาไม่ตอบกลับอย่างรวดเร็ว
3. เนื้อหาที่คุณ แทรกลงใน HTML ของคุณทันที ผ่านการเรนเดอร์ Vue.js จะได้รับการจัดทำดัชนี แต่คุณไม่ควรใช้ข้อความเคลื่อนไหวหรือข้อความที่แทรกใน DOM หลังจากการกระทำของผู้ใช้ เช่น การเลื่อน ฯลฯ
4. ตรวจสอบให้แน่ใจว่าคุณ ทดสอบข้อผิดพลาด JavaScript เนื่องจากอาจส่งผลให้ทั้งหน้า/ส่วนไม่ได้รับการจัดทำดัชนี หรือเว็บไซต์ของคุณไม่ได้รับการจัดทำดัชนีเลย
5. หากไซต์ของคุณมี หลายหน้า คุณยังคงต้องมีตรรกะในการสร้างหน้าเว็บที่ Google สามารถจัดทำดัชนีโดยใช้ระบบการแสดงผลส่วนหน้าเดียวกันกับหน้าแรกได้
6. หากคุณต้องการมี คำอธิบาย และ ภาพตัวอย่างที่ แตกต่างกันสำหรับโซเชียลมีเดียระหว่างเพจต่างๆ คุณจะต้องแก้ไขปัญหานี้ด้วย ไม่ว่าจะทางฝั่งเซิร์ฟเวอร์หรือโดยการรวบรวมเพจคงที่สำหรับแต่ละ URL
7. หากคุณต้องการให้ไซต์ของคุณทำงานบน เสิร์ชเอ็นจิ้นอื่นที่ไม่ใช่ Google คุณจะต้องแสดงผลล่วงหน้าบางประเภทอย่างแน่นอน