เพิ่ม 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 ส่วนใหญ่มีฟีเจอร์นี้อยู่แล้ว ตรวจในหน้าตั้งค่าก่อนเขียนเอง

ขั้นตอนที่ 5: ตรวจสอบความถูกต้อง

ใช้ Rich Results Test ของ Google ที่ search.google.com/test/rich-results ใส่ URL แล้วดูผล

ตรวจจากบรรทัดคำสั่งได้เช่นกัน

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

หากเป็น JSON ที่ถูกต้อง คำสั่งนี้จะจัดรูปแบบให้อ่านง่าย หากผิดจะแจ้งข้อผิดพลาดพร้อมตำแหน่ง

ขั้นตอนที่ 6: ติดตามผลใน Search Console

ไปที่ Enhancements แล้ว Breadcrumbs จะเห็นจำนวนหน้าที่ถูกต้องและที่มีข้อผิดพลาด

ข้อผิดพลาดที่พบบ่อย

• Missing field "name" รายการใดรายการหนึ่งไม่มีชื่อ มักเกิดกับหมวดหมู่ที่ชื่อว่างเปล่า
• Invalid URL in field "item" URL ไม่ใช่แบบเต็มหรือเข้าถึงไม่ได้
• Missing field "item" รายการที่ไม่ใช่รายการสุดท้ายต้องมี URL

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

ขั้นตอนที่ 7: ข้อควรระวัง

• อย่าใส่คำค้นหาเกินจริง ชื่อในเส้นทางต้องตรงกับชื่อจริงของหมวดหมู่ การยัดคำค้นหาเข้าไปถือเป็นการละเมิดแนวทางของ Google
• ข้อมูลต้องตรงกับที่แสดงบนหน้า หากเส้นทางที่ผู้ใช้เห็นต่างจากที่ระบุใน Schema จะถือว่าเป็นข้อมูลที่ไม่สอดคล้อง
• หน้าแรกไม่ต้องมี Breadcrumb เพราะไม่มีเส้นทางให้แสดง
• สินค้าในหลายหมวด ให้เลือกเส้นทางเดียวที่เป็นหลัก ไม่ใช่ใส่หลาย BreadcrumbList

ปัญหาที่พบบ่อย

Rich Results Test ไม่พบข้อมูล

ตรวจว่า JSON ถูกต้องตามไวยากรณ์ และสคริปต์ไม่ได้ถูกสร้างด้วย JavaScript หลังโหลดหน้า เพราะแม้ Google จะประมวลผล JavaScript ได้ แต่การใส่ในหน้าตั้งแต่แรกน่าเชื่อถือกว่า

ภาษาไทยเป็นรหัสตัวเลข

ไม่ได้ใส่ JSON_UNESCAPED_UNICODE ซึ่งยังใช้งานได้แต่ตรวจสอบยาก ใส่เพื่อความสะดวกในการดูแล

มี BreadcrumbList หลายชุดในหน้าเดียว

เกิดจากธีมและปลั๊กอินใส่พร้อมกัน ปิดตัวใดตัวหนึ่ง

Google ไม่แสดงเส้นทางแม้ข้อมูลถูกต้อง

Google เลือกแสดงเองตามความเหมาะสมของแต่ละคำค้นหา ข้อมูลที่ถูกต้องเป็นเงื่อนไขจำเป็นแต่ไม่ใช่การรับประกัน รอสักระยะและตรวจว่าหน้านั้นถูกเก็บดัชนีแล้ว

ต้องการให้ทีมงานช่วยวางโครงสร้างข้อมูลของเว็บ ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/