สร้างหน้า 404 Custom ใน WordPress: UX ดีและ SEO ดี 2026

ทำไม Custom 404 Page ถึงสำคัญ?

หน้า 404 error คือหน้าที่ user เห็นเมื่อพวกเขาพยายามเข้าหา page ที่ไม่มีอยู่จริง ไม่ว่าจะเป็นเพราะ user พิมพ์ URL ผิด, link เสีย, หรือ content เก่าที่ถูกลบไปแล้ว Default WordPress 404 page มันเปล่า ๆ แค่บรรทัดข้อความเล็ก ๆ ว่า "Page Not Found" ซึ่งทำให้ user รู้สึกหงุดหงิดและ bounce ออกจากเว็บทันที

ตามสถิติ website ที่มี custom 404 page มี bounce rate ต่ำกว่า 30-40% เมื่อเทียบกับ default 404 page ที่อาจมี bounce rate สูงถึง 60-70% นอกจากนี้ custom 404 page ที่ออกแบบดี ยังช่วย SEO ได้อีก เพราะ Google จะเห็นว่า website ของคุณ handle 404 errors อย่างไร ถูกต้อง ซึ่ง affect ranking ได้

คุณสามารถสร้าง custom 404 page ได้หลายวิธี: ใช้ page builder เช่น Elementor, ใช้ plugin เฉพาะ 404page, หรือแก้ไข 404.php template โดยตรง แต่ละวิธีมีข้อดี ข้อเสีย และความซับซ้อนต่าง ๆ กัน

WordPress Default 404 Page — ทำไมถึง "ไม่พอใจ"?

WordPress มี default 404 page built-in ที่ปรากฏเมื่อ user พยายามเข้าหา URL ที่ไม่มีอยู่ Page นี้แสดง "Sorry, but nothing matched your search terms" ท่า message เท่านั้น ไม่มี search box, ไม่มี suggestion, ไม่มี navigation back ไปที่หน้าเก่า ส่วนใหญ่มันแค่ whitespace เปล่า ๆ ที่ทำให้ user สับสนและ confusion

Default 404 page ยังมีปัญหาเรื่อง HTTP status code ถ้าไม่ได้ config ถูก website อาจส่ง HTTP 200 (OK) แทนที่จะ 404 ซึ่ง Google จะเห็นเป็น "soft 404" และ crawl efficiency ลดลง

Default WordPress 404 ที่มี Template Theme

Theme ส่วนใหญ่มี 404.php template ที่ customize แล้ว ส่วนดี ๆ ก็มี search box และ related posts suggestions แต่ว่า theme ที่ปลอมปลน ก็อาจมีแค่ plain page ไม่มี content ตัวอื่น การ custom 404 page ให้ดีขึ้น คุณต้องแก้ file 404.php หรือใช้ plugin ช่วย

วิธี 1: ใช้ Page Builder — Elementor 404 Page

Page builder เช่น Elementor ช่วยให้สร้าง 404 page ได้ง่ายขึ้น โดยไม่ต้องแก้โค้ด ใช้ drag-drop interface สร้างหน้า 404 ที่สวย ๆ พร้อม button, image, custom text ได้ทั้งหมด

ขั้นตอนสร้าง 404 Page ด้วย Elementor

1. ติดตั้ง Elementor Pro (ต้องมี license paid)
2. เข้า Elementor Settings → Tools → Error Pages
3. เลือก "404 Template" คลิก "Create New Template"
4. Elementor editor จะ open ขึ้นมา drag-drop element ที่ต้องการ: heading, paragraph, search widget, button ไปยัง home page
5. Design ตามต้องการ: สี, font, layout, animation
6. Save template → publish
7. ไป WordPress Settings → Reading → check "This is the 404 page template"
8. เสร็จสิ้น Elementor จะ automatically apply template นี้ไปยังทุก 404 error

วิธี 2: ใช้ 404page Plugin

404page plugin เป็น plugin ที่ออกแบบมาโดยเฉพาะเพื่อสร้าง custom 404 page โดยไม่ต้อง page builder heavyweight ใช้ด้วยมือไม่ต้องเขียนโค้ด

การติดตั้ง 404page Plugin

1. ไปที่ WordPress Admin > Plugins > Add New
2. ค้นหา "404page" (version free)
3. คลิก "Install Now" แล้ว "Activate"
4. ไปที่ 404page Settings (หรือในเมนู Tools)
5. เลือก "Create a Custom 404 Page" คลิก "Create"
6. Plugin จะสร้าง new page ขึ้นมา ชื่อ "404 Error Page"
7. Edit page นี้ด้วย WordPress editor หรือ page builder: เพิ่ม text, image, button, search widget ตามต้องการ
8. Publish page
9. ย้อนกลับไป 404page Settings เลือก page ที่สร้างไว้ บอก plugin ว่า "This is my 404 page"
10. Save → เสร็จสิ้น

ตัวเลือก Settings ของ 404page

404page plugin มี settings ดังต่อไปนี้:

• Display search form: enable เพื่อแสดง search box อัตโนมัติ ถ้า disable ต้องเพิ่ม search widget เอง
• Display random posts: บอก plugin แสดง random posts ขนาด thumbnail ใหม่ ๆ เพื่อให้ user เลือกอ่าน
• Display popular posts: แสดง popular posts แทน random (based on view count)
• Display related posts: ตามชื่อ ไม่มี plugin free version
• Custom CSS: เพิ่ม custom CSS ถ้าต้องการเปลี่ยนสไตล์ของ search form

วิธี 3: Customizing 404.php Template — Advanced

ถ้าคุณสุขสบาย code ตัวเอง สามารถ edit 404.php template file ได้โดยตรง โดย SSH หรือ File Manager ใน DirectAdmin หลัก ๆ:

ที่อยู่ของ 404.php Template

ไฟล์ template อยู่ที่: /wp-content/themes/[theme-name]/404.php

ถ้า theme ไม่มี 404.php WordPress จะแสดง default 404 page ตามที่สร้างใน index.php ถ้าคุณต้องการให้เว็บแสดง custom 404 page ต้องสร้าง 404.php file เอง

ตัวอย่าง 404.php Template ที่ Custom

Template นี้แสดง heading "Page Not Found", search box, และ latest posts suggestions:

<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<h1>หน้าไม่พบ (404)</h1>
<p>ขออภัย หน้าที่คุณค้นหาไม่มีอยู่ </p>
<?php get_search_form(); ?>
<h2>บทความเป็นที่นิยม</h2>
<?php
  $args = array( 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC' );
  $posts = get_posts( $args );
  foreach( $posts as $post ) : setup_postdata( $post );
  ?>
<article><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></article>
<?php endforeach; wp_reset_postdata(); ?>
</main>
</div>
<?php get_footer(); ?>

วิธี 4: ใช้ Divi Theme — Built-in 404 Template

Theme ที่มี page builder built-in เช่น Divi, Genesis, Astra เป็นต้น มี 404 template feature ตัวเอง ซึ่ง drag-drop ได้เลยไม่ต้อง plugin

Divi example:
1. ไปที่ Divi > Theme Options > Advanced
2. เลือก "Use custom 404 page" checkbox
3. เลือก page ที่สร้างไว้ (สร้างด้วย Divi builder)
4. Save → เสร็จสิ้น

ติดตั้ง Search Box ใน 404 Page

Search box คือ component ที่ต้องมีใน 404 page เพราะช่วยให้ user ค้นหาบทความ/product ที่พวกเขาต้องการได้ทันที ลดลง bounce rate

วิธีเพิ่ม Search Box

ใน Elementor: drag-drop "Search" widget → Save
ใน page editor: ใช้ block "Search" จาก Gutenberg
ใน code: <?php get_search_form(); ?>

คุณสามารถ customize search form ได้ด้วย CSS ให้มีขนาดใหญ่ สี attractive ตรงกับ brand ได้

เพิ่ม Suggested Posts/Pages ลงใน 404 Page

นอก search box แล้ว ควรจะมี suggestions ของ latest posts หรือ popular posts เพื่อให้ user มีตัวเลือกอื่น ๆ นอกจาก search

ตัวเลือก Suggestions

• Latest Posts: แสดง 5-8 blog post ล่าสุด ช่วยให้ user รู้มี content อะไรบ้างบน website
• Popular Posts: ตามชื่อ แสดง post ที่มี view มากที่สุด ใช้ Jetpack Popular Posts plugin ช่วย
• Category Posts: ถ้า user มาจาก specific category URL ให้ link กลับไปยัง category นั้น
• Related Products (WooCommerce): ถ้า site มี shop ให้แสดง random products แทน blog posts

ใช้ 404page plugin settings ตั้ง "Display latest posts" หรือ "Display popular posts" → plugin จะ auto-fetch posts เอง

ใช้ Redirection Plugin เพื่อลด 404 Errors

Redirection plugin ช่วยเปลี่ยน 404 error ให้ไป 301 redirect ไปยัง page ที่มี content จริง แทนที่จะให้ user เห็น 404 error

Redirection Plugin Setup

1. ติดตั้ง Redirection plugin (WordPress Plugins > Add New > Search "Redirection")
2. Activate → ไปที่ Tools > Redirection
3. คลิก "Add New Redirect"
4. กรอก URL เก่า (source) ที่ต้องการ redirect: เช่น /old-post/
5. กรอก URL ใหม่ (target): เช่น /new-post/
6. เลือก "301 Moved Permanently" เพื่อบอก Google ว่า permanent redirect
7. Save → เสร็จสิ้น

Redirection plugin ยังมี feature tracking 404 errors — ทำให้คุณเห็นว่า URL ไหนที่ user พยายามเข้าหาเยอะที่สุด เพื่อคุณได้ตั้ง redirect ได้อย่างเหมาะสม

Tracking 404 Errors ด้วย Google Analytics 4

การ track 404 errors บน analytics ช่วยให้คุณเห็นว่า page ไหนถูกค้นหาเยอะ แต่พบว่า 404 ส่วนนี้ช่วยในการ SEO optimization

ตั้ง GA4 404 Tracking

วิธี 1: MonsterInsights plugin (ง่ายสุด)
1. ติดตั้ง MonsterInsights plugin
2. ไปที่ Insights > Settings > Advanced
3. Enable "Track 404 Errors" → Save
4. ไปที่ GA4 > Engagement > Events → filter เลือก "404_error_page"

วิธี 2: GTM (Google Tag Manager) - advanced
1. สร้าง trigger สำหรับ 404 page ใน GTM
2. สร้าง event ที่บอก GA4 ว่า "404 page viewed"
3. Save → publish GTM container
4. GA4 report บอก event นี้ได้

วิธี 3: Code ตรง ใน 404.php
เพิ่ม code ลงใน 404.php ที่บอก GA4 ว่า "404 error page":
<script>gtag('event', '404_error', { 'page_title': document.title, 'page_location': window.location.href }); </script>

Monitoring 404 Errors ด้วย Broken Link Checker Plugin

Broken Link Checker plugin ช่วยค้นหา broken links (ลิงค์ที่ชี้ไปยัง 404 pages) ภายในเว็บของคุณ โดยอัตโนมัติ เมื่อหา broken links พบ plugin บอก คุณสามารถแก้ไขหรือ redirect ได้ทันที

ติดตั้ง Broken Link Checker

1. ติดตั้ง Broken Link Checker plugin
2. Activate → ไปที่ Tools > Broken Links
3. Plugin จะ scan website ตามที่ตั้งให้: hourly, daily, weekly
4. แสดง report ของ broken links พบ
5. คลิก link → edit post → แก้ไข URL หรือลบ link → Save

ตรวจสอบว่า 404 Page ของคุณ Output HTTP Status 404

สิ่งสำคัญคือ 404 page ต้อง output HTTP status code 404 (Not Found) ไม่ใช่ 200 (OK) ในการ check:

1. ใช้ Chrome DevTools: Press F12 > Network tab > Type fake URL ลงใน address bar > ดู status column ว่าแสดง 404 ไหม
2. ใช้ curl command: curl -I https://yoursite.com/fake-page-1234 → ดู "HTTP/2 404" บรรทัด
3. ใช้ online tool: https://httpstatus.io/ > ป้อน fake URL → แสดง status code

Best Practices สำหรับ 404 Page Design

• Heading ชัดเจน: บอก user ว่า "Page Not Found" หรือ "Oops! Page Not Found" ใจเย็น ๆ
• คำอธิบายเพิ่มเติม: อธิบายว่าทำไม user ถึงเห็น page นี้ (URL ไม่มี, ลบไปแล้ว, พิมพ์ผิด)
• Search Box หลัก: ให้สำคัญกว่า suggestions
• Button Home: "Back to Home" button ให้เห็นชัด สำหรับ user ที่รีบร้อน
• Latest/Popular Content: แสดง suggestions เพื่อให้ user browse อื่น ๆ
• ใหญ่สำหรับมือถือ: 404 page ต้อง mobile responsive ดี ๆ สำหรับ mobile user
• Brand Consistency: ใช้ logo, color, font เดียวกับ website
• Fun Character (optional): ก็หรือชอบได้เพิ่ม illustration, emoji ให้ 404 page น่ารัก playful (Slack, GitHub style)

SEO Impact ของ Custom 404 Page

Custom 404 page ที่ได้ออกแบบดี ช่วย SEO ได้หลายด้าน:

• Crawl Efficiency: Google crawl 404 page ได้รึเร็ว เพราะ HTTP 404 status ถูกต้อง ทำให้ crawl budget ใช้ได้ efficient
• User Engagement: 404 page ที่ดีลด bounce rate ยืดอายุเวลา user บน site ทำให้ signal ดี ไป Google
• Backlink Authority: ถ้า user ตัดสินใจกด link อื่น บน 404 page หรือ follow "Related Posts" link authority flowing ไป page นั้น
• Soft 404 Detection: 404 page ที่ out HTTP 404 ทำให้ Google ไม่สับสน distinguish จาก real pages