Breadcrumbs คืออะไร และทำไมจึงสำคัญต่อ WordPress

Breadcrumbs (หรือลำดับชั้นการนำทาง) คือลิงก์ตั้งแต่ 3-5 ลิงก์ที่แสดงตำแหน่งของผู้ใช้บนเว็บไซต์ เช่น "หน้าหลัก > บทความ > WordPress > Breadcrumbs" Breadcrumbs มีประโยชน์หลัก 2 ประการ คือ ปรับปรุง User Experience โดยให้ผู้ใช้นำทางได้ง่ายขึ้น และช่วยให้ Google เข้าใจโครงสร้างเว็บไซต์ของคุณได้ดีขึ้น ซึ่งอาจส่งผลต่อการจัดอันดับอย่างทางอ้อม

นอกจากนี้ Breadcrumbs ยังสามารถปรากฎเป็น Rich Result (ผลลัพธ์แบบริช) ในผลการค้นหาของ Google ได้ เมื่อคุณใช้ BreadcrumbList Schema JSON-LD อย่างถูกต้อง ซึ่งทำให้หน้าของคุณเด่นกว่าคู่แข่ง

ข้อเท็จจริง: ตามรายงานของ Google ให้คำแนะนำว่า Breadcrumbs ควรมีไว้ในทุกหน้า หากโครงสร้างเว็บไซต์เป็นลำดับชั้น Breadcrumbs ที่มี BreadcrumbList Schema ถูกต้องเพิ่มโอกาส 30-40% ให้ Google แสดง Rich Result ของคุณ

อย่างไรก็ตาม ไม่ใช่ทุกเว็บไซต์ที่เหมาะสำหรับ breadcrumbs ตัวอย่างเช่น เว็บไซต์ที่มีเพียง 2-3 ระดับ breadcrumb อาจไม่ได้ประโยชน์มากนัก แต่สำหรับบล็อก, ร้านค้าออนไลน์ หรือเว็บไซต์ที่มีลำดับชั้นลึก Breadcrumbs จึงเป็นสิ่งจำเป็น

วิธีเพิ่ม Breadcrumbs ด้วย Yoast SEO

Yoast SEO เป็น plugin ที่นิยมที่สุดสำหรับการเพิ่ม Breadcrumbs เนื่องจากตั้งค่าได้ง่าย และสนับสนุนค่า BreadcrumbList Schema โดยอัตโนมัติ ขั้นตอนการตั้งค่า Breadcrumbs ใน Yoast SEO มีดังนี้

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Yoast SEO

ดาวน์โหลด Yoast SEO จาก WordPress.org repository ห่อคลิก "ติดตั้งเดี๋ยวนี้" แล้วเปิดใช้งาน จากนั้นไปที่ Dashboard ของ Yoast SEO

ขั้นตอนที่ 2: ตั้งค่า Breadcrumbs

ใน Yoast SEO Dashboard ไปที่ Yoast SEO → Settings → XML Sitemaps → Enable breadcrumbs (ปิดใช้งานเดิมอาจอยู่ที่ Tools → Breadcrumbs ในเวอร์ชันเก่า)

ขั้นตอนที่ 3: เพิ่ม Breadcrumbs ไปยัง Template

คุณต้องเพิ่มโค้ด breadcrumb template ลงใน template ของธีมของคุณ (เช่น single.php, page.php, archive.php) หากธีมของคุณยังไม่รองรับ Yoast Breadcrumbs ให้เพิ่มโค้ดนี้ที่ต้องการให้ breadcrumbs แสดง (โดยปกติคือก่อนเนื้อหาหลัก):

if ( function_exists( 'yoast_breadcrumb' ) ) { yoast_breadcrumb(); }

หมายเหตุ: ธีม WordPress สมัยใหม่ส่วนใหญ่มี hook ที่รองรับ Yoast Breadcrumbs อยู่แล้ว ดังนั้นคุณอาจไม่ต้องแก้ไข template ด้วยตนเอง เพียงเปิดใช้งานใน Yoast Settings จะสะดวกกว่า

ตั้งค่า Breadcrumbs ด้วย Rank Math

Rank Math เป็น plugin SEO ที่ทรงพลังกว่า Yoast SEO ด้านหลายอย่าง ก้สนับสนุน Breadcrumbs โดยทั่วไป และอนุญาตการปรับแต่งที่ละเอียดยิ่งขึ้น ขั้นตอนการตั้งค่า Rank Math Breadcrumbs:

ติดตั้ง Rank Math และไปที่ Settings

ดาวน์โหลด Rank Math จาก WordPress.org เปิดใช้งาน จากนั้นไปที่ Rank Math → SEO Settings → Breadcrumbs

ตั้งค่า Breadcrumbs ใน Rank Math

เพิ่ม Breadcrumbs ไปยัง Template

เหมือนกับ Yoast Rank Math มี hook รองรับ breadcrumbs สำหรับธีมสมัยใหม่ หรือใช้โค้ด:

<?php if ( function_exists( 'rank_math_the_breadcrumbs' ) ) { rank_math_the_breadcrumbs(); } ?>

ความยืดหยุ่นเต็มที่กับ Breadcrumb NavXT Plugin

Breadcrumb NavXT เป็น plugin เฉพาะทาง Breadcrumbs ที่อนุญาต control ที่ละเอียดที่สุด ถ้าหากคุณต้องการ customization ขั้นสูง Breadcrumb NavXT คือตัวเลือกที่ดี

ตั้งค่า Breadcrumb NavXT

เพิ่ม Breadcrumbs ไปยัง Theme

ใน template ที่ต้องการเพิ่มบรรทัดนี้:

<?php if ( function_exists( 'bcn_display' ) ) { bcn_display(); } ?>

คำเตือน: ถ้าคุณเปิดใช้ Breadcrumbs จาก Yoast, Rank Math และ Breadcrumb NavXT ในเวลาเดียวกัน breadcrumbs จะซ้ำกันบนหน้าเว็บ และ JSON-LD Schema อาจขัดแย้ง ดังนั้น เลือกเพียง 1 plugin เท่านั้น

เพิ่ม Breadcrumbs ลงใน Theme ด้วยตนเอง

ถ้าหากคุณต้องการเขียนโค้ด breadcrumbs ใน functions.php ของธีมเอง คุณสามารถสร้างฟังก์ชันในการแสดง breadcrumbs และเรียกใช้ได้ในที่เหมาะสม

ตัวอย่างฟังก์ชัน Custom Breadcrumbs

เพิ่มรหัสนี้ลงใน functions.php ของธีม:

function custom_breadcrumbs() {
if ( !is_home() && !is_front_page() ) {
echo '<div class="breadcrumbs"><a href="' . home_url() . '">Home</a>';
if ( is_category() ) {
echo ' › ' . single_cat_title( '', false );
} elseif ( is_single() ) {
$cat = get_the_category(); if ( $cat ) echo ' › ' . $cat[0]->name . ' › ' . get_the_title();
} elseif ( is_page() ) {
echo ' › ' . get_the_title();
}
echo '</div>';
}
}

จากนั้น เรียกใช้ฟังก์ชัน custom_breadcrumbs(); ในตำแหน่งที่ต้องการ เช่น single.php, page.php, archive.php

BreadcrumbList JSON-LD Schema — อธิบายโดยละเอียด

BreadcrumbList Schema เป็น JSON-LD ที่บอกเล่า Breadcrumbs ให้กับ Google ในรูปแบบที่เครื่องจักร (machine-readable) สามารถเข้าใจได้ เมื่อ Google อ่าน BreadcrumbList Schema ได้อย่างถูกต้อง มันจะแสดง breadcrumbs เป็น Rich Result ในผลการค้นหา

โครงสร้าง BreadcrumbList JSON-LD

ตัวอย่าง BreadcrumbList schema สำหรับบทความวิธี WordPress:

{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[
{"@type":"ListItem","position":1,"name":"Home","item":"https://example.com/"},
{"@type":"ListItem","position":2,"name":"Blog","item":"https://example.com/blog/"},
{"@type":"ListItem","position":3,"name":"WordPress","item":"https://example.com/blog/wordpress/"},
{"@type":"ListItem","position":4,"name":"How to Add Breadcrumbs","item":"https://example.com/blog/wordpress/breadcrumbs/"}
]}

อธิบายแต่ละส่วน

ข้อแนะนำ: ตรวจสอบว่า URL ใน BreadcrumbList schema ตรงกับ URL จริงของหน้า มิฉะนั้น Google อาจเสีย trust ต่อ schema ของคุณ

ทดสอบ Breadcrumbs ด้วย Google Rich Results Test

หลังจากตั้งค่า Breadcrumbs และ BreadcrumbList Schema แล้ว คุณควรทดสอบว่า Google สามารถอ่าน schema ได้ถูกต้อง โดยใช้ Google Rich Results Test

ขั้นตอนการทดสอบ

  1. ไปที่ https://search.google.com/test/rich-results
  2. วางลิงก์ URL ของหน้า WordPress ที่มี breadcrumbs
  3. คลิก "Test URL"
  4. รอให้ Google crawl หน้า (ปกติว่าไป 10-30 วินาที)
  5. ผลจะแสดว่า Rich Results ถูกตรวจพบหรือไม่ หากบรรทัดสีเขียวว่า "Breadcrumb" แสดงว่าถูกต้อง

ถ้าเห็นข้อผิดพลาด: เช่น "position ต้องเป็นจำนวนเต็ม" หรือ "item URL ต้องเป็น absolute URL" ให้ตรวจสอบ JSON-LD ตรวจสอบว่า position เป็นเลข ไม่ใช่ text, และ URL เป็น https://... ไม่ใช่ /relative/path

Breadcrumbs สำหรับ WooCommerce

ถ้า WordPress ของคุณใช้ WooCommerce ร้านค้าออนไลน์ breadcrumbs จึงสำคัญยิ่งขึ้น เพราะช่วยลูกค้านำทาง category และสินค้าได้ง่ายขึ้น WooCommerce มี breadcrumbs built-in แล้ว แต่คุณต้องตั้งค่าให้แสดง

เปิดใช้งาน Breadcrumbs ใน WooCommerce

ตัวอย่าง WooCommerce Breadcrumbs

บน WooCommerce breadcrumbs จะแสดงเช่น:

Home › Shop › Electronics › Laptop Computer (ชื่อสินค้า)

เคล็ดลับ: ใช้ Yoast SEO หรือ Rank Math แล้ว ปล่อยให้มัน generate BreadcrumbList Schema สำหรับ WooCommerce products โดยอัตโนมัติ ซึ่งดีกว่า WooCommerce default breadcrumbs ทำได้

เปรียบเทียบ Breadcrumbs Plugins

นี่คือตารางเปรียบเทียบ Breadcrumbs plugins ยอดนิยมเพื่อช่วยคุณเลือก

คุณสมบัติ Yoast SEO Rank Math Breadcrumb NavXT
ราคาฟรีฟรี (บวกตัวเลือก Pro)ฟรี
ความง่ายในการตั้งค่าง่ายมากง่ายปานกลาง
BreadcrumbList Schema✓ (อัตโนมัติ)✓ (อัตโนมัติ)✓ (อัตโนมัติ)
Customizationพื้นฐานขั้นสูงมากที่สุด
WooCommerce Support✓✓✓
Performance Impactเบาเบาเบา

สรุปง่ายๆ คือ ถ้าคุณต้องการตั้งค่าแล้ว ลืมไป ให้ใช้ Yoast SEO ถ้าต้องการ customization ปานกลาง ให้ใช้ Rank Math ถ้าต้องการเต็มที่สูงสุดให้ใช้ Breadcrumb NavXT

Best Practices สำหรับ Breadcrumbs

ล่าสุด นี่คือ best practices บางประการสำหรับ breadcrumbs เพื่อให้ได้ผลสูงสุด:

เริ่มต้นกับ AsiaGB Hosting ใช้ DirectAdmin ง่าย ติดตั้ง WordPress ได้ทันที

WordPress Hosting พร้อมใช้งาน รองรับ Yoast SEO, Rank Math และ Breadcrumb NavXT ทั้งหมด ด้วย DirectAdmin ที่ใช้งานง่าย Uptime 99% และ SSD Storage ความเร็วสูง

ดูแผน Hosting