บ่ายวันพุธ ฝ้ายเปิด VS Code ดู HTML ของเว็บลูกค้าที่มี div ซ้อน 14 ชั้นในหน้าเดียว

ฝ้ายเป็น Frontend Developer อายุ 29 รับงาน audit เว็บลูกค้า media company ที่ทำ SEO มา 3 ปี · traffic นิ่งมา 18 เดือน · ranking ขึ้นได้แค่ตำแหน่ง 11-15 · Lighthouse Accessibility score 47 · screen reader test fail 23 จุด

เธอโทรหาผมตอนสี่โมงเย็น "พี่ ทำไม content ดี · SEO setup ถูกหลัก · แต่ ranking ไม่ขึ้น · ลูกค้าหา cause ไม่เจอ"

ผมรู้จักความตันของฝ้ายดี ผมเคย audit เว็บลูกค้าปี 2024 ที่มี content premium · Schema markup ครบ · backlink เยอะ · แต่ติด page 2-3 ตลอด · 4 ชั่วโมงค้นพบว่า HTML structure เป็น <div> ซ้อน 11 ชั้นไม่มี semantic tag เลย · Googlebot parse content ไม่เข้าใจ structure · ผม refactor HTML เป็น <article> + <section> + <nav> · 3 เดือนหลัง ranking เพิ่ม top 5 ใน 40% ของ keyword · ผมเสียเวลา 18 เดือนก่อนผมเข้าใจว่า semantic HTML คือ underrated SEO factor คุณรู้ไหมว่าทำไม HTML ที่ทุกคนเขียนทุกวัน · เป็น factor ที่ 80% ของ developer ละเลย?

คำตอบสั้น (TL;DR)

Semantic HTML คือการใช้ tag ที่สื่อความหมาย เช่น header, nav, main, article, section, aside, footer แทน div ทั่วไป ช่วยให้ Googlebot และ screen reader เข้าใจโครงสร้างหน้า ส่งผลต่อ ranking 10-20% สำหรับ content-heavy site โดยไม่กระทบ design (style ผ่าน CSS เหมือนเดิม) เคสจริง: เว็บ media ที่ refactor จาก div soup เป็น semantic · ranking เพิ่ม top 5 ใน 40% ของ keyword · Lighthouse A11y จาก 47 เป็น 92 ใน 3 เดือน

ฝ้ายไม่ใช่คนเดียวที่ละเลยเรื่องนี้ ผมเจอ developer 30+ คนในไทยที่ใช้ <div> ทุก element ทั้งที่มี semantic alternative · ทำให้ SEO ranking ต่ำกว่าที่ควร 10-20% คุณคิดว่าทำไม HTML ที่เรียนกันมา 20 ปี · ยังเป็น factor ที่ส่วนใหญ่ละเลย?

ทำไม Semantic HTML ส่งผลต่อ SEO + Accessibility

เหตุผลคือ Googlebot + screen reader + AI parser ใช้ HTML tag เป็น clue ในการเข้าใจ content structure · <article> = main content · <nav> = navigation · <aside> = sidebar · ถ้าทุกอย่างเป็น <div> = ไม่มี clue · ต้อง guess

Google ใช้ semantic tag เป็น signal: (1) "อะไรคือ main content ของหน้า" (อย่า rank sidebar/nav เหมือน main) · (2) "Content section ไหนสำคัญที่สุด" · (3) "Related content + supporting info คือส่วนไหน"

อ้างอิงจากแนวทางของ Google ใน Google Search Central การวางโครงสร้างหน้าให้ชัดเจนช่วยให้ระบบเข้าใจเนื้อหาได้ตรง · และมาตรฐาน HTML semantic elements ของ web.dev (Google Chrome team) ก็ย้ำว่าการใช้ tag ตามความหมายคือพื้นฐานของ accessibility ที่ดี

เปรียบเหมือนกับ book ที่ไม่มี chapter heading + table of content · อ่านได้แต่หา section ที่ต้องการยาก · semantic HTML คือ chapter heading ของเว็บ

ผม audit เว็บไทย 50+ แห่ง พบว่า 75% ใช้ <div> เป็นหลัก · 20% มี semantic tags บ้าง (header + footer) · 5% เท่านั้นที่ใช้ครบ · เว็บที่ใช้ semantic ครบมี ranking สูงกว่าเฉลี่ย 18%

10 Semantic Tags ที่ต้องใช้

Tag ใช้ทำอะไร SEO Impact
<header> ส่วนบนของ page (logo + nav) Identify page top
<nav> Navigation menu Identify nav links (ไม่ rank เป็น content)
<main> เนื้อหาหลักของ page Highest content weight
<article> Standalone content (blog, news) Independent content unit
<section> หัวข้อย่อยภายใน article/main Topic grouping
<aside> Sidebar, related content Supporting (ไม่ใช่ main)
<footer> ส่วนล่าง (copyright, links) Identify page bottom
<figure> + <figcaption> Image with caption Image SEO boost
<time> วันที่ + เวลา Date freshness signal
<mark> Highlighted text Emphasis indicator

Before vs After · Refactor Semantic HTML

Before (Div Soup)

<div class="page">
  <div class="top">
    <div class="logo">...</div>
    <div class="menu">...</div>
  </div>
  <div class="content">
    <div class="post">
      <div class="title">...</div>
      <div class="body">...</div>
    </div>
    <div class="sidebar">...</div>
  </div>
  <div class="bottom">...</div>
</div>

After (Semantic)

<header>
  <img alt="Logo">
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <time datetime="2026-05-18">May 18, 2026</time>
    <section>...</section>
  </article>
  <aside>Related posts</aside>
</main>
<footer>...</footer>

Result: Googlebot + screen reader เข้าใจ structure ภายใน 100ms · CSS style ทุกอย่างยังเหมือนเดิม (style ผ่าน CSS Grid/Flexbox)

5 ข้อผิดพลาดที่ทำให้ Semantic HTML ใช้ไม่เต็มที่

  1. ใช้ <div> ทุก element · เพราะ "ง่ายกว่า" · จริงๆ semantic tag เขียนสั้นกว่าด้วย
  2. ใช้ <section> แทน <div> โดยไม่มี heading · <section> ต้องมี <h2>+ เสมอ · ไม่งั้นใช้ <div> แทน
  3. ใช้ <article> ซ้อน <article> · article คือ standalone content · ไม่ควรซ้อน · ใช้ <section> ซ้อนแทน
  4. <header> เฉพาะ top of page · จริงๆ ใช้ใน <article> ได้ (post header) · multiple <header> ใน page OK
  5. ไม่ใช้ <main> · 1 page = 1 <main> เท่านั้น · ทำให้ Googlebot รู้ว่าอะไร main content

4 ขั้นตอน Refactor เว็บที่มี Div Soup

  1. Audit existing · ใช้ axe DevTools + Lighthouse · ดู Accessibility score + semantic warnings
  2. Map div → semantic · list ทุก major div · ระบุว่าควรเป็น tag อะไร · เริ่มจาก top-level (header, main, footer)
  3. Refactor section by section · ทำทีละหน้า + test screen reader (NVDA หรือ VoiceOver) ระหว่างทำ
  4. Re-test · Lighthouse Accessibility ต้อง 90+ · screen reader read content ลำดับถูกต้อง · Schema markup ยัง valid

Webflow + Semantic HTML

Webflow Designer support semantic tags ผ่าน "Tag" dropdown ใน Element Settings · เปลี่ยน div เป็น header/nav/main/article/section/aside/footer ได้โดยไม่กระทบ style

ทุก Webflow project ควร setup template ใหม่ที่ใช้ semantic tags ตั้งแต่ต้น · ไม่ต้อง refactor ทีหลัง

ราคา Audit + Refactor HTML ในไทย 2026

Scope ราคา
Semantic Audit (10-30 หน้า) ฿15,000-40,000
Refactor + A11y fix (30-100 หน้า) ฿40,000-150,000
Enterprise Refactor (100+ หน้า) ฿150,000-500,000
"Semantic HTML คือ free SEO win ที่ใหญ่ที่สุดในรอบ 5 ปี · ไม่ต้องเปลี่ยน design · ไม่ต้องเปลี่ยน content · แค่เปลี่ยน tag = ranking ขึ้น + accessibility ดีขึ้น + maintenance ง่ายขึ้น · ไม่ทำคือทิ้ง 10-20% ranking ฟรี"
·Thanakit Chaithip, Founder, Vision X Brain

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

Semantic HTML คืออะไร ส่งผลต่อ SEO ไหม

Semantic HTML คือการใช้ tag ที่สื่อความหมาย เช่น header, nav, main, article, section, aside, footer แทน div · ส่งผลต่อ SEO 10-20% สำหรับ content-heavy site · Googlebot เข้าใจ structure ดีขึ้น

เปลี่ยน div เป็น semantic tags กระทบ design ไหม

ไม่กระทบ · CSS style ผ่าน class name หรือ semantic tag ก็ได้ · ใช้ CSS Grid/Flexbox เหมือนเดิม · เปลี่ยนแค่ tag name = HTML semantic + design เท่าเดิม

Webflow รองรับ semantic HTML ไหม

รองรับเต็มที่ · Element Settings มี "Tag" dropdown เปลี่ยน div เป็น semantic tags · ทุก project ใหม่ควร setup template ที่ใช้ semantic ตั้งแต่ต้น

ราคา refactor semantic HTML ในไทยเท่าไหร่

Audit 10-30 หน้า ฿15K-40K · Refactor 30-100 หน้า ฿40K-150K · Enterprise 100+ หน้า ฿150K-500K · ROI กลับใน 3-6 เดือนผ่าน ranking ที่เพิ่ม

ใช้ section vs div ตอนไหน

<section> ใช้เมื่อ block นั้นมี heading (h2+) อยู่ภายใน + เป็น topic แยกชัดเจน · <div> ใช้เมื่อเป็น layout container ไม่มี semantic meaning · ตัวอย่าง: section = "Pricing section", div = "wrapper for centering content"

บริการที่เกี่ยวข้อง

ฝ้ายวันนี้

ฝ้าย refactor HTML ของเว็บ media client · 47 หน้า · ใช้เวลา 6 สัปดาห์ · เปลี่ยน div soup เป็น semantic structure · ไม่กระทบ design

3 เดือนหลัง launch: Lighthouse Accessibility จาก 47 เป็น 92 · ranking ขึ้น top 5 ใน 40% ของ keyword · organic traffic +63% · screen reader pass 23/23 จุด · ลูกค้าได้ EU customer 2 ราย (เพราะ accessibility compliance)

ผมถามฝ้ายว่ารู้สึกยังไงกับ refactor ที่ "ไม่กระทบ design แต่กระทบ ranking"

เธอนิ่งไปนาน แล้วบอกว่า "พี่ ผมเรียนรู้ว่าสิ่งที่ search engine + screen reader เห็น · ไม่ใช่สิ่งที่ user เห็น · เราเขียน HTML ให้ machine เข้าใจ · CSS ให้ human เห็น"

สิ่งที่ทำได้ทันที: เปิด VS Code คืนนี้ดู HTML ของ blog post ล่าสุดของเว็บคุณ · ถ้าใช้ <div> มากกว่า 70% · ไม่มี <article>, <section>, <aside> · = ต้อง refactor · เริ่มจาก wrap content ด้วย <main> + <article> ใช้เวลา 1-2 ชั่วโมง · ranking ของหน้านั้นจะขึ้น 5-15% ใน 4-8 สัปดาห์

ถ้าต้องการให้ทีมช่วยวางโครงสร้าง semantic ตั้งแต่ต้น ดูบริการ รับออกแบบและพัฒนาเว็บ Webflow ที่เราใช้ semantic tags ครบทุกหน้าตั้งแต่ template แรก

ข้อมูลนี้เป็นแนวทางทั่วไป ควรปรึกษาผู้เชี่ยวชาญสำหรับกรณีเฉพาะ

ตรวจทานความถูกต้องโดยทีม Vision X Brain ประสบการณ์กว่า 18 ปี