เพิ่ม Table of Contents (TOC) บน WordPress เพิ่ม SEO

TOC คืออะไรและทำไม SEO ถึงชอบ

Table of Contents หรือ TOC คือ "สารบัญ" ที่แสดงรายการหัวข้อทั้งหมดในบทความ พร้อม Link ที่คลิกแล้วจะพาผู้อ่านข้ามลงไปยัง Section นั้นได้ทันที เหมือนกับสารบัญในหนังสือ แต่เป็นแบบดิจิทัลที่คลิกได้ ซึ่งเรียกว่า Anchor Link หรือ Jump Link

เหตุผลที่ SEO ชอบ TOC มีหลายประการ ประการแรกคือ Google Bot จะอ่าน Heading Structure และ Anchor ในหน้าเว็บ เมื่อมี TOC ที่จัดระเบียบดี Google จะเข้าใจโครงสร้างเนื้อหาได้ง่ายขึ้น ส่งผลให้โอกาสติด Featured Snippet และ Jump-To Links ในหน้าค้นหาสูงขึ้น ประการที่สองคือ TOC ช่วยลด Bounce Rate เพราะผู้อ่านสามารถกระโดดไปยังส่วนที่ต้องการได้เลย แทนที่จะปิดหน้าออกไป

นอกจากนี้ TOC ยังทำให้ User Experience ดีขึ้นอย่างเห็นได้ชัด โดยเฉพาะในบทความที่ยาวมากกว่า 1,500 คำ ผู้อ่านไม่ต้องเลื่อน Scroll หาเนื้อหาที่ต้องการ สามารถคลิกตรงหัวข้อในสารบัญแล้วไปถึงจุดนั้นได้ทันที ซึ่งส่งผลดีต่อ Time on Page และ Dwell Time ที่ Google ใช้วัดคุณภาพของหน้าเว็บ

• เพิ่มโอกาสแสดง Jump-To Links ใน Google Search Results
• ช่วยให้ Google Bot เข้าใจโครงสร้างเนื้อหาได้ดีขึ้น
• ลด Bounce Rate เพราะผู้อ่านหาเนื้อหาที่ต้องการได้เร็ว
• เพิ่ม Time on Page และ Dwell Time
• เหมาะกับบทความยาวตั้งแต่ 1,000 คำขึ้นไป
• ทำให้เว็บดูเป็นมืออาชีพและน่าเชื่อถือมากขึ้น

ติดตั้ง Plugin: LuckyWP Table of Contents

LuckyWP Table of Contents เป็น Plugin TOC ที่ได้รับความนิยมสูงบน WordPress.org มีการติดตั้งแล้วมากกว่า 200,000 ครั้ง รองรับ Gutenberg และ Classic Editor ทั้งคู่ ใช้งานง่าย ปรับแต่งดีไซน์ได้หลากหลาย และที่สำคัญคือเบาและไม่กินทรัพยากร Server

วิธีติดตั้ง LuckyWP Table of Contents ทำได้ง่ายมาก ไปที่ WordPress Admin แล้วคลิก "Plugins" จากนั้นคลิก "Add New" แล้วค้นหาคำว่า "LuckyWP Table of Contents" เมื่อเจอแล้วคลิก Install Now แล้วกด Activate รอแป๊บเดียวก็ใช้งานได้ทันที ไม่ต้องตั้งค่าอะไรมาก เพราะค่า Default นั้น Work ได้ดีอยู่แล้ว

หลังติดตั้งแล้ว ไปที่ Settings > LuckyWP TOC เพื่อปรับแต่งการตั้งค่าตามต้องการ Plugin นี้มีตัวเลือกที่ครอบคลุมมาก ตั้งแต่การเลือกว่าจะให้ TOC แสดงอัตโนมัติในบทความประเภทไหน กำหนดขั้นต่ำของ Heading ที่ต้องมีก่อน TOC จะโผล่ รวมไปถึงสีและฟอนต์ของ TOC Box ด้วย

• ตั้งค่าหัวข้อ TOC Box: ไปที่ Settings > LuckyWP TOC > ช่อง "Title" ใส่ข้อความเช่น "สารบัญ" หรือ "เนื้อหาในบทความ"
• เลือก Heading ที่จะแสดง: ติ๊ก H2, H3 ที่ต้องการให้ปรากฏใน TOC (แนะนำ H2+H3)
• ตั้งค่าจำนวน Heading ขั้นต่ำ: ค่า Default คือ 4 หัวข้อ หากน้อยกว่านี้ TOC จะไม่แสดง
• Auto Insert: เลือกว่าจะให้ TOC แทรกอัตโนมัติก่อน First Heading หรือให้ใส่ Shortcode เอง
• Post Types: เลือกประเภท Post ที่จะให้ TOC ทำงาน เช่น Posts, Pages

สำหรับการปรับแต่งรูปลักษณ์ Plugin นี้มีธีมสำเร็จรูปให้เลือก เช่น สีเขียว สีน้ำเงิน หรือสีขาว สามารถกำหนด Custom CSS ได้ด้วย ทำให้ TOC หน้าตาเข้ากับดีไซน์ของเว็บได้อย่างสวยงาม

ติดตั้ง Plugin: Easy Table of Contents

Easy Table of Contents เป็นอีก Plugin ที่ได้รับความนิยมมากในหมู่ WordPress Developer ชาวไทย มีการติดตั้งมากกว่า 300,000 ครั้ง ความพิเศษของ Plugin นี้คือมีตัวเลือกการปรับแต่งที่ละเอียดมาก รองรับทั้ง Classic Editor, Gutenberg Block Editor และยัง Compatible กับ Page Builder ชื่อดังอย่าง Elementor และ Divi อีกด้วย

วิธีการติดตั้งเหมือนกับ Plugin ทั่วไปคือไปที่ Plugins > Add New แล้วค้นหา "Easy Table of Contents" กด Install แล้ว Activate เมื่อ Activate แล้วจะมีเมนู Settings > Table of Contents ให้ปรับแต่งได้ทันที Plugin นี้มี Debug Mode ให้ด้วย สะดวกมากสำหรับการ Troubleshoot เมื่อ TOC ไม่แสดงผล

จุดเด่นที่ทำให้ Easy Table of Contents โดดเด่นกว่า Plugin อื่นคือ Counter Type ที่หลากหลาย ไม่ว่าจะเป็น Numbered (1, 2, 3), Decimal (1.1, 1.2), Alphabet (A, B, C) หรือไม่ใส่เลขเลย นอกจากนี้ยังมีฟีเจอร์ Smooth Scroll ที่ทำให้การกระโดดไปยัง Heading ดูนุ่มนวล แทนที่จะกระตุกทันที

สำหรับการตั้งค่า Easy Table of Contents ที่แนะนำสำหรับมือใหม่ให้ตั้งดังนี้: Auto Insert > Before First Heading, Minimum Headings = 3, Show when print = เปิด, Counter = Decimals (ดูเป็นระเบียบ) และ Smooth Scroll = เปิดไว้เสมอ

ใช้ Gutenberg Block สร้าง TOC โดยไม่ต้องใช้ Plugin

WordPress 6.1 เป็นต้นมา มี Block ชื่อ "Table of Contents" รวมมาใน Gutenberg Editor โดยไม่ต้องติดตั้ง Plugin เพิ่มเติม Block นี้จะดึง Heading ทั้งหมดในบทความมาสร้างเป็น TOC อัตโนมัติ เหมาะสำหรับเว็บที่ต้องการลดจำนวน Plugin เพื่อให้เว็บโหลดเร็วขึ้น

วิธีใช้ Gutenberg Table of Contents Block มีขั้นตอนดังนี้ เปิดบทความใน Block Editor แล้วคลิก "+" เพื่อเพิ่ม Block ใหม่ พิมพ์ค้นหา "Table of Contents" ในช่องค้นหา Block จะเห็น Block ที่มีไอคอนรูปสารบัญ คลิกเลือกแล้ว Block นี้จะแทรกตัวเองเข้าไปในบทความ จากนั้น Block จะ Auto-Detect Heading H2 และ H3 ทั้งหมดในบทความแล้วสร้าง TOC ให้อัตโนมัติ

ข้อดีของการใช้ Gutenberg Block แทน Plugin คือความเบาและความเร็ว ไม่มี JavaScript ภายนอกที่ต้องโหลด TOC ถูก Render เป็น HTML ธรรมดาตั้งแต่ต้น ทำให้ Page Speed ดีขึ้น อย่างไรก็ตามข้อเสียคือการปรับแต่งรูปลักษณ์ทำได้จำกัดกว่า Plugin เต็มรูปแบบ

1. เปิด Block Editor แล้วคลิก "+" ที่ต้องการวาง TOC
2. ค้นหา "Table of Contents" ในรายการ Block
3. คลิก Block เพื่อแทรกลงในบทความ
4. Block จะแสดง Heading ทั้งหมดในบทความอัตโนมัติ
5. ปรับ Settings ในแถบขวา (Block Settings Panel) เพื่อเลือกว่าจะแสดง H2, H3 หรือทั้งหมด
6. บันทึกบทความ แล้วดู Preview ผลลัพธ์

หากต้องการปรับสไตล์ TOC ที่สร้างด้วย Gutenberg Block สามารถเพิ่ม CSS Custom เข้าไปใน Appearance > Customize > Additional CSS ได้ เช่น เปลี่ยนสีของ Link TOC หรือเพิ่ม Border ให้ TOC Box ดูโดดเด่นขึ้น

ตั้งค่า Anchor Link และ Heading Structure ให้ถูกต้อง

Anchor Link คือ Link ที่มี "#" ตามด้วยชื่อ ID เช่น #what-is-toc เมื่อผู้อ่านคลิก Link ในสารบัญ Browser จะเลื่อนหน้าไปยัง Element ที่มี ID นั้น การตั้งค่า Anchor ให้ถูกต้องเป็นสิ่งสำคัญที่สุดสำหรับ TOC เพราะหาก ID ซ้ำหรือมีอักขระพิเศษ Anchor อาจทำงานผิดพลาดได้

TOC Plugin ส่วนใหญ่จะสร้าง ID ให้ Heading อัตโนมัติโดยแปลงข้อความ Heading เป็น Lowercase แล้วแทนที่ Space ด้วย Dash เช่น Heading ชื่อ "TOC คืออะไร" จะกลายเป็น id="toc-คืออะไร" อย่างไรก็ตามหาก Heading เป็นภาษาไทย บาง Plugin อาจ Encode ตัวอักษรไทยให้กลายเป็น %E0%B8%AA%E0%B8%A1 ซึ่งดูไม่สวยใน URL

Heading Structure ที่ถูกต้องสำหรับ SEO คือการใช้ H1 เพียงตัวเดียวในหน้า (เป็นชื่อบทความ) จากนั้นใช้ H2 เป็น Section หลัก และ H3 เป็น Sub-Section ภายใน H2 ห้ามข้าม Level เช่นจาก H2 ไป H4 โดยไม่มี H3 เพราะจะทำให้ Google อ่าน Structure ไม่ออก และ TOC ก็จะดูสับสนด้วย

• H1: ใช้แค่ 1 ตัวต่อหน้า คือชื่อบทความหลัก
• H2: Section หลักของบทความ เช่น "วิธีติดตั้ง" "ข้อดีข้อเสีย"
• H3: Sub-Section ภายใต้ H2 เช่น "ขั้นตอนที่ 1" "ขั้นตอนที่ 2"
• ห้ามซ้ำ: Heading ที่ชื่อเหมือนกันจะทำให้ Anchor ID ซ้ำกัน
• ใช้คำสั้นกระชับ: Heading ยาวเกินไปจะทำให้ TOC ดูรก
• ใส่ Keyword: Heading ควรมี Keyword หลักที่เกี่ยวข้องกับเนื้อหา

สำหรับการกำหนด Anchor ID ด้วยตัวเองใน Gutenberg Editor สามารถทำได้โดยคลิกที่ Heading Block แล้วไปที่ Block Settings > Advanced > HTML Anchor แล้วพิมพ์ ID ที่ต้องการ เช่น "install-plugin" วิธีนี้ทำให้ควบคุม URL Anchor ได้แม่นยำ ไม่ต้องพึ่ง Auto-Generate ของ Plugin

TOC กับ Featured Snippet Jump-To Links

Jump-To Links คือ Link เพิ่มเติมที่ Google แสดงใต้ชื่อเว็บในหน้าค้นหา เช่น ถ้าบทความมีหัวข้อ "วิธีติดตั้ง" และ "ตั้งค่า" Google อาจแสดง Link ชื่อนั้นใต้ URL หลัก ทำให้ผลค้นหาของเราใหญ่โตและโดดเด่นกว่าคู่แข่ง ซึ่งช่วยเพิ่ม Click-Through Rate (CTR) ได้อย่างมาก

เงื่อนไขที่ Google จะแสดง Jump-To Links คือ หน้าเว็บต้องมี Anchor Link ที่ถูกต้อง มี Heading Structure ที่ชัดเจน และบทความต้องได้รับ Traffic พอสมควรแล้ว Google จะ Detect TOC และ Anchor ในหน้าเว็บเองโดยอัตโนมัติ ไม่มี Schema Markup พิเศษที่ต้องใส่เพิ่ม

นอกจาก Jump-To Links แล้ว TOC ยังช่วยให้โอกาสติด Featured Snippet สูงขึ้น เพราะ Google ชอบหน้าเว็บที่จัดโครงสร้างเนื้อหาชัดเจน เมื่อมีคนค้นหาคำถามที่ตรงกับ Heading ในบทความ Google มีโอกาสดึงเนื้อหาใน Section นั้นมาแสดงเป็น Featured Snippet ได้ทันที

• TOC ช่วยให้ Google เข้าใจโครงสร้างเนื้อหาและดึง Jump-To Links มาแสดง
• Anchor ที่สะอาดและอ่านได้ (readable slug) ช่วยให้ URL สวยงามใน SERP
• Heading ที่ตอบคำถามโดยตรงมีโอกาสสูงที่จะติด Featured Snippet
• บทความที่มี TOC มักได้ Dwell Time สูงกว่า ส่งสัญญาณ Quality ให้ Google
• CTR เพิ่มขึ้นเมื่อ Google แสดง Jump-To Links ใต้ชื่อเว็บของเรา

เพื่อเพิ่มโอกาส Jump-To Links ให้เขียน Heading แต่ละอันให้ตอบคำถามที่ผู้ใช้น่าจะค้นหา เช่นแทนที่จะเขียน "ขั้นตอนที่ 1" ให้เขียนว่า "ติดตั้ง Plugin LuckyWP TOC" และควรมีเนื้อหาอย่างน้อย 2-3 ประโยคใต้ Heading นั้นที่ตอบคำถามโดยตรง

ตรวจสอบว่า TOC และ Anchor ทำงานถูกต้อง

หลังจากตั้งค่า TOC แล้ว ต้องตรวจสอบให้แน่ใจว่า Anchor Link ทำงานถูกต้อง และ TOC แสดงผลครบถ้วน ใช้ Browser DevTools ตรวจสอบ HTML Source และ Inspect Element ของ Heading แต่ละอันว่ามี ID ถูกต้องหรือไม่

<!-- ตัวอย่าง HTML Heading ที่มี Anchor ID ถูกต้อง -->
<h2 id="install-plugin">วิธีติดตั้ง Plugin</h2>
<h2 id="anchor-link-setup">ตั้งค่า Anchor Link</h2>
<h3 id="heading-structure">Heading Structure ที่ถูกต้อง</h3>

<!-- ตัวอย่าง TOC Link ที่ถูกต้อง -->
<nav class="wp-toc">
  <a href="#install-plugin">วิธีติดตั้ง Plugin</a>
  <a href="#anchor-link-setup">ตั้งค่า Anchor Link</a>
  <a href="#heading-structure">Heading Structure ที่ถูกต้อง</a>
</nav>

/* CSS เพิ่ม Scroll Margin สำหรับ Sticky Header */
h2, h3, h4 {
  scroll-margin-top: 80px; /* ความสูงของ Header + 20px */
}

นอกจากนี้ยังสามารถใช้ Google Search Console ตรวจสอบได้ว่า Google Index หน้าเว็บพร้อม Anchor ถูกต้องหรือไม่ โดยไปที่ Coverage Report แล้วดู URL Inspection ของหน้าบทความนั้น หรือจะทดสอบโดยพิมพ์ site:yoursite.com/article-name ใน Google แล้วดูว่ามี Jump-To Links แสดงใต้ URL หรือยัง

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

TOC ไม่แสดงในบทความ — Plugin ตั้งค่าขั้นต่ำ Heading ไว้มาก

ปัญหานี้เกิดขึ้นบ่อยที่สุดสำหรับมือใหม่ Plugin TOC ส่วนใหญ่มีการตั้งค่า "Minimum Number of Headings" หรือจำนวน Heading ขั้นต่ำที่ต้องมีก่อน TOC จะแสดง ค่า Default มักอยู่ที่ 4 หัวข้อ หากบทความมี Heading ไม่ถึงค่านี้ TOC จะไม่แสดงเลย วิธีแก้คือไปที่ Settings ของ Plugin แล้วลดค่า Minimum Headings ลงเหลือ 2 หรือ 3 และตรวจสอบว่าได้เปิด Auto Insert สำหรับ Post Type ที่ต้องการด้วย

Anchor Link ไม่เลื่อนไปยังตำแหน่งที่ถูกต้อง — Sticky Header ขวาง

เมื่อเว็บมี Fixed Header หรือ Sticky Header ที่ติดอยู่บนสุดของหน้า Anchor Link จะพา Browser เลื่อนไปจนกระทั่ง Heading อยู่ที่ขอบบนสุดของหน้าพอดี แต่ Header จะบัง Heading นั้นไว้ ทำให้ผู้อ่านเห็นว่าหน้าเลื่อนไปแล้วแต่หา Heading ไม่เจอ วิธีแก้ที่ดีที่สุดคือเพิ่ม CSS scroll-margin-top ให้กับ Heading เช่น h2, h3 { scroll-margin-top: 80px; } โดยค่าตัวเลขควรเท่ากับความสูงของ Header + 10-20px

Heading ซ้ำกันทำให้ Anchor ID ซ้ำ — ต้องแก้ชื่อ Heading

หาก Heading สองอันมีชื่อเหมือนกัน เช่น "ขั้นตอนที่ 1" ปรากฏสองครั้งในบทความ Plugin TOC จะสร้าง Anchor ID ซ้ำหรือเพิ่มตัวเลขต่อท้าย เช่น id="step-1" และ id="step-1-2" ซึ่งอาจทำให้ Link ใน TOC ไม่พาไปยังตำแหน่งที่ถูกต้อง วิธีแก้คือแก้ชื่อ Heading ให้ไม่ซ้ำกัน เช่น "ขั้นตอนที่ 1: ติดตั้ง Plugin" และ "ขั้นตอนที่ 1: ตั้งค่า Plugin" หรือจะกำหนด Custom Anchor ID เองใน Gutenberg Editor ก็ได้

TOC แสดงในหน้าที่ไม่ต้องการ — ตั้งค่า Post Type ให้ถูก

ค่า Default ของ Plugin TOC บางตัวจะแสดง TOC ในทุก Post Type รวมถึง Pages ด้วย ทำให้ TOC อาจโผล่ในหน้า Contact Us หรือหน้า About ซึ่งไม่ต้องการ วิธีแก้คือไปที่ Settings ของ Plugin แล้วกำหนด Post Types ที่ต้องการให้แสดง TOC เช่นเลือกแค่ "Posts" เท่านั้น และปิด "Pages" ออก หรือถ้าต้องการควบคุมทีละหน้า หลาย Plugin มีตัวเลือก "Disable on this post" ในหน้า Edit Post ด้วย

คำถามที่พบบ่อย