รับข้อมูลอัปเดตและข้อมูลเชิงลึกล่าสุดจาก Google I/O 2019
เรื่องดีๆ เกิดขึ้นได้ด้วย Google Search และเรายินดีอย่างยิ่งที่จะได้แชร์สิ่งดีๆ ที่ Google I/O 2019
ในโพสต์นี้เราจะเน้นเรื่องแนวทางปฏิบัติแนะนำในการทำให้เว็บแอป JavaScript ค้นพบได้ใน Google Search ซึ่งได้แก่
- Googlebot ใหม่ที่อัปเดตอยู่เสมอ
- ไปป์ไลน์ของ Googlebot สำหรับการรวบรวมข้อมูล การแสดงผล และการจัดทำดัชนี
- การตรวจหาฟีเจอร์และการจัดการข้อผิดพลาด
- กลยุทธ์การแสดงผล
- เครื่องมือทดสอบสำหรับเว็บไซต์ของคุณใน Google Search
- ปัญหาที่พบบ่อยและวิธีแก้ปัญหาที่เป็นไปได้
- แนวทางปฏิบัติแนะนำสำหรับ SEO ในเว็บแอป JavaScript
พบกับ Googlebot ที่อัปเดตอยู่เสมอ
ปีนี้เราได้ประกาศ Googlebot ใหม่ที่อัปเดตอยู่เสมอ ที่รอคอยกันมานาน
ตอนนี้ Googlebot ใช้เครื่องมือ Chromium ที่ทันสมัยเพื่อแสดงผลเว็บไซต์สำหรับ Google Search นอกจากนี้ เราจะทดสอบ Chromium เวอร์ชันใหม่เพื่ออัปเดต Googlebot ให้ดียิ่งขึ้น ซึ่งโดยปกติจะใช้เวลาไม่กี่สัปดาห์หลังจากการเผยแพร่ Chrome ที่มีความเสถียรแต่ละครั้ง ประกาศนี้เป็นข่าวใหญ่สำหรับนักพัฒนาเว็บและ SEO เนื่องจากถือเป็นฟีเจอร์ใหม่กว่า 1, 000 รายการใน Googlebot เช่น ES6+, IntersectionObserver และ Web Elements v1
ดูวิธีการทำงานของ Googlebot
Googlebot เป็นไปป์ไลน์ที่มีคอมโพเนนต์หลายรายการ เรามาทำความเข้าใจวิธีที่ Googlebot จัดทำดัชนีหน้าเว็บสำหรับ Google Search กัน
ขั้นตอนต่างๆ มีดังนี้
- Googlebot จัดคิว URL สำหรับการรวบรวมข้อมูล
- จากนั้นจะดึงข้อมูล URL ที่มีคำขอ HTTP ตาม Crawl Budget
- Googlebot จะสแกน HTML เพื่อหาลิงก์และจัดคิวลิงก์ที่ค้นพบเพื่อทำการ Crawl
- จากนั้น Googlebot จะจัดคิวหน้าเว็บสำหรับการแสดงผล
- อินสแตนซ์ Chromium แบบไม่มีส่วนหัวจะแสดงผลหน้าเว็บทันที ซึ่งรวมถึงการเรียกใช้ JavaScript
- Googlebot ใช้ HTML ที่แสดงผลเพื่อจัดทำดัชนีหน้าเว็บ
การตั้งค่าทางเทคนิคอาจส่งผลต่อขั้นตอนการรวบรวมข้อมูล การแสดงผล และการจัดทำดัชนี เช่น เวลาในการตอบสนองที่ช้าหรือข้อผิดพลาดเกี่ยวกับเซิร์ฟเวอร์อาจส่งผลต่อCrawl Budget อีกตัวอย่างหนึ่งก็คือการกำหนดให้ JavaScript แสดงผลลิงก์อาจทำให้ค้นพบลิงก์เหล่านี้ช้าลง
ใช้การตรวจหาฟีเจอร์และจัดการกับข้อผิดพลาด
Googlebot ที่อัปเดตอยู่เสมอมีฟีเจอร์ใหม่ๆ มากมาย แต่บางฟีเจอร์ก็ยังคงไม่ได้รับการสนับสนุน การใช้ฟีเจอร์ที่ไม่รองรับหรือไม่จัดการกับข้อผิดพลาดอย่างเหมาะสมอาจทำให้ Googlebot แสดงผลหรือจัดทำดัชนีเนื้อหาไม่ได้
ยกตัวอย่างเช่น:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
หน้านี้อาจไม่แสดงเนื้อหาใดๆ ในบางกรณีเนื่องจากโค้ดไม่ทำงานเมื่อผู้ใช้ปฏิเสธสิทธิ์หรือเมื่อการเรียกใช้ getCurrentPosition แสดงข้อผิดพลาด Googlebot จะปฏิเสธคำขอสิทธิ์ในลักษณะนี้โดยค่าเริ่มต้น
นี่เป็นวิธีแก้ปัญหาที่ดีกว่า:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
หากคุณมีปัญหาเกี่ยวกับการจัดทำดัชนีเว็บไซต์ JavaScript โปรดอ่านคู่มือการแก้ปัญหาของเราเพื่อดูวิธีแก้ไขปัญหา
เลือกกลยุทธ์การแสดงผลที่เหมาะสมสำหรับเว็บแอป
กลยุทธ์การแสดงผลเริ่มต้นสำหรับแอปแบบหน้าเดียวในปัจจุบันคือการแสดงผลฝั่งไคลเอ็นต์ HTML จะโหลด JavaScript ซึ่งจะสร้างเนื้อหาในเบราว์เซอร์ขณะที่เรียกใช้
มาดูเว็บแอปที่แสดงคอลเล็กชันรูปภาพแมวและใช้ JavaScript แสดงผลทั้งหมดในเบราว์เซอร์กัน
หากมีสิทธิ์เลือกกลยุทธ์การแสดงผล ให้ลองพิจารณาใช้การแสดงผลฝั่งเซิร์ฟเวอร์หรือการแสดงผลล่วงหน้า คำสั่งให้เรียกใช้ JavaScript บนเซิร์ฟเวอร์เพื่อสร้างเนื้อหา HTML เริ่มต้น ซึ่งสามารถปรับปรุงประสิทธิภาพสำหรับทั้งผู้ใช้และ Crawler กลยุทธ์เหล่านี้ช่วยให้เบราว์เซอร์เริ่มแสดง HTML เมื่อมาถึงเครือข่าย ซึ่งทำให้โหลดหน้าเว็บได้เร็วขึ้น เซสชันการแสดงผลในงาน I/O หรือบล็อกโพสต์เกี่ยวกับการแสดงผลบนเว็บแสดงให้เห็นว่าการแสดงผลฝั่งเซิร์ฟเวอร์และ Hydion ช่วยปรับปรุงประสิทธิภาพและประสบการณ์ของผู้ใช้เว็บแอป รวมถึงให้ตัวอย่างโค้ดเพิ่มเติมสำหรับกลยุทธ์เหล่านี้
หากคุณกำลังมองหาวิธีแก้ปัญหาชั่วคราวเพื่อช่วยเหลือโปรแกรมรวบรวมข้อมูลที่เรียกใช้ JavaScript ไม่ได้ หรือหากทำการเปลี่ยนแปลงกับฐานของโค้ดฟรอนท์เอนด์ไม่ได้ ให้ลองใช้การแสดงผลแบบไดนามิก ซึ่งคุณสามารถลองใช้ได้ใน Codelab นี้ อย่างไรก็ตาม โปรดทราบว่าคุณจะไม่ได้รับประโยชน์ด้านประสบการณ์ของผู้ใช้หรือด้านประสิทธิภาพอย่างที่จะได้รับจากการแสดงผลฝั่งเซิร์ฟเวอร์หรือการแสดงผลล่วงหน้า เนื่องจากการแสดงผลแบบไดนามิกจะแสดงเฉพาะ HTML แบบคงที่ต่อโปรแกรมรวบรวมข้อมูลเท่านั้น จึงถือเป็นการหยุดพักชั่วคราว ไม่ใช่กลยุทธ์ระยะยาว
ทดสอบหน้าเว็บ
แม้ว่าโดยทั่วไปหน้าเว็บส่วนใหญ่จะทำงานกับ Googlebot ได้เป็นอย่างดี แต่เราขอแนะนำให้คุณทดสอบหน้าเว็บเป็นประจำเพื่อให้แน่ใจว่า Googlebot เข้าถึงเนื้อหาของคุณได้และไม่มีปัญหา เรามีเครื่องมือดีๆ หลายอย่างที่จะช่วยคุณได้
วิธีที่ง่ายที่สุดในการตรวจสอบหน้าเว็บอย่างรวดเร็วคือการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่ นอกจากจะแสดงให้เห็นปัญหาเกี่ยวกับความเหมาะกับอุปกรณ์เคลื่อนที่แล้ว ยังมีภาพหน้าจอของเนื้อหาครึ่งหน้าบนและ HTML ที่แสดงผลตามที่ Googlebot เห็นอีกด้วย
รวมถึงดูได้ด้วยว่าเกิดปัญหาในการโหลดทรัพยากรหรือข้อผิดพลาดของ JavaScript หรือไม่
เราขอแนะนำให้ยืนยันโดเมนใน Google Search Console เพื่อให้คุณสามารถใช้เครื่องมือตรวจสอบ URL เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับสถานะการรวบรวมข้อมูลและการจัดทำดัชนีของ URL, รับข้อความเมื่อ Search Console ตรวจพบปัญหา และดูรายละเอียดเพิ่มเติมเกี่ยวกับประสิทธิภาพของเว็บไซต์ใน Google Search
หากต้องการเคล็ดลับและคำแนะนำทั่วไปเกี่ยวกับ SEO คุณสามารถใช้การตรวจสอบ SEO ใน Lighthouse ได้ หากต้องการผสานรวมการตรวจสอบ SEO เข้ากับชุดทดสอบ ให้ใช้ Lighthouse CLI หรือบ็อต CI ของ Lighthouse
เครื่องมือเหล่านี้ช่วยให้คุณระบุ แก้ไขข้อบกพร่อง และแก้ไขปัญหาเกี่ยวกับหน้าเว็บใน Google Search ซึ่งควรเป็นส่วนหนึ่งของกิจวัตรการพัฒนาของคุณ
ติดตามข่าวสารล่าสุดและติดต่อเรา
โปรดติดตามบล็อกผู้ดูแลเว็บ, ช่อง YouTube ของ Google ผู้ดูแลเว็บ และบัญชี Twitter เพื่อติดตามข้อมูลล่าสุดเกี่ยวกับประกาศและการเปลี่ยนแปลงใน Google Search โปรดอ่านคู่มือนักพัฒนาซอฟต์แวร์เกี่ยวกับ Google Search และชุดวิดีโอเกี่ยวกับ JavaScript SEO เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ SEO และ JavaScript