Googlebot สามารถอ่าน JavaScript ได้ – SEO ควรตอบสนองอย่างไร

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

Googlebot และ JavaScript: สิ่งที่ผู้เชี่ยวชาญพูด

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

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

และนี่คือคำตอบ

Martin Tauber

หุ้นส่วนผู้จัดการ Marketing Factory GmbH

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

อย่างไรก็ตาม Googlebot ยังคงมีปัญหาในการตีความ JavaScript ซึ่งหมายความว่าการพัฒนาจะต้องสะอาดอย่างยิ่งและต้องได้รับการหยั่งรากด้วยความร่วมมืออย่างใกล้ชิดกับหน่วย SEO หากต้องหลีกเลี่ยงความประหลาดใจอันไม่พึงประสงค์

Dominik Wojcik

กรรมการผู้จัดการ ตัวแทนทรัสต์

มีโอกาสที่ตอนนี้คุณไม่มีโลกของการเขียนโปรแกรมแยกกัน (เช่น สำหรับ Escaped Fragment) ให้คุณมุ่งเน้นไปที่ Clean Code และสภาพแวดล้อมเว็บที่สะอาด ตราบใดที่นักพัฒนาซอฟต์แวร์พิจารณาถึงการปรับปรุงที่ก้าวหน้าและพัฒนาแอปพลิเคชันเว็บของตนอย่างเหมาะสม Google ก็น่าจะรับมือได้ดี

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

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

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

Bartosz Goralwicz

ผู้ร่วมก่อตั้งและหัวหน้าฝ่าย SEO, Elephate

ในการประชุมสุดยอด Searchmetrics ในเดือนพฤศจิกายน 2017 Bartosz Goralwicz จาก Elephate ได้พูดถึงความสัมพันธ์ระหว่าง Googlebot และ JavaScript:

Stephan Czysch

ผู้ก่อตั้งและกรรมการผู้จัดการ Trust Agents

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

นอกจากจะถามว่า Google สามารถแสดงผลอะไรได้บ้างแล้ว SEO ควรดูเมื่อเปิดเว็บไซต์ใหม่อีกครั้งว่าบอทสามารถเห็นอะไรได้บ้าง และสร้างสิ่งที่แตกต่างจากเว็บไซต์เก่า ฉันเพิ่งจัดการกับเว็บไซต์ที่ระบบเชื่อมโยงภายในทั้งหมดเกิดความยุ่งเหยิงหลังจากเปิด JavaScript อีกครั้ง เนื่องจากตรรกะของลิงก์ของเว็บไซต์เก่าไม่ได้ถูกส่งต่อ นอกจากนี้ยังมีปัญหา hreflang ดังนั้นจึงจำเป็นต้องทำงานกับรายการตรวจสอบ “คุณสมบัติ SEO” ที่ต้องการ นอกจากนี้ คุณควรถามว่าการแสดงผล JavaScript มีความหมายต่อการใช้งานของคุณอย่างไร: พวกเขาใช้ฮาร์ดแวร์ประเภทใดในการเข้าถึงเว็บไซต์ของคุณ และจะส่งผลต่อเวลาในการโหลดอย่างไร สำหรับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ สามารถแนะนำบทความนี้โดย Addy Osmani

เซบาสเตียน แอดเลอร์

ที่ปรึกษา SEO , leap.de

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

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

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

นอกเหนือจากข้อเท็จจริงที่ฉันไม่ได้คาดหวังให้ Google สื่อสารการอัปเดตการแสดงผลเว็บกับผู้ดูแลเว็บได้เป็นอย่างดี ฉันคาดว่าสิ่งสำคัญที่จะเปลี่ยนแปลงคือความอ่อนไหวต่อข้อผิดพลาด Chrome และเฟรมเวิร์กพัฒนาเร็วมาก และในเวอร์ชันใหม่ บั๊กใหม่ๆ ก็มีแนวโน้มที่จะเข้ามาใน RWS

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

บียอร์น เบธ

ผู้อำนวยการฝ่ายบริการมืออาชีพ Searchmetrics

เราต้องแยกความแตกต่างระหว่างการรวบรวมข้อมูลและการจัดทำดัชนี Google สามารถรวบรวมข้อมูล JavaScript ได้ แต่ต้องใช้ทรัพยากรมากกว่าการรวบรวมข้อมูล HTML ล้วนๆ ตัวสร้างดัชนีที่แสดงลิงก์ (URL) ที่ได้รับจากโปรแกรมรวบรวมข้อมูลจะมีปัญหามากกว่าด้วยความช่วยเหลือของบริการแสดงผลเว็บ (WRS) ในลักษณะเดียวกันกับการดึงข้อมูลและแสดงผลใน Search Console ในการดำเนินการนี้ Google ใช้เบราว์เซอร์ Chrome ของตัวเอง (เวอร์ชัน 41) ด้วยความช่วยเหลือของเบราว์เซอร์ มันพยายามสร้าง Document Object Model (DOM) และตีความหน้าในลักษณะเดียวกับที่จะแสดงในเบราว์เซอร์ ซึ่งอาจนำไปสู่ปัญหาได้ เช่น Google (ดังแสดงในการทดสอบที่ดำเนินการโดย Distilled และ Bartosz Goralewicz) ไม่สามารถรับมือกับปัญหาในโค้ดได้ หรือปัญหาใหญ่อื่นๆ ที่เกิดขึ้นเมื่อแสดงผล ดังนั้น Google จะหยุดแสดงผลในหน้าหลังจากผ่านไป 5 วินาที . สิ่งนี้แสดงให้เห็นในการทดสอบที่ดำเนินการโดย Screaming Frog

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

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

เหนือสิ่งอื่นใด ฉันคาดหวังการเรนเดอร์ที่รวดเร็วและมีประสิทธิภาพมากกว่าที่จะมาจาก Chrome 59 โดยมุ่งไปสู่ประสิทธิภาพที่เทียบเท่ากับ HTML ล้วนๆ การทดสอบเท่านั้นที่จะบอกได้ว่าสิ่งนี้เกิดขึ้นจริงหรือไม่

คลานผ่านโคลน: ประเมินความสมบูรณ์ของเว็บไซต์ของคุณ

วิเคราะห์ทั้ง HTML และ JavaScript ด้วยการเพิ่มประสิทธิภาพโครงสร้างเว็บไซต์ รวมถึง JavaScript Crawler ด้วย Searchmetrics! ผลประโยชน์ของคุณ:

• รวบรวมข้อมูลเฟรมเวิร์ก JavaScript ที่เกี่ยวข้องทั้งหมด รวมถึง Angular และ React
• ปรับปรุงประสิทธิภาพของเว็บไซต์ผ่านรายการปัญหาทางเทคนิคที่จัดลำดับความสำคัญ
• เปรียบเทียบการรวบรวมข้อมูลที่มีและไม่มี JavaScript Crawling

อ่านเพิ่มเติมเกี่ยวกับการรวบรวมข้อมูล JavaScript ของเรา

และสิ่งที่คุณคิดว่า?

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