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

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

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

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