ทำความเข้าใจหลักการพื้นฐานของ JavaScript SEO

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

คู่มือนี้อธิบายวิธีที่ Google Search ประมวลผล JavaScript และแนวทางปฏิบัติที่ดีที่สุดในการปรับปรุงเว็บแอป JavaScript สำหรับใช้กับ Google Search

วิธีที่ Googlebot ประมวลผล JavaScript

Googlebot ประมวลผลเว็บแอป JavaScript ใน 3 ช่วงหลักๆ ได้แก่

  1. การรวบรวมข้อมูล
  2. การแสดงผล
  3. การจัดทำดัชนี

Googlebot รวบรวมข้อมูล แสดงผล และจัดทำดัชนีหน้าเว็บ

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

เมื่อ Googlebot ดึง URL จากคิวการรวบรวมข้อมูลด้วยการสร้างคำขอ HTTP ก็จะตรวจสอบก่อนว่าคุณอนุญาตให้รวบรวมข้อมูลไหม โดยการอ่านไฟล์ robots.txt หากไฟล์ทำเครื่องหมายว่าไม่อนุญาต URL ใด Googlebot จะข้ามการสร้างคำขอ HTTP ไปยัง URL นั้นและข้าม URL นั้นไป

จากนั้น Googlebot จะแยกวิเคราะห์การตอบกลับของ URL อื่นๆ ในแอตทริบิวต์ href ของลิงก์ HTML และเพิ่ม URL ในคิวการรวบรวมข้อมูล หากไม่ต้องการให้ค้นพบลิงก์ ให้ใช้กลไก nofollow

การรวบรวมข้อมูล URL และการแยกวิเคราะห์การตอบกลับ HTML ทำงานได้ดีกับเว็บไซต์แบบดั้งเดิมหรือหน้าเว็บที่แสดงผลฝั่งเซิร์ฟเวอร์ซึ่ง HTML ในการตอบกลับ HTTP มีเนื้อหาทั้งหมด เว็บไซต์ JavaScript บางเว็บอาจใช้รูปแบบ App Shell ซึ่ง HTML เริ่มต้นไม่มีเนื้อหาจริงและ Googlebot ต้องเรียกใช้ JavaScript ก่อนจึงจะดูเนื้อหาจริงของหน้าเว็บที่ JavaScript สร้างได้

Googlebot จัดคิวหน้าเว็บทั้งหมดสำหรับการแสดงผล เว้นแต่ว่าเมตาแท็ก robots และส่วนหัวจะบอกให้ Googlebot ไม่ต้องจัดทำดัชนีหน้าเว็บหนึ่งๆ หน้าเว็บดังกล่าวจะอยู่ในคิว 2-3 วินาทีหรืออาจนานกว่านั้น เมื่อ Googlebot มีทรัพยากรพร้อม Chromium แบบไม่มีส่วนหัวจะแสดงผลหน้าเว็บและเรียกใช้ JavaScript จากนั้นจึงแยกวิเคราะห์ HTML ที่แสดงผลสำหรับลิงก์อีกครั้งและจัดคิว URL ที่พบเพื่อรวบรวมข้อมูล นอกจากนี้ Googlebot ยังใช้ HTML ที่แสดงผลเพื่อจัดทำดัชนีหน้าเว็บด้วย

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

อธิบายหน้าเว็บโดยใช้ชื่อและตัวอย่างข้อมูลที่ไม่ซ้ำกัน

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

คุณใช้ JavaScript เพื่อตั้งค่าหรือเปลี่ยนคำอธิบายเมตาและชื่อได้

เขียนโค้ดที่เข้ากันได้

เบราว์เซอร์มี API และ JavaScript จำนวนมากที่เป็นภาษาที่พัฒนาขึ้นใหม่อยู่ตลอด Googlebot มีข้อจำกัดบางอย่างเกี่ยวกับฟีเจอร์ของ API และ JavaScript ที่รองรับ โปรดทำตามหลักเกณฑ์การแก้ปัญหา JavaScript เพื่อให้โค้ดของคุณใช้ร่วมกับ Googlebot ได้

ใช้รหัสสถานะ HTTP ที่มีความหมาย

Googlebot ใช้รหัสสถานะ HTTP เพื่อให้ทราบว่าเกิดข้อผิดพลาดเมื่อรวบรวมข้อมูลหน้าเว็บหรือไม่

คุณควรใช้รหัสสถานะที่มีความหมายเพื่อบอก Googlebot หากไม่ต้องการให้รวบรวมข้อมูลหน้าเว็บหรือจัดทำดัชนี ตัวอย่างเช่น ใช้รหัส 404 กับหน้าเว็บที่ค้นหาไม่ได้ หรือรหัส 401 กับหน้าเว็บที่อยู่หลังการเข้าสู่ระบบ คุณใช้รหัสสถานะ HTTP เพื่อแจ้ง Googlebot ในกรณีที่หน้าเว็บย้ายไปยัง URL ใหม่ได้ เพื่อให้มีการอัปเดตดัชนีตามนั้น

ต่อไปนี้เป็นรายการรหัสสถานะ HTTP และกรณีที่ควรใช้

สถานะ HTTP กรณีที่ควรใช้
301 / 302 หน้าเว็บนี้ย้ายไปยัง URL ใหม่แล้ว
401 / 403 หน้าเว็บไม่พร้อมใช้งานเนื่องจากมีปัญหาเกี่ยวกับสิทธิ์
404 / 410 หน้าเว็บใช้ไม่ได้แล้ว
5xx เกิดข้อผิดพลาดที่ฝั่งเซิร์ฟเวอร์

ใช้เมตา robots แท็กอย่างระมัดระวัง

คุณป้องกันไม่ให้ Googlebot จัดทำดัชนีหน้าเว็บหรือติดตามลิงก์โดยใช้เมตา robots แท็กได้ ตัวอย่างเช่น การเพิ่มเมตาแท็กต่อไปนี้ไว้ที่ด้านบนของหน้าจะบล็อก Googlebot ไม่ให้จัดทำดัชนีหน้า

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

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

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

เมื่อ Googlebot พบ noindex ในเมตาแท็ก robots ก่อนเรียกใช้ JavaScript จะไม่มีการแสดงผลหรือจัดทำดัชนีหน้าเว็บ

แก้ไขรูปภาพและเนื้อหาที่โหลดแบบ Lazy Loading

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