Google Search Console มักจะแจ้งเตือนข้อผิดพลาด soft 404 ในเว็บไซต์ที่ใช้ Next.js ซึ่งอาจทำให้เสีย crawl budget ไปโดยเปล่าประโยชน์

Soft 404 คืออะไรกันแน่

การตอบสนองแบบ 404 จริงจะส่ง HTTP 404 status code เพื่อบอกเบราว์เซอร์และบอทว่าทรัพยากรที่ร้องขอไม่มีอยู่จริง ในทางตรงกันข้าม Soft 404 จะส่งสถานะ 200 OK กลับมาทั้งที่แทบไม่มีเนื้อหาหรือไม่มีเนื้อหาเลย Search engine จะอ่านค่า 200 ว่าเป็นหน้าเว็บที่ปกติ แต่หน้าเว็บนั้นกลับไม่มีประโยชน์ใดๆ ผลลัพธ์ที่ได้คือการเสียรอบการ crawl ไปโดยเปล่าประโยชน์ และเป็นการส่งสัญญาณให้ Google ทราบว่าคุณภาพเนื้อหาของเว็บไซต์นั้นต่ำ

ทำไม Next.js ถึงตกหลุมพรางนี้

ระบบ dynamic routing ของ Next.js ช่วยให้คุณแสดงหน้าเว็บอย่าง /products/[slug] ได้โดยไม่ต้องเขียน URL ทุกตัวแบบ hard-code เมื่อสินค้าหายไปจากฐานข้อมูล คอมโพเนนต์จะยังคงเรนเดอร์อยู่ และหากโค้ดไม่ได้ตรวจสอบข้อมูลที่ขาดหายไป Next.js จะตอบกลับด้วย 200 OK โดยค่าเริ่มต้น สิ่งเดียวกันนี้เกิดขึ้นเมื่อผู้ใช้พิมพ์ URL ผิด หรือเมื่อมี route เก่าค้างอยู่หลังจากการปรับปรุงดีไซน์ใหม่ หน้าเว็บจะโหลดขึ้นมาแต่ไม่มีเนื้อหาที่มีความหมาย ซึ่งจะไปกระตุ้นการแจ้งเตือน soft 404 ใน Search Console

ผลกระทบต่อเจ้าของเว็บไซต์

  • การเสีย crawl budget – บอทจะจัดสรรจำนวนการร้องขอ (requests) ต่อเว็บไซต์ในจำนวนที่จำกัด Soft 404 จะกัดกินโควตานั้น ทำให้เหลือโอกาสน้อยลงสำหรับหน้าเว็บจริงๆ ที่จะถูกทำดัชนี (indexed)
  • บทลงโทษด้าน SEO – การเกิด soft 404 ซ้ำๆ จะบอก search engine ว่าเว็บไซต์มีคุณภาพต่ำ
  • ผลกระทบต่อประสบการณ์ผู้ใช้ – ผู้เข้าชมที่เข้ามาเจอหน้าว่างจะกดออกจากเว็บไซต์ทันที (bounce) ซึ่งจะทำให้ bounce rate สูงขึ้นและส่งผลเสียต่ออัตราการเปลี่ยนเป็นลูกค้า (conversions)

วิธีเปลี่ยน soft 404 ให้เป็น 404 ที่ถูกต้อง

1. ใช้ helper notFound ที่มีมาให้ในตัว

  • App Router – นำเข้า (import) notFound จาก next/navigation หลังจากดึงข้อมูล (fetching data) ให้เรียกใช้ notFound() หากไม่พบผลลัพธ์ จากนั้น Next.js จะส่งสถานะ 404 ที่แท้จริงกลับไป
  • Pages Router – ส่งค่า { notFound: true } กลับมาจาก getStaticProps หรือ getServerSideProps เมื่อการดึงข้อมูลล้มเหลว ซึ่งจะให้ผลลัพธ์แบบเดียวกันสำหรับ routing API รุ่นเก่า

2. ติดตั้งหน้า 404 แบบกำหนดเอง (custom 404 page)

หน้า error เริ่มต้นจะทำให้ผู้ใช้รู้สึกเคว้งคว้าง ควรสร้าง app/not-found.js (App Router) หรือ pages/404.js (Pages Router) พร้อมกับลิงก์นำทาง กล่องค้นหา หรือคำแนะนำเนื้อหาที่เกี่ยวข้อง หน้า 404 ที่ออกแบบมาอย่างดีจะช่วยให้ผู้เข้าชมยังคงอยู่ในเว็บไซต์แทนที่จะส่งพวกเขาออกไปทันที

3. จัดการกับ orphaned routes (เส้นทางที่ไม่ได้ใช้งานแล้ว)

ลบหน้า static ที่ไม่มีความจำเป็นอีกต่อไป หากยังมีไฟล์อยู่แต่เนื้อหาว่างเปล่า ให้เพิ่มการตอบสนองแบบ notFound หรือลบไฟล์นั้นทิ้งไปเลย การตรวจสอบไดเรกทอรี pages หรือ app อย่างสม่ำเสมอจะช่วยป้องกันไม่ให้ URL ที่ใช้งานไม่ได้หลุดรอดออกไป

4. ตั้งค่าการเปลี่ยนเส้นทางแบบถาวร (301 redirect) สำหรับเนื้อหาที่ย้ายที่อยู่

เมื่อ URL ของหน้าเว็บเปลี่ยนไป การทำ 301 redirect จะบอกเบราว์เซอร์และบอทว่าทรัพยากรนั้นได้ย้ายที่อยู่ไปอย่างถาวรแล้ว คุณสามารถเพิ่ม redirects ใน next.config.js ภายใต้ key redirects วิธีนี้จะช่วยป้องกันไม่ให้ URL เก่าส่งสถานะ 200 กลับมาโดยไม่มีเนื้อหา

5. ตรวจสอบและดำเนินการตามการแจ้งเตือนใน Search Console

หมั่นตรวจสอบ Google Search Console บ่อยๆ เพื่อตรวจหา soft 404 ใช้ automated crawler เพื่อค้นหาข้อผิดพลาดใหม่ๆ ก่อนที่จะสะสมมากขึ้น ให้ถือว่าการแจ้งเตือนแต่ละครั้งเป็นสัญญาณให้เข้าไปตรวจสอบตรรกะ (logic) การดึงข้อมูลที่อยู่เบื้องหลัง

สรุป

หน้าเว็บที่ส่งสถานะ 200 OK กลับมาทั้งที่ไม่มีเนื้อหาจะค่อยๆ บั่นทอนมูลค่าทาง SEO ไปอย่างเงียบๆ ใน Next.js การใช้ dynamic routes และการดึงข้อมูลที่ไม่ได้ตรวจสอบอาจทำให้เกิด soft 404 ได้บ่อยครั้ง แต่คุณสามารถกำจัดมันได้ โดยการใช้ notFound, สร้างหน้า 404 แบบกำหนดเองที่มีประโยชน์, ลบ orphaned routes, ตั้งค่า 301 redirects และคอยเฝ้าระวังใน Search Console เพื่อปกป้อง crawl budget, รักษาอันดับ และรักษาผู้เข้าชมให้อยู่ในเว็บไซต์ต่อไป