Blog
Faceted Navigation
"Faceted Navigation" ในเว็บ E-Commerce: ออกแบบ Filter ให้ดีต่อ UX และไม่ทำร้าย SEO
🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

"Faceted Navigation" ในเว็บ E-Commerce: ออกแบบ Filter ให้ดีต่อ UX และไม่ทำร้าย SEO

By Tanakit Chaithip
July 29, 2025
ยาวไป อยากเลือกอ่าน?
Faceted Navigation

ทำ Faceted Navigation ให้ติดอันดับและไม่พัง SEO: เปิด index เฉพาะ “คอมโบที่มีดีมานด์และเนื้อหาเฉพาะ”, ใส่ rel=canonical ให้สม่ำเสมอ, ใช้ noindex กับคอมโบผันแปร/ซ้ำซ้อน, บล็อกพารามิเตอร์ที่สร้าง URL ไร้ที่สิ้นสุดด้วย robots.txt, ตั้งโครง URL และ pagination ให้คงที่ และทดสอบ CWV/INP สม่ำเสมอ.

Faceted Navigation สำหรับอีคอมเมิร์ซ: ทำให้ “หาเจอไว” โดยไม่ทำ SEO พัง

Executive view เป้าหมายคือ ค้นหาเจอไว + โหลดไว + ทำดัชนีถูก. ใช้หลักจาก Google Search Central เรื่องการจัดการ faceted URLs/crawl budget/URL structure และใช้แนวทาง UX ของ NN/g กับ Baymard เพื่อออกแบบฟิลเตอร์บนมือถือให้ใช้งานจริง

ปัญหายอดฮิต → สัญญาณ → วิธีแก้ (ตามมาตรฐาน)

ปัญหา สัญญาณ แนวแก้ที่แนะนำ
URL แตกตัวไม่สิ้นสุด Crawl budget สูญเปล่า, URLs มากผิดปกติใน GSC บล็อกพารามิเตอร์ที่สร้างช่องว่างอินฟินิตี (เช่น sort/view/session) ด้วย robots.txt; สำหรับชุดที่ยังต้องเข้าถึง ให้ใช้ noindex บนเพจแทนการบล็อก
ดัชนีสับสน/ดับเบิล รายงาน “Duplicate, Google chose different canonical” กำหนด rel=canonical อย่างสอดคล้อง (self-referencing บนแต่ละหน้า listing และ canonical ไปหน้าแม่สำหรับคอมโบบางประเภท)
UX ฟิลเตอร์บนมือถือไม่ชัด อัตราใช้งานฟิลเตอร์ต่ำ, ออกกลางทางสูง ใช้ลายมือ mobile “filter tray”/overlay, แสดงผลรวมรายการแบบเรียลไทม์, มีปุ่ม Apply / Clear all, และ chips โชว์ตัวเลือกที่กำลังใช้
หน้าโหลดช้า INP/LCP แดงใน CWV ลดสคริปต์หนัก, ทำ partial render, cache server-side และ preload asset สำคัญ

อะไร “ควร index” / “ควร noindex” / “ควร block”

ประเภทคอมโบ ตัวอย่าง คำแนะนำ เหตุผล
Facet มีดีมานด์เฉพาะ แบรนด์ยอดนิยม + หมวดหลัก (เช่น Nike รองเท้าวิ่ง) index พร้อม Title/H1 เฉพาะ และคำอธิบายสั้น ตอบเจตนา long-tail ที่ผู้ใช้ค้นจริง เพิ่มความเกี่ยวข้องของหน้า
คอมโบจุกจิก/จัดเรียง/มุมมอง sort, view=grid/list, itemsPerPage block ใน robots.txt สร้าง URL ไร้ที่สิ้นสุด ไม่ได้เพิ่มคุณค่าการค้นหา
คอมโบซ้ำซ้อน/ผันแปรเล็กน้อย สี=ดำ + แบรนด์=เล็กมาก noindex, follow (อย่าบล็อก robots) ให้บ็อตเข้าถึงเพื่ออ่าน noindex และตามลิงก์ภายในต่อ
หน้า pagination ?page=2, /page/3 index + canonical แบบ self-referencing ให้ค้นพบสินค้าลึก ๆ; ระบุ canonical สม่ำเสมอ

โครง URL & canonical ที่ปลอดภัย

  • โครงฐานคงที่ เช่น /running-shoes/ + พารามิเตอร์มีลำดับแน่นอน (ป้องกันคอมโบซ้ำคนละลำดับ)
  • คุมตัวพิมพ์เล็ก/ตัวคั่นเครื่องหมายให้สม่ำเสมอ และหลีกเลี่ยง session-ID ใน URL
  • หน้า facet ที่อนุญาตให้ index ควรมี Title/H1/คำเกริ่นเฉพาะ ไม่ใช่แค่รายการสินค้า

ตัวอย่างโค้ด (canonical + noindex)

<!-- หน้า /running-shoes/?brand=nike -->
<link rel="canonical" href="https://www.example.com/running-shoes/?brand=nike">

<!-- หน้าคอมโบจุกจิก: sort/view -->
<meta name="robots" content="noindex,follow">

UX สำหรับฟิลเตอร์ (มือถือเป็นหลัก)

  • Filter tray บนมือถือ: สไลด์โอเวอร์เต็มจอ มีหัวเรื่อง, จำนวนผลลัพธ์, ปุ่ม Apply/Clear ทั้งบนและล่าง
  • Chips แสดงตัวเลือกที่ใช้อยู่ + ปุ่มล้างทีเดียว
  • Accessible: group/label ชัด, ลำดับโฟกัสคาดเดาได้, ข้อความอ่านได้ด้วยรีดเดอร์ (ตาม WCAG 2.2)
  • ไม่สาดรีเฟรช: apply แบบรวมชุด (หรืออัปเดตผลพร้อม counter) เพื่อลด INP

ขั้นตอนทำ Faceted Navigation ให้ปลอดภัย (7 ขั้น)

  1. ทำรายการ facet ที่มีดีมานด์จริง (จาก Search Console/คำค้นภายใน)
  2. ออกแบบโครง URL + นโยบาย index/noindex/block ต่อ facet
  3. ตั้ง rel=canonical ให้สอดคล้อง รวมถึงหน้าที่มี pagination
  4. บล็อกพารามิเตอร์ที่สร้างช่องว่างอินฟินิตีใน robots.txt
  5. ทำ UX ฟิลเตอร์มือถือ: tray, chips, result count, Apply/Clear
  6. วัดผล: CWV (LCP/INP/CLS), CTR หน้าฟิลเตอร์, Completion อีเวนต์
  7. รีวิวดัชนีทุกเดือน: Duplicate/Alternate canonical, Indexed/Excluded

บริการที่เกี่ยวข้อง (Internal Links)

แชร์

Recent Blog

5 ขั้นตอนสร้างเว็บไซต์ E-Commerce ที่ทำให้ยอดขายพุ่งสูงทันที

เคยรู้สึกว่าเว็บไซต์ของคุณไม่ดึงดูดลูกค้าไหม? มาดู 5 ขั้นตอนง่ายๆ ที่จะช่วยแก้ปัญหานี้และทำให้ยอดขายพุ่งสูงขึ้น! อ่านต่อ...

ดูเพิ่มเติม
เคล็ดลับการออกแบบเว็บไซต์ด้วย Webflow: เพิ่มความเร็วและประสิทธิภาพทันที
เคล็ดลับการออกแบบเว็บไซต์ด้วย Webflow: เพิ่มความเร็วและประสิทธิภาพทันที

เว็บไซต์ของคุณช้าอยู่หรือเปล่า? หากใช่ นี่คือปัญหาที่คุณต้องแก้ไขเพื่อให้ลูกค้าไม่ออกจากเว็บไซต์ อ่านต่อเพื่อค้นพบเคล็ดลับการออกแบบที่ช่วยเพิ่มความเร็ว!

ดูเพิ่มเติม
5 เหตุผลที่เว็บไซต์ของคุณควรปรับปรุงเพื่อเพิ่มผลลัพธ์ทันที
5 เหตุผลที่เว็บไซต์ของคุณควรปรับปรุงเพื่อเพิ่มผลลัพธ์ทันที

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

ดูเพิ่มเติม