แก้ไขปัญหา JavaScript ที่เกี่ยวกับ Search

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

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

หากสงสัยว่าปัญหา JavaScript อาจกำลังบล็อกหน้าเว็บหรือเนื้อหาหนึ่งๆ บนหน้าเว็บที่ทำงานด้วย JavaScript ไม่ให้แสดงใน Google Search ให้ทำตามขั้นตอนต่อไปนี้ หากไม่แน่ใจว่า JavaScript เป็นสาเหตุหลักหรือไม่ ให้ทำตามคำแนะนำในการแก้ไขข้อบกพร่องทั่วไปเพื่อระบุปัญหาอย่างเจาะจง

1. หากต้องการทดสอบว่า Google ทำการ Crawl และแสดงผล URL อย่างไร ให้ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียหรือเครื่องมือตรวจสอบ URL ใน Search Console คุณจะดูทรัพยากรที่โหลด, เอาต์พุตของคอนโซล JavaScript และข้อยกเว้น, DOM ที่แสดงผล และข้อมูลอื่นๆ ได้

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

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. ตรวจสอบว่าได้ทำการป้องกันข้อผิดพลาด soft 404 แล้ว ซึ่งอาจทำได้ยากในแอปพลิเคชันหน้าเว็บเดียว (SPA) หากต้องการป้องกันไม่ให้จัดทำดัชนีหน้าข้อผิดพลาด คุณอาจใช้กลยุทธ์ใดกลยุทธ์หนึ่งต่อไปนี้หรือจะใช้ทั้ง 2 กลยุทธ์ก็ได้
   • เปลี่ยนเส้นทางไปยัง URL ที่เซิร์ฟเวอร์ตอบสนองด้วยรหัสสถานะ 404

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • เพิ่มหรือเปลี่ยนแท็ก meta ของ robots เป็น noindex

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   เมื่อ SPA ใช้ JavaScript ฝั่งไคลเอ็นต์เพื่อจัดการกับข้อผิดพลาด ข้อผิดพลาดนั้นมักรายงานรหัสสถานะ HTTP 200 แทนรหัสสถานะที่เหมาะสม ซึ่งอาจทำให้หน้าข้อผิดพลาดถูกจัดทำดัชนีและอาจจะแสดงในผลการค้นหา

3. ให้คาดการณ์ว่า Googlebot จะปฏิเสธคำขอสิทธิ์จากผู้ใช้
   ฟีเจอร์ที่ต้องขอสิทธิ์จากผู้ใช้ไม่สมเหตุสมผลสำหรับ Googlebot หรือผู้ใช้ทั้งหมด เช่น หากคุณกำหนดให้ต้องใช้ Camera API เป็นไปไม่ได้ที่ Googlebot จะจัดหากล้องให้คุณได้ คุณจึงต้องมีวิธีที่ให้ผู้ใช้เข้าถึงเนื้อหาของคุณได้ โดยไม่บังคับให้อนุญาตการเข้าถึงกล้อง
4. อย่าใช้ส่วนย่อย URL ในการโหลดเนื้อหาที่แตกต่างกัน
   SPA อาจใช้ส่วนย่อย URL (เช่น https://example.com/#/products) ในการโหลดมุมมองที่แตกต่างกัน เราเลิกใช้งานรูปแบบ AJAX-crawling ไปตั้งแต่ปี 2015 คุณจึงใช้ส่วนย่อย URL กับ Googlebot ไม่ได้ เราขอแนะนำให้ใช้ History API เพื่อโหลดเนื้อหาที่แตกต่างกันตาม URL ใน SPA
5. อย่าพึ่งพาการเก็บข้อมูลถาวรในการแสดงเนื้อหา
   WRS โหลดแต่ละ URL (โปรดดู วิธีการทํางานของ Google Search เพื่อดูภาพรวมเกี่ยวกับวิธีที่ Google ค้นพบเนื้อหา) โดยติดตามการเปลี่ยนเส้นทางของเซิร์ฟเวอร์และไคลเอ็นต์เช่นเดียวกับเบราว์เซอร์ทั่วไป แต่ WRS จะไม่เก็บสถานะในการโหลดหน้าเว็บไว้ดังนี้
   • ระบบจะล้างข้อมูลพื้นที่เก็บข้อมูลในเครื่องและพื้นที่เก็บข้อมูลของเซสชันในการโหลดหน้าเว็บ
   • ระบบจะล้างคุกกี้ HTTP ในการโหลดหน้าเว็บ
6. ใช้การทำลายนิ้วมือของเนื้อหาเพื่อไม่ให้ Googlebot พบปัญหาในการแคช
   Googlebot จะแคชทุกอย่างเพื่อลดคำขอของเครือข่ายและการใช้ทรัพยากร WRS อาจไม่สนใจส่วนหัวของแคช จึงอาจทำให้ใช้ทรัพยากร JavaScript หรือ CSS ที่ล้าสมัย การทำฟิงเกอร์ปรินต์ของเนื้อหาจะหลีกเลี่ยงปัญหานี้โดยสร้างฟิงเกอร์ปรินต์จากส่วนเนื้อหาของชื่อไฟล์ เช่น main.2bb85551.js เนื่องจากฟิงเกอร์ปรินต์ขึ้นอยู่กับเนื้อหาของไฟล์ การอัปเดตแต่ละครั้งจึงสร้างชื่อไฟล์ที่แตกต่างกัน ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำจาก web.dev เกี่ยวกับกลยุทธ์การแคชเป็นระยะเวลานาน
7. ตรวจสอบว่าแอปพลิเคชันของคุณใช้การตรวจหาฟีเจอร์สำหรับ API สำคัญทั้งหมดที่จำเป็นต้องใช้และมีลักษณะการทำงานแบบสำรองหรือ Polyfill ตามความเหมาะสม
   User Agent บางตัวอาจยังไม่ได้ยอมรับฟีเจอร์บนเว็บบางอย่างและปิดใช้บางฟีเจอร์โดยเจตนา ตัวอย่างเช่น หากคุณใช้ WebGL เพื่อแสดงผลเอฟเฟกต์ของภาพถ่ายในเบราว์เซอร์ การตรวจหาฟีเจอร์จะแสดงให้เห็นว่า Googlebot ไม่รองรับ WebGL คุณแก้ไขปัญหานี้ได้โดยข้ามเอฟเฟกต์ภาพถ่ายไปหรือตัดสินใจใช้การแสดงผลฝั่งเซิร์ฟเวอร์เพื่อแสดงผลเอฟเฟกต์ภาพถ่ายล่วงหน้า ซึ่งจะทำให้ทุกคนรวมถึง Googlebot เข้าถึงเนื้อหาของคุณได้
8. ตรวจสอบว่าเนื้อหาใช้งานผ่านการเชื่อมต่อ HTTP ได้
   Googlebot ใช้คำขอ HTTP เพื่อดึงเนื้อหาจากเซิร์ฟเวอร์ของคุณ และไม่รองรับการเชื่อมต่อประเภทอื่นๆ เช่น การเชื่อมต่อ WebSockets หรือ WebRTC ในการหลีกเลี่ยงปัญหาเกี่ยวกับการเชื่อมต่อดังกล่าว โปรดระบุ HTTP สำรองเพื่อดึงเนื้อหาและใช้การจัดการข้อผิดพลาดและการตรวจหาฟีเจอร์ที่มีประสิทธิภาพ
9. ตรวจสอบว่าคอมโพเนนต์เว็บแสดงผลตามที่คาดไว้ ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียหรือเครื่องมือตรวจสอบ URL เพื่อดูว่า HTML ที่แสดงผลมีเนื้อหาทั้งหมดตามที่คุณคาดไว้หรือไม่
   WRS รวม Light DOM และ Shadow DOM เข้าด้วยกัน หากคอมโพเนนต์เว็บที่คุณใช้นั้นไม่ได้ใช้กลไก <slot> สำหรับเนื้อหา Light DOM โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบของคอมโพเนนต์เว็บ หรือใช้คอมโพเนนต์เว็บอื่นแทน ดูข้อมูลเพิ่มเติมได้ในแนวทางปฏิบัติที่ดีที่สุดสำหรับคอมโพเนนต์เว็บ
10. หลังจากแก้ไขสิ่งต่างๆ ตามรายการตรวจสอบนี้แล้ว ให้ทดสอบหน้าเว็บด้วยการทดสอบผลการค้นหาที่เป็นริชมีเดียหรือเครื่องมือตรวจสอบ URL ใน Search Console อีกครั้ง

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