เพิ่ม Breadcrumb Schema ให้แสดงเส้นทางในผลค้นหา

ในผลการค้นหาของ Google คุณจะเห็นบางเว็บแสดงเส้นทางแบบ example.com › บทความ › เทคโนโลยี แทนที่จะเป็น URL ยาว ๆ นั่นคือผลของ Breadcrumb Schema

ประโยชน์มีสองด้าน ผู้ค้นหาเข้าใจได้ทันทีว่าหน้านี้อยู่ส่วนไหนของเว็บซึ่งเพิ่มโอกาสคลิก และ Google เข้าใจโครงสร้างเว็บดีขึ้นซึ่งช่วยเรื่องการจัดอันดับ

สิ่งที่ต้องเตรียม

• สิทธิ์แก้ไขโค้ดของเว็บ
• โครงสร้างหมวดหมู่ของเว็บที่ชัดเจน

ขั้นตอนที่ 1: เขียน JSON-LD

Google แนะนำให้ใช้รูปแบบ JSON-LD เพราะแยกจาก HTML จึงแก้ไขง่ายและไม่กระทบการแสดงผล

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "หน้าแรก",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "บทความ",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "เทคโนโลยี",
      "item": "https://example.com/blog/technology/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "วิธีตั้งค่า Firewall บน Linux"
    }
  ]
}
</script>

กฎที่ต้องทำตาม

• position ต้องเริ่มจาก 1 และเรียงต่อเนื่องไม่ข้าม
• รายการสุดท้ายซึ่งคือหน้าปัจจุบัน ไม่ต้องใส่ item เพราะไม่ควรลิงก์ไปที่ตัวเอง
• URL ใน item ต้องเป็นแบบเต็มและเข้าถึงได้จริง
• ลำดับต้องสะท้อนโครงสร้างจริง ไม่ใช่ยัดคำค้นหาเข้าไป

ขั้นตอนที่ 2: แสดงเส้นทางให้ผู้ใช้เห็นด้วย

Google แนะนำให้มีเส้นทางที่ผู้ใช้เห็นบนหน้าเว็บด้วย ไม่ใช่มีแค่ข้อมูลโครงสร้างที่ซ่อนอยู่

<nav aria-label="เส้นทางนำทาง" class="breadcrumb">
  <ol>
    <li><a href="/">หน้าแรก</a></li>
    <li><a href="/blog/">บทความ</a></li>
    <li><a href="/blog/technology/">เทคโนโลยี</a></li>
    <li aria-current="page">วิธีตั้งค่า Firewall บน Linux</li>
  </ol>
</nav>

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  list-style: none;
  padding: 0;
  font-size: .875rem;
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-inline-start: .5rem;
  color: #6c6a74;
}
.breadcrumb li[aria-current="page"] { color: #6c6a74; }

ใช้ <nav> พร้อม aria-label และ aria-current="page" เพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจโครงสร้างด้วย

ขั้นตอนที่ 3: สร้างอัตโนมัติใน WordPress

function my_breadcrumb_jsonld() {
    if (is_front_page()) return;

    $items = array();
    $pos = 1;

    $items[] = array(
        '@type'    => 'ListItem',
        'position' => $pos++,
        'name'     => 'หน้าแรก',
        'item'     => home_url('/'),
    );

    if (is_singular('post')) {
        $cats = get_the_category();
        if (!empty($cats)) {
            $cat = $cats[0];
            // ไล่หมวดแม่ขึ้นไปก่อน
            foreach (array_reverse(get_ancestors($cat->term_id, 'category')) as $anc) {
                $t = get_term($anc, 'category');
                $items[] = array(
                    '@type' => 'ListItem', 'position' => $pos++,
                    'name'  => $t->name, 'item' => get_term_link($t),
                );
            }
            $items[] = array(
                '@type' => 'ListItem', 'position' => $pos++,
                'name'  => $cat->name, 'item' => get_category_link($cat->term_id),
            );
        }
        // รายการสุดท้าย ไม่ใส่ item
        $items[] = array(
            '@type' => 'ListItem', 'position' => $pos,
            'name'  => get_the_title(),
        );
    }
    elseif (is_category() || is_tax()) {
        $items[] = array(
            '@type' => 'ListItem', 'position' => $pos,
            'name'  => single_term_title('', false),
        );
    }
    elseif (is_page()) {
        foreach (array_reverse(get_post_ancestors(get_the_ID())) as $anc) {
            $items[] = array(
                '@type' => 'ListItem', 'position' => $pos++,
                'name'  => get_the_title($anc), 'item' => get_permalink($anc),
            );
        }
        $items[] = array(
            '@type' => 'ListItem', 'position' => $pos,
            'name'  => get_the_title(),
        );
    }

    if (count($items) < 2) return;

    $data = array(
        '@context'        => 'https://schema.org',
        '@type'           => 'BreadcrumbList',
        'itemListElement' => $items,
    );

    echo '<script type="application/ld+json">'
       . wp_json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
       . '</script>' . "\n";
}
add_action('wp_head', 'my_breadcrumb_jsonld', 20);

ใช้ JSON_UNESCAPED_UNICODE เพื่อให้ภาษาไทยไม่ถูกแปลงเป็นรหัส ซึ่งอ่านง่ายกว่าตอนตรวจสอบ

ขั้นตอนที่ 4: ตรวจว่าปลั๊กอินใส่ให้อยู่แล้วหรือไม่

curl -sL https://example.com/blog/article/ | grep -c 'BreadcrumbList'

ผลควรเป็น 1 หากได้ 2 แปลว่ามีทั้งของปลั๊กอินและของคุณ ให้ปิดตัวใดตัวหนึ่ง ข้อมูลโครงสร้างที่ซ้ำกันทำให้ Google สับสน

ปลั๊กอิน SEO ส่วนใหญ่มีฟีเจอร์นี้อยู่แล้ว ตรวจในหน้าตั้งค่าก่อนเขียนเอง

curl -sL https://example.com/blog/article/ \
  | grep -oP '(?<=<script type="application/ld\+json">).*?(?=</script>)' \
  | python3 -m json.tool