20-Point SITE Pre-Launch Checklist

ถ้าขี้เกียจอ่านทั้งหมด

ไม่เป็นไรครับ ผมก็เป็น 555

จำอันเดียวก่อน:

AI ทำ Demo ให้ดูเหมือน Product ได้เร็วมาก แต่สิ่งที่ทำให้มันเป็น Product จริง ๆ มักเป็นของที่มองไม่เห็น

404, metadata, error state, analytics, mobile, privacy, form ที่ fail แล้วบอกคนใช้เป็น — ของพวกนี้ไม่ค่อยโผล่มาใน prompt แรก

เพราะงั้นถ้าคุณกำลังจะ Launch เว็บที่ทำด้วย Claude, Codex, Cursor, Lovable, Bolt, Replit หรือ AI Builder อะไรก็ตาม

อย่าเพิ่งถาม AI ว่า “เสร็จหรือยัง?”

ให้รัน Prompt #1 ด้านล่างก่อน แล้วดูว่ามันฟ้องคุณกี่ข้อจาก 20

ผมไม่ได้ทำ Checklist นี้เพราะคิดว่าเว็บต้อง Perfect ก่อน Launch

ตรงกันข้าม ผมชอบ Launch เร็ว

แต่ Launch เร็ว กับ Launch ทั้งที่ของพื้นฐานยังพัง มันคนละเรื่องกัน

TL;DR — เอาไปใช้ก่อนก็ได้

1. เว็บเปิดได้ ≠ เว็บพร้อมใช้จริง
2. AI เก่งกับสิ่งที่มองเห็น แต่ของ Production จำนวนมากมองไม่เห็น
3. ก่อนแก้อะไร ให้ Audit ก่อน เพื่อรู้ Baseline ว่าตอนนี้ขาดอะไรจริง
4. อย่าเชื่อคำว่า Done ✅ ถ้ายังไม่ได้ Verify เอง
5. เช็ก Mobile ด้วยมือถือจริง ไม่ใช่แค่ให้ AI บอกว่า Responsive แล้ว
6. Legal page ที่ AI เขียนให้ = Draft ไม่ใช่คำแนะนำทางกฎหมาย
7. Analytics ที่ “ติดตั้งแล้ว” แต่ไม่มี Event วิ่งจริง = ยังไม่ได้ติดตั้ง
8. เป้าหมายไม่ใช่ให้ครบ 20 เพื่อเอาคะแนนเต็ม เป้าหมายคือ อย่าให้คนจริงมาเจอ Bug พื้นฐานแทนเรา

Guide นี้เอาไว้ทำอะไร

นี่คือ Checklist สำหรับช่วงที่เว็บหรือแอปของคุณเริ่มดู “เสร็จ” แล้ว

หน้า Home มีแล้ว

Button กดได้

Form Submit ได้

Deploy ขึ้น URL ได้

ตรงนี้แหละที่อันตราย เพราะมันทำให้เรารู้สึกว่างานจบ

แต่ Production มักพังจากเรื่องเล็ก ๆ แบบนี้:

• คนกดลิงก์ผิดแล้วเจอ 404 ดิบ ๆ
• แชร์เว็บใน LINE แล้วไม่มีรูป Preview
• Form พังบนมือถือแต่ Desktop ปกติ
• Submit แล้วไม่รู้ว่าสำเร็จหรือยัง
• Google เห็นทุกหน้าเป็นชื่อเดียวกัน
• Analytics ไม่ยิง แต่เราคิดว่ามันยิง
• Privacy Policy พูดถึงเครื่องมือที่เว็บเราไม่ได้ใช้ด้วยซ้ำ

ของพวกนี้ไม่ Sexy เลย และนั่นแหละคือเหตุผลที่มันถูกลืม

ก่อนเริ่ม — อย่าเปลี่ยน Checklist ให้เป็นศาสนา

บางข้อในนี้ ไม่ได้จำเป็นกับทุกเว็บแบบตายตัว

Sticky CTA อาจช่วย Landing Page แต่รกมากในบาง Product

Cookie Banner ขึ้นกับ Tracking และกฎหมายของตลาดที่คุณให้บริการ

Alt text ควรมีในภาพที่มีความหมาย แต่ภาพตกแต่งบางอย่างควรเป็น decorative แทน

Terms ที่ SaaS ต้องมี อาจไม่เหมือนเว็บ Portfolio

เพราะงั้นใช้ Checklist นี้เป็น ระบบถามคำถาม ไม่ใช่ระบบ Copy-Paste ทุกอย่างลงเว็บโดยไม่คิด

📋 20 อย่างที่ผมจะเช็กก่อน Launch

🔍 5 Prompts — จาก “ดูเสร็จ” ไป “พร้อม Launch”

1️⃣ Audit ก่อน อย่าเพิ่งแก้

อันนี้สำคัญสุด

สิ่งที่คนชอบทำคือโยนเว็บให้ AI แล้วบอกว่า “เช็กแล้วแก้ให้หมดเลย”

ปัญหาคือพอมันแก้ไปพร้อมกัน เราจะไม่รู้เลยว่า ของเดิมขาดอะไร, มันแก้อะไร, แล้วมันแอบเปลี่ยนอะไรเพิ่มอีกบ้าง

รอบแรกผมอยากได้ Diagnosis อย่างเดียว

Here is my site: [paste the repo, project folder, or live URL]

Audit it against this 20-point production launch checklist:
1. custom 404 page
2. CTA above the fold
3. unique page titles
4. meta descriptions
5. Open Graph / social preview
6. favicon set
7. robots.txt
8. sitemap.xml
9. meaningful image alt text
10. mobile breakpoints
11. accessible mobile CTA
12. loading states
13. form error states
14. success / thank-you states
15. privacy policy
16. terms of service
17. cookie / consent handling where relevant
18. analytics
19. real contact route
20. image optimization

For each item, return:
- PRESENT
- PARTIAL
- MISSING

For every PARTIAL or MISSING item, show the evidence you used and explain the user impact.
Then rank the issues by launch risk: trust, conversion, broken user flow, discoverability, and legal/compliance risk.

Do not modify any files yet.
Do not fix anything yet.
I want the baseline first.

2️⃣ SEO / Shareability Pass

อันนี้คือของที่คนใช้เว็บแทบมองไม่เห็น แต่ Google, Social Platform และ Browser เห็นหมด

Fix the discoverability and shareability layer of this site.

1. Give every important public page a unique title tag under 60 characters.
2. Give every important public page a unique meta description between 120 and 155 characters.
3. Add Open Graph metadata and social card metadata with a proper preview image.
4. Generate and configure a complete favicon set, including Apple Touch Icon where appropriate.
5. Create or verify robots.txt.
6. Create or verify sitemap.xml and include every public page that should be indexed.

Do not reuse the same title or description across unrelated pages.
Do not index private, admin, staging, auth-only, or sensitive pages unless there is a clear reason.

When finished:
- list every file created or changed
- show one representative page's final metadata configuration
- tell me how to manually verify each change

3️⃣ Legal Pass — ให้ AI Draft แต่อย่าให้ AI เป็นทนาย

ส่วนนี้สร้างเร็วที่สุด และเป็นส่วนที่ Copy มั่วแล้วเสี่ยงที่สุดเหมือนกัน

ก่อนใช้ Prompt นี้ คุณต้องรู้ Stack ตัวเองก่อนว่าเก็บอะไร ใช้อะไร ส่งข้อมูลไปไหน

Draft the basic legal pages for this site.

Context:
- Data collected: [emails / payments / account data / analytics data / nothing / other]
- Analytics tools: [list the real tools]
- Payment processors: [list the real processors or none]
- Email / CRM tools: [list the real tools or none]
- Main user region: [Thailand / EU / US / other]
- Business status: [individual / sole trader / registered company / not registered yet]

Draft:
1. Privacy Policy
2. Terms of Service
3. Cookie / consent language only where relevant to the actual stack and target regions

Then create a separate section called "Needs Human Review" and list:
- every clause where you had to guess
- every missing business detail
- every third-party service you are unsure about
- every section a lawyer in my jurisdiction should review before launch

Do not invent tools, processors, tracking, data practices, company details, or legal claims that I did not provide.

4️⃣ Mobile Pass — เปิดมือถือจริงด้วย

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

Audit this site at a 390px mobile viewport, page by page.

Check and fix:
- horizontal overflow
- broken layouts
- unreadably small text
- tap targets that are difficult to use
- navigation that is awkward with one hand
- elements clipped outside the viewport
- forms that are difficult to complete on mobile
- fixed elements covering important content
- keyboard / input issues where relevant

Then evaluate the primary CTA on mobile.
Only add a sticky mobile CTA if it clearly improves the main conversion flow without covering important content or making the interface worse.

After the pass, report page by page:
1. what was broken
2. what you changed
3. what still needs human checking
4. how I can verify the main user journey on a real phone

5️⃣ Last Pass — ปิดของที่คนมักลืม

หลังจาก Search กับ Mobile ผ่านแล้ว ค่อยกวาดเรื่อง State, Contact, Analytics และ Asset

Finish the production launch pass for this site.

1. Add or improve a useful custom 404 page with routes back to important sections.
2. Add a clear success or thank-you state after every important form submission.
3. Add appropriate loading, success, empty, and error states to forms and asynchronous actions.
4. Add descriptive alt text to meaningful images and keep purely decorative images appropriately decorative.
5. Audit image sizes and compress unnecessarily large assets. Use modern formats where appropriate without visibly degrading quality.
6. Find placeholder, fake, or dead contact details and replace them with: [your real contact information].
7. Install or verify: [analytics tool].
8. Verify the events that matter to this site, such as page view, primary CTA click, signup, form submit, purchase, or booking.

Do not only tell me that implementation is complete.
Return:
- files changed
- checks or tests performed
- analytics events verified
- anything you could not verify
- anything you would still fix before launching this as your own production site

🔁 แล้วกลับไปรัน Prompt #1 อีกรอบ

อันนี้คือส่วนที่ผมไม่อยากให้ข้าม

หลังทำ #2–#5 เสร็จ ให้กลับไปรัน Audit เดิมกับ Project เดิม

ทำไม?

เพราะ AI มีนิสัยที่เราต้องจำไว้ข้อหนึ่ง:

มันสามารถบอกว่าแก้แล้วได้ โดยที่เรายังไม่ได้พิสูจน์ว่าแก้แล้วจริง

ถ้า Audit รอบสองยังขึ้น MISSING หรือ PARTIAL มันมีแค่ไม่กี่กรณี

• ยังไม่ได้แก้จริง
• แก้แล้วแต่ไม่ครบ
• แก้ผิดที่
• AI ตรวจไม่เจอ ต้อง Verify เอง

ทั้ง 4 แบบดีกว่าให้ลูกค้าเป็นคนค้นพบ

ก่อนกด Launch ผมจะทำ 5 อย่างด้วยตัวเอง

AI ช่วยเช็ก Code ได้เยอะ แต่ผมยังไม่อยาก Outsource ความรับผิดชอบทั้งหมดให้มัน

1. เปิดเว็บจากมือถือจริง แล้วเดิน Main Flow ให้จบ
2. ส่งลิงก์ให้ตัวเอง ใน LINE / Messenger / Slack เพื่อดู Social Preview
3. พิมพ์ URL มั่ว ๆ เพื่อดูหน้า 404
4. ทำ Form พังตั้งใจหนึ่งรอบ แล้วดูว่าคนใช้เข้าใจไหมว่าเกิดอะไรขึ้น
5. เปิด Realtime Analytics แล้วทำ Conversion จริงหนึ่งรอบ

ใช้เวลาไม่เยอะ แต่ช่วยแยก “AI บอกว่าผ่าน” ออกจาก “ผมเห็นเองว่าผ่าน” ได้ดีมาก

Production ไม่ได้แปลว่า Perfect

ผมไม่อยากให้ Guide นี้กลายเป็นอีกเหตุผลที่ทำให้คุณเลื่อน Launch ไปอีกสามเดือน

เว็บไม่มีวันเสร็จจริงหรอก

เดี๋ยวมี Feature ใหม่

เดี๋ยวแก้ Copy

เดี๋ยวเปลี่ยน Design

เดี๋ยวรู้ว่าคนใช้เว็บไม่เหมือนที่เราคิด

Checklist นี้มีไว้ปิด ความพังที่รู้ล่วงหน้าได้ ไม่ได้มีไว้กำจัดความไม่แน่นอนทั้งหมด

ผมชอบคิดแบบนี้:

**Demo คือของที่ทำงานตอนเราเป็นคนใช้เอง
Production คือของที่ยังพอเอาตัวรอดได้ตอนคนที่ไม่รู้บริบทเข้ามาใช้**

ถ้าของหลักทำงาน

คนรู้ว่าต้องทำอะไร

พังแล้วมีทางกลับ

มือถือใช้ได้

เราวัดผลได้

และไม่มีเรื่องพื้นฐานที่รู้อยู่แล้วแต่ยังปล่อยค้าง

ก็ Launch ได้แล้ว

ที่เหลือให้คนจริงสอนเรา

★ Made by Mew Teetawat

เช็กลิสต์ 20 ข้อ แบบติ๊กได้

ติ๊กทีละข้อขณะเช็กเว็บของคุณ (เบราว์เซอร์นี้จำไว้ให้) หรือคัดลอกทั้งชุดไปวางใน Issue, Notion หรือแชตกับทีม รายการมาจากตาราง 20 ข้อในคู่มือนี้

• 1. Custom 404 Page
• 2. CTA Above the Fold
• 3. Unique Title ทุกหน้า
• 4. Meta Description ทุกหน้าสำคัญ
• 5. Open Graph / Social Preview
• 6. Favicon Set
• 7. robots.txt
• 8. sitemap.xml
• 9. Alt Text ที่เหมาะสม
• 10. Mobile Breakpoints
• 11. Mobile CTA ที่เข้าถึงง่าย
• 12. Loading States
• 13. Form Error States
• 14. Success / Thank You State
• 15. Privacy Policy
• 16. Terms of Service
• 17. Cookie / Consent ที่เหมาะกับเว็บ
• 18. Analytics ที่ Verify แล้ว
• 19. ช่องทางติดต่อจริง
• 20. Image Optimization

เว็บ:
วันที่เช็ก:

[ ] 1. Custom 404 Page
[ ] 2. CTA Above the Fold
[ ] 3. Unique Title ทุกหน้า
[ ] 4. Meta Description ทุกหน้าสำคัญ
[ ] 5. Open Graph / Social Preview
[ ] 6. Favicon Set
[ ] 7. robots.txt
[ ] 8. sitemap.xml
[ ] 9. Alt Text ที่เหมาะสม
[ ] 10. Mobile Breakpoints
[ ] 11. Mobile CTA ที่เข้าถึงง่าย
[ ] 12. Loading States
[ ] 13. Form Error States
[ ] 14. Success / Thank You State
[ ] 15. Privacy Policy
[ ] 16. Terms of Service
[ ] 17. Cookie / Consent ที่เหมาะกับเว็บ
[ ] 18. Analytics ที่ Verify แล้ว
[ ] 19. ช่องทางติดต่อจริง
[ ] 20. Image Optimization