การพัฒนาเว็บไซต์
APN Corporation Interior

ปัญหารากฐานที่สุดของเว็บคือเป็น SPA แบบ client-rendered ล้วน — แก้ด้วยการ prerender ทุกหน้า

• ติดตั้ง vite-ssg@0.24.3 (ปักเวอร์ชันไว้เพื่อไม่ให้ meta หายเงียบ ๆ จากปัญหา dependency)
• Prerender ทุก route เป็น HTML จริงตอน build — 9 หน้า static + /project/:slug + /blogs/:slug รวม 93 หน้า
• ดึง slug แบบ dynamic จาก API ตอน build; ถ้า API ล่ม = ข้าม dynamic + เตือน แต่ build ไม่พัง
• ทำโค้ดให้ SSR-safe: guard localStorage/document, ย้าย window.addEventListener เข้า onMounted
• ส่ง state ผ่าน provide/inject + __INITIAL_STATE__ → hydrate ไม่กระพริบ
• .htaccess เสิร์ฟไฟล์ prerender ตรง canonical URL (ไม่ 301 trailing-slash)

ผลลัพธ์: LINE / Facebook / AI ที่ไม่รัน JavaScript เห็น title, meta, JSON-LD และเนื้อหาครบในชุด HTML แรก — ปลดล็อกทั้ง SEO และโอกาสถูกอ้างอิงโดย AI

• Sitemap: generate ตอน build (93 URL) + hreflang th/x-default + lastmod รายหน้าจาก updated_at จริงของบทความ
• หน้า 404 จริง: เพิ่ม NotFoundView + noindex แทนการ redirect ทุก URL ผิดไปหน้าแรก (เลิก soft 404)
• รูป OG/logo ที่ 404: ชี้ og:image ไป hero_banner.png ที่มีจริง และถอด logo ที่หายออกจาก schema
• Structured data ครบ: Organization / LocalBusiness, WebSite + SearchAction, FAQPage, CollectionPage, Service, CreativeWork, Blog, Article — ผูก Breadcrumb 3 ระดับภาษาไทย
• SearchAction ทำงานจริง: /project?q= กรองผลงานจริง + sync สองทางกับ URL
• robots.txt, canonical, hreflang ต่อหน้า — ครบและถูกหลัก

ผลลัพธ์: หน้าโครงการและบทความถูกค้นพบและจัดทำดัชนีได้ครบ พร้อม schema ที่ช่วยให้ทั้ง Google และ AI เข้าใจเนื้อหา

จุดที่การตรวจรอบสองจับได้เพิ่ม — เนื้อหา "ปลอม/ว่าง" ที่ index ได้จริง ถูกแก้ทั้งหมด

• หน้า About เขียนใหม่ทั้งไฟล์: ลบทีม/สถิติ/รูป placeholder (via.placeholder.com) → ผู้บริหาร 3 คน + ทีม 11 คนจริง, รูป self-hosted, schema AboutPage + Person
• หน้า Portfolio: จากเรนเดอร์ว่างเปล่า → หน้าโปรไฟล์บริษัท 12 หน้าจริง พร้อม alt ภาษาไทย + ปุ่มลิงก์ภายใน
• FAQ มองเห็นได้จริง: Home 5 ข้อ / Service 7 ข้อ จาก source เดียวกับ JSON-LD (เนื้อหากับ markup ไม่มีทางเพี้ยนจากกัน) → ได้ประโยชน์ด้าน AEO
• ผู้เขียนบทความ: เปลี่ยน Article.author จาก Organization → Person (บุคคลจริง) + byline ที่มองเห็น
• อีเมลองค์กร: Gmail → info@apnth.com (แก้ครบ 5 จุด) เพื่อความสอดคล้องและความน่าเชื่อถือ
• แก้อักขระเพี้ยน: ซ่อม mojibake (�) ใน fallback ของ material board ให้เป็น curly quotes

ผลลัพธ์: หน้าที่สร้างความเชื่อมั่นหลักของบริษัทออกแบบ (About/Portfolio) มีเนื้อหาจริง ลดความเสี่ยงด้าน helpful-content และเสริม E-E-A-T โดยตรง

• H1 ทุกหน้า: เพิ่ม <h1 class="sr-only"> คีย์เวิร์ดไทย (หนึ่ง H1 ต่อหน้า) คงดีไซน์อังกฤษเดิมไว้
• Title แบบคีย์เวิร์ดนำ: เปลี่ยนรูปแบบเป็น "<คีย์เวิร์ดไทย> — APN..." แทนการเอาแบรนด์ขึ้นก่อน
• ขยายคีย์เวิร์ด: บริษัทรับออกแบบบ้านและคอนโด, รีโนเวท, บิวท์อิน, ออฟฟิศ, โรงแรม, Shop, กรุงเทพฯ (กทม.)
• หน้า Service: เพิ่มบริการ 6 ประเภท + hasOfferCatalog + areaServed = Bangkok
• หน้า Project: แปลงหัวข้อที่เป็นรูปภาพ (title.png/subtext.png) ให้เป็นข้อความจริง — อ่านได้ทั้งคนและบอต
• เก็บกวาด: ลบ <meta name="keywords"> ที่ตกยุค และเพิ่ม sr-only H1 ไทยให้หน้า Contact

ผลลัพธ์: ทุกหน้าหลักตอกย้ำคีย์เวิร์ดไทยที่ลูกค้าค้นจริง สอดคล้องกับกลยุทธ์ Thai-first ของเว็บ

• ใส่ loading="lazy" + decoding="async" + width/height ครบทุก <img> (lazy 31 รูป, eager 7 รูป — เดิม lazy = 0)
• คงรูป hero/above-the-fold เป็น eager + fetchpriority="high" เพื่อ LCP ที่ดี
• Cinematic scroll ของหน้าโปรไฟล์บริษัท (scroll-snap + parallax) เปิดเฉพาะเมื่อผู้ใช้ไม่ได้ตั้ง prefers-reduced-motion
• เปิด gzip ใน .htaccess + code-split ทุก route ด้วย lazy import()

ผลลัพธ์: ลดการเด้งของเลย์เอาต์ (CLS) และช่วย LCP/INP — เก็บแต้ม Core Web Vitals ที่เป็น tiebreaker ของอันดับ

งานต่อไป (polish): แปลงรูปเป็น WebP/AVIF + srcset ซึ่งต้องตั้ง asset pipeline แยก

• GA4 (G-W8YMEBMZ88): ตั้ง send_page_view:false และยิง pageview ต่อการเปลี่ยน route — เหมาะกับ SPA
• แก้ชื่อหน้า GA4: เดิมส่ง title อังกฤษจาก router — แก้ให้ส่ง title ภาษาไทยจริง (รอ nextTick + requestAnimationFrame) และเปลี่ยนเป็น event page_view
• เพิ่ม Ahrefs Web Analytics (async, ไม่ render-blocking)
• เพิ่ม Google Search Console verification token
• เพิ่ม sitemap.xsl ให้แสดง sitemap ในรูปแบบที่อ่านง่าย

ผลลัพธ์: ข้อมูลใน GA4 ตรงกับหน้าจริงที่ผู้ใช้เห็น และพร้อมยืนยัน/ติดตามผลใน Search Console