วิธีสร้าง Custom Error Page บน IIS Windows Server 2022 ให้ดูเป็นมืออาชีพ
เมื่อเว็บไซต์เกิดปัญหา เช่น หน้าเว็บหาย ลิงก์เสีย หรือเกิดข้อผิดพลาดจากระบบ ผู้ใช้งานมักจะพบ Error Page ของ IIS ซึ่งมีหน้าตาธรรมดาและไม่ช่วยให้ผู้ใช้งานเข้าใจว่าควรทำอะไรต่อ
การสร้าง Custom Error Page ช่วยให้เว็บไซต์ดูเป็นมืออาชีพมากขึ้น เพิ่มประสบการณ์ที่ดีให้กับผู้ใช้งาน ลดอัตราการออกจากเว็บไซต์ (Bounce Rate) และช่วยรักษาภาพลักษณ์ขององค์กร
บทความนี้จะอธิบายวิธีสร้าง Custom Error Page บน IIS Windows Server 2022 แบบละเอียด พร้อมแนวทางที่เหมาะสำหรับเว็บไซต์องค์กรและเว็บไซต์ที่ต้องการทำ SEO อย่างจริงจัง
① Custom Error Page คืออะไร
Custom Error Page คือหน้าเว็บที่แสดงแทน Error มาตรฐานของ IIS
ตัวอย่าง Error ที่พบบ่อย
🔴 404 Not Found
🔴 403 Forbidden
🔴 500 Internal Server Error
🔴 401 Unauthorized
แทนที่จะเห็นข้อความระบบที่ดูเข้าใจยาก ผู้ใช้งานจะเห็นหน้าเว็บที่ออกแบบไว้โดยเฉพาะ
② ทำไมควรใช้ Custom Error Page
✅ เว็บไซต์ดูเป็นมืออาชีพ
✅ ผู้ใช้งานไม่สับสน
✅ เพิ่มความน่าเชื่อถือ
✅ ลด Bounce Rate
✅ เพิ่มโอกาสให้ผู้ใช้งานอยู่ในเว็บไซต์ต่อ
✅ ช่วยด้าน SEO ทางอ้อม
③ Error Page ที่ควรสร้าง
🌐 404 Not Found
หน้าเว็บไม่พบ
🔒 403 Forbidden
ไม่มีสิทธิ์เข้าถึง
⚠️ 500 Internal Server Error
เกิดข้อผิดพลาดภายในระบบ
👤 401 Unauthorized
ยังไม่ได้รับอนุญาต
④ สร้างไฟล์ Error Page
สร้างโฟลเดอร์
D:\Website\Errors
ตัวอย่างไฟล์
404.html
403.html
500.html
401.html
⑤ ตัวอย่างหน้า 404.html
<!DOCTYPE html>
<html>
<head>
<title>404 Not Found</title>
</head>
<body>
<h1>ไม่พบหน้าที่คุณต้องการ</h1>
<p>กรุณาตรวจสอบ URL หรือกลับสู่หน้าแรก</p>
</body>
</html>
สามารถตกแต่งด้วย CSS โลโก้ และเมนูนำทางเพิ่มเติมได้
⑥ เปิด IIS Manager
กด
inetmgr
เลือกเว็บไซต์ที่ต้องการ
⑦ เปิดเมนู Error Pages
เลือกเว็บไซต์
ดับเบิลคลิก
Error Pages
จะเห็นรายการ Error ทั้งหมดของ IIS
⑧ แก้ไข Error 404
เลือก
404
คลิก
Edit Feature Settings
หรือ
Edit
⑨ กำหนด Custom Error Page
เลือก
Respond with a File
ระบุไฟล์
D:\Website\Errors\404.html
กด OK
⑩ ตั้งค่า Error อื่น ๆ
ทำซ้ำสำหรับ
403.html
500.html
401.html
เพื่อให้ทุก Error แสดงผลอย่างสวยงาม
⑪ ทดสอบหน้า 404
เปิด URL ที่ไม่มีอยู่จริง
ตัวอย่าง
https://example.com/test-not-found
หากแสดงหน้า 404 ที่สร้างเอง ถือว่าตั้งค่าสำเร็จ
⑫ ใส่ลิงก์ช่วยเหลือใน Error Page
ตัวอย่าง
✅ กลับหน้าแรก
✅ ติดต่อผู้ดูแลระบบ
✅ ค้นหาบทความ
✅ เมนูเว็บไซต์
ตัวอย่าง HTML
<a href="/">กลับหน้าแรก</a>
ช่วยลดโอกาสที่ผู้ใช้งานจะออกจากเว็บไซต์ทันที
⑬ แนวทาง SEO สำหรับหน้า 404
Google แนะนำให้
✅ ส่ง HTTP Status Code 404 จริง
✅ มีข้อความอธิบายที่ชัดเจน
✅ มีลิงก์กลับหน้าแรก
✅ มีระบบค้นหาภายในเว็บ
❌ ไม่ควร Redirect ทุกหน้า 404 ไปหน้าแรก
เพราะอาจทำให้ Google เข้าใจผิด
⑭ สร้าง Error Page ให้เป็น Branding
ตัวอย่างที่นิยม
🎨 ใส่โลโก้บริษัท
🎨 ใส่สีประจำองค์กร
🎨 ใส่เมนูนำทาง
🎨 ใส่ช่องค้นหา
🎨 ใส่ข้อมูลติดต่อ
ช่วยให้เว็บไซต์ดูน่าเชื่อถือมากขึ้น
⑮ ตั้งค่าผ่าน web.config
ตัวอย่าง
<system.webServer>
<httpErrors errorMode="Custom">
<remove statusCode="404"/>
<error statusCode="404"
path="404.html"
responseMode="File"/>
</httpErrors>
</system.webServer>
เหมาะสำหรับการย้ายเว็บไซต์ระหว่าง Server
⑯ ตรวจสอบผ่าน Browser Developer Tools
กด
F12
ตรวจสอบ
HTTP Status Code
ควรแสดง
404
ไม่ใช่
200
⑰ ปัญหาที่พบบ่อย
❌ Error Page ไม่แสดง
สาเหตุ
Path ไม่ถูกต้อง
วิธีแก้
ตรวจสอบตำแหน่งไฟล์
❌ แสดง Error IIS เดิม
สาเหตุ
ยังไม่ได้ Override Error
วิธีแก้
ตรวจสอบ Error Pages Configuration
❌ Google Index หน้า Error
สาเหตุ
ส่ง Status Code 200
วิธีแก้
ส่ง Status Code ให้ถูกต้อง
⑱ Best Practices สำหรับ Custom Error Page
✅ ใช้ดีไซน์เดียวกับเว็บไซต์
✅ มีลิงก์กลับหน้าแรก
✅ มีช่องค้นหา
✅ ส่ง HTTP Status Code ถูกต้อง
✅ ทดสอบทุก Error Code
✅ ติดตาม Error ผ่าน Log อย่างสม่ำเสมอ
ทีมงาน comsiam มักสร้าง Custom Error Page สำหรับทุกเว็บไซต์ที่ดูแล เพราะช่วยเพิ่มประสบการณ์ผู้ใช้งานและลดการสูญเสียทราฟฟิกจากหน้าที่เสียหาย
🎯 สรุป
Custom Error Page บน IIS Windows Server 2022 เป็นองค์ประกอบสำคัญที่ช่วยให้เว็บไซต์ดูเป็นมืออาชีพ เพิ่มความน่าเชื่อถือ และช่วยให้ผู้ใช้งานสามารถใช้งานเว็บไซต์ต่อได้แม้เกิดข้อผิดพลาด
การออกแบบหน้า Error ที่ดี พร้อมส่ง HTTP Status Code อย่างถูกต้อง จะช่วยให้ทั้งผู้ใช้งานและ Google เข้าใจสถานะของเว็บไซต์ได้อย่างถูกต้อง ซึ่งเป็นแนวทางที่ comsiam แนะนำสำหรับทุกเว็บไซต์ที่ใช้งาน IIS ในระดับองค์กร