apnth.com

รายงานสรุปงานที่ทำ

เว็บไซต์ apnth.com

หน้าขายบริการ แยกตามงาน
6

ชื่อลิงก์เป็นคำไทยที่ลูกค้าพิมพ์หา

หน้าที่ Google เห็นเนื้อหาทันที
13

ทำไฟล์หน้าเสร็จวางไว้บนโฮสต์แล้ว

คำสั่งเดียว ตอนอัปขึ้นเว็บ
1

สั่งครั้งเดียว ได้ไฟล์พร้อมอัปขึ้นโฮสต์

สรุป

รอบนี้ทำ 4 เรื่องหลัก

2
หัวใจของงานรอบนี้

เพิ่มหน้าบริการเจาะกลุ่มลูกค้า (Landing Page) 6 หน้า

ที่ใช้ URL ภาษาไทยตรงกับคำค้นหา เช่น apnth.com/รับออกแบบบ้าน — เพื่อให้แต่ละบริการมีหน้าของตัวเองไปแข่งอันดับบน Google

1

ส่งมอบเว็บไซต์หน้าบ้านครบทั้งเว็บ

12 หน้าหลัก พร้อมใช้งานจริง

3

วางโครงสร้าง SEO ทั้งเว็บ

ทุกหน้ามีชื่อหน้า คำอธิบาย ภาพตอนแชร์ และข้อมูลโครงสร้าง (Structured Data) ที่ Google อ่านเข้าใจ ครบทุกหน้า ไม่ใช่แค่หน้าแรก

4

ทำระบบขึ้นเว็บให้จบในคำสั่งเดียว

สั่ง build แล้วได้โฟลเดอร์พร้อมอัปขึ้นโฮสต์ทันที พร้อมคู่มือขั้นตอนละเอียด (DEPLOY.md)

งานที่ส่งมอบ

5 ส่วนที่ส่งมอบในรอบนี้

1. เว็บไซต์หน้าบ้าน (12 หน้าหลัก)
กลุ่มหน้า
หน้าหลักหน้าแรก, เกี่ยวกับเรา, บริการ, ผลงาน (Portfolio), ติดต่อเรา
เนื้อหาจากระบบหลังบ้านบทความ (รวม + รายบทความ), โครงการ (รวม + รายโครงการ)
หน้าตามข้อกำหนดนโยบายความเป็นส่วนตัว, ข้อกำหนดการใช้งาน
อื่น ๆหน้า 404

ทุกหน้าเป็นงานออกแบบชุดเดียวกัน ใช้แถบเมนูและส่วนท้ายร่วมกันทั้งเว็บ รองรับการแสดงผลบนมือถือและเดสก์ท็อป

2. หน้าบริการเจาะคำค้นหา (Landing Page) — 6 หน้า หัวใจของงานรอบนี้

หัวใจของงานรอบนี้ แต่ละบริการได้หน้าของตัวเอง พร้อม URL ภาษาไทยที่ตรงกับสิ่งที่ลูกค้าพิมพ์หา:

หน้าURL
รับออกแบบบ้านapnth.com/รับออกแบบบ้าน
รับออกแบบคอนโดapnth.com/รับออกแบบคอนโด
งานบิวท์อินapnth.com/งานบิวท์อิน
ตกแต่งภายในออฟฟิศapnth.com/ตกแต่งภายในออฟฟิศ
ตกแต่งภายในโรงแรม / ร้านค้าapnth.com/ตกแต่งภายในโรงแรม-ร้านค้า
บริหารโครงการแบบครบวงจร (Turnkey)apnth.com/บริหารโครงการ-turnkey

แต่ละหน้ามีโครงเนื้อหาเหมือนกัน: หัวเรื่อง → รายละเอียดบริการ → ขั้นตอนการทำงาน 5 ขั้น → คำถามที่พบบ่อย → ช่องทางติดต่อ

1ปรึกษาและสำรวจพื้นที่
2ออกแบบ 3 มิติ
3สรุปแบบและราคา
4ก่อสร้างและติดตั้ง
5ตรวจรับและส่งมอบ

ทั้ง 6 หน้าใช้เทมเพลตเดียวกัน แก้เนื้อหาที่ไฟล์ข้อมูลชุดเดียว เพิ่มหน้าที่ 7 ในอนาคตทำได้โดยไม่ต้องเขียนหน้าใหม่

นอกจากนี้ยังปรับให้ทุกทางเข้าชี้มาที่หน้าเหล่านี้:

  • ส่วนท้ายเว็บ (Footer) เพิ่มเมนู “Our Services” ลิงก์ครบทั้ง 6 หน้า ทุกหน้าในเว็บ
  • ปุ่มในหน้า “บริการ” เปลี่ยนจากพาไปหน้าติดต่อ/ผลงาน มาเป็นพาเข้าหน้าบริการที่ตรงเรื่อง
3. โครงสร้าง SEO ทั้งเว็บ

ทำเป็นระบบกลางชุดเดียว ใช้ซ้ำได้ทุกหน้า ครอบคลุม:

ชื่อหน้า + คำอธิบาย

เฉพาะของแต่ละหน้า (ปรับข้อความหน้าแรกและหน้าบริการใหม่รอบนี้ด้วย)

ภาพและข้อความตอนแชร์

ลง Facebook / LINE / X

ข้อมูลโครงสร้าง (Structured Data) ที่ Google และ AI ใช้อ่าน

  • ข้อมูลบริษัท (ชื่อ ที่อยู่ พิกัด ปีก่อตั้ง จำนวนพนักงาน) แบบธุรกิจท้องถิ่น + นักออกแบบภายใน
  • เส้นทางนำทาง (Breadcrumb) ทุกหน้าบริการ
  • รายการบริการ + พื้นที่ให้บริการ (กรุงเทพฯ / ประเทศไทย)
  • คำถามที่พบบ่อย (FAQ) — มีสิทธิ์ขึ้นเป็นกล่องคำตอบในหน้าผลการค้นหา

Canonical + hreflang (ไทย)

บอก Google ว่า URL ไหนคือตัวจริง กัน URL ซ้ำแย่งอันดับกันเอง

sitemap.xml + robots.txt

sitemap.xml สร้างอัตโนมัติตอน build รวมทุกหน้า รวมถึงบทความและโครงการที่ดึงสดจากระบบหลังบ้าน พร้อม robots.txt ที่ชี้ตำแหน่ง sitemap ให้ Google และกันบอทเข้าเส้นทางระบบหลังบ้าน

4. การเตรียมหน้าเว็บล่วงหน้า (ให้ Google เห็นเนื้อหาทันที)

เว็บนี้เป็นเว็บแบบ Vue ซึ่งปกติเนื้อหาจะถูกสร้างตอนเบราว์เซอร์เปิด — ทำให้บอทของ Google บางครั้งเห็นหน้าว่าง รอบนี้แก้ด้วยการ สร้างไฟล์หน้าเว็บสำเร็จรูปไว้ตั้งแต่ตอน build ครอบคลุม 13 URL: หน้าแรก, เกี่ยวกับเรา, บริการ, Landing ทั้ง 6 หน้า, ผลงาน, ติดต่อ, นโยบายความเป็นส่วนตัว, ข้อกำหนดการใช้งาน (ที่ยังไม่ครอบคลุมคือหน้าบทความและหน้าโครงการ)

ผลคือหน้าเหล่านี้เปิดเร็วขึ้น และบอทเห็นเนื้อหาเต็มตั้งแต่วินาทีแรก

5. ระบบขึ้นเว็บ (Deploy)
  • คำสั่งเดียว npm run build → ได้ทั้งไฟล์เว็บ + sitemap ที่ดึงข้อมูลบทความ/โครงการล่าสุดจริง
  • คำสั่ง npm run pack → ได้โฟลเดอร์ deploy-out\web\ ลากขึ้น FileZilla ได้ทันที
  • ตั้งค่าเซิร์ฟเวอร์ (.htaccess) ให้ URL ภาษาไทยและทุกหน้าเปิดตรงได้ ไม่ 404 และเปิดบีบอัดไฟล์เพื่อให้โหลดเร็วขึ้น
  • คู่มือ DEPLOY.md ภาษาไทย: ขั้นตอนอัปทีละขั้น, วิธีเช็คว่าขึ้นจริง, ตารางแก้ปัญหาที่เจอบ่อย (เช่น อาการหน้า “Testing 123.. / CentOS”) และเทคนิคอัปเฉพาะไฟล์ที่เปลี่ยน (จาก ~46MB เหลือไม่ถึง 1MB)
  • เตรียมชุดไฟล์สำหรับโหมดเซิร์ฟเวอร์เต็มรูปแบบไว้แล้ว รอวันที่โฮสต์รองรับ (ดูหัวข้อถัดไป)