Muze Labs · Playbook

สร้างเว็บองค์กร
ด้วย Claude CodeBuilding a Company Website
with Claude Code

บทเรียนจริงจากการทำ muze.co.th — ให้ทั้ง Google และ AI เจอและ “อ้างอิง” เราReal lessons from building muze.co.th — so both Google and AI find and “cite” us.

ทำไมต้องคุยเรื่องนี้ตอนนี้Why now

ยุคที่คนหาข้อมูลผ่าน AI ไม่ใช่แค่ GooglePeople now search through AI, not just Google

• คนถาม ChatGPT / Claude / Perplexity แทนการพิมพ์ GooglePeople ask ChatGPT / Claude / Perplexity instead of typing into Google
• เป้าใหม่: ไม่ใช่แค่ “ให้เจอ” แต่คือ “ให้ AI อ้างอิงเรา”New goal: not just “be found” but “be cited by AI”
• เว็บ = สินทรัพย์เชิงกลยุทธ์ ไม่ใช่โบรชัวร์The website is a strategic asset, not a brochure

Part 1 — เว็บต้องมีอะไรPart 1 — What a site must have

โครงสร้างหลักที่ทุกเว็บองค์กร ต้องมีThe core structure every company site needs

2 ตัวที่คนมองข้ามแต่ทรงพลังสุดต่อ SEO + AI คือ FAQ และ BlogThe two most underrated yet powerful for SEO + AI: FAQ and Blog

FAQ

FAQ — พระเอกเงียบของ SEO + GEOFAQ — the quiet hero of SEO + GEO

• โครงสร้าง “คำถาม → คำตอบ” = ตรงกับวิธีที่คนถาม AI เป๊ะA “question → answer” shape mirrors exactly how people ask AI
• ใส่ FAQPage schema → ได้ rich result บน Google + AI ดึง Q&A ไปตอบตรง ๆAdd FAQPage schema → rich results on Google + AI pulls the Q&A directly
• เขียนที่เดียว (faq.yaml) → ใช้ทั้งหน้าเว็บและ llmsWrite once (faq.yaml) → powers both the page and llms

Blog

Blog = เครื่องยนต์ ของ GEOThe blog is the engine of GEO

• “บทความสำคัญกว่าหน้าแรก” สำหรับ AI Search“Articles matter more than the homepage” for AI Search
• Entity-rich — ใส่ชื่อลูกค้า + ตัวเลขจริง → AI อ้างอิงเราแบบมีน้ำหนักEntity-rich — real client names + numbers → AI cites you with authority
• ยิ่งเขียน คลังยิ่งใหญ่ → surface area ใน AI/Google ยิ่งกว้างThe more you write, the larger the library → wider surface in AI/Google
• เป้าหมาย — เริ่มที่ 20 บทความ (threshold ที่ AI เริ่มมองว่าคุณเป็นผู้เชี่ยวชาญ) แล้วรักษาจังหวะ 1–2 บทความ/เดือนTarget — start at 20 articles (the threshold where AI starts treating you as an authority), then keep a pace of 1–2 articles/month

เข็มทิศThe compass

เริ่มจาก “คำถามเป้าหมาย” ไม่ใช่ดีไซน์Start from “target questions”, not design

• ตั้ง 12–20 คำถาม ที่อยากให้คนถาม AI แล้วเจอเราDefine 12–20 questions you want people to ask AI and find you
• คำถามเหล่านี้ = ตัวกำหนดว่าจะทำ FAQ / Blog / หน้าอะไรThese questions decide which FAQs / blogs / pages to build
• เช่น “บริษัทไหนทำ OTT streaming ในไทย” · “ใครวาง AI governance ให้องค์กรใหญ่”e.g. “who builds OTT streaming in Thailand” · “who sets up AI governance for enterprises”

Part 2 — ใช้ infra อะไรPart 2 — What infra

ทำไมใช้ Static Site (Hugo)Why a Static Site (Hugo)

• เบา เร็ว — 100/100 Lighthouse, เพจ ~96KB, โหลด <0.2sLight & fast — 100/100 Lighthouse, ~96KB page, loads <0.2s
• ปลอดภัย (ไม่มี DB ให้แฮก) + โฮสต์ถูกSecure (no database to hack) + cheap to host
• Build เป็นไฟล์ static ล้วน → เสิร์ฟผ่าน CDN ทั่วโลกBuilds to pure static files → served worldwide via CDN

กุญแจสำคัญThe key insight

ทำไม “ไม่มี CMS”Why “no CMS”

• เนื้อหา = ไฟล์ใน repo → Claude Code แก้ได้ตรง ๆContent = files in the repo → Claude Code edits them directly
• ถ้าใช้ WordPress / CMS → AI แตะเนื้อหาไม่ได้ = เสียพลัง AI ทั้งหมดWith WordPress / a CMS → AI can’t touch content = you lose all the AI leverage
• ไม่มี CMS = ไม่มี layer ขวางระหว่าง AI กับเนื้อหาNo CMS = no layer between AI and your content

วินัยของโครงสร้างStructural discipline

Single Source of TruthSingle Source of Truth

• llms.txt · sitemap · robots · FAQ = generate อัตโนมัติจาก template + data/llms.txt · sitemap · robots · FAQ = auto-generated from templates + data/
• เขียนที่เดียว ใช้หลายที่ · ห้ามแก้ไฟล์ผลลัพธ์ด้วยมือWrite once, use everywhere · never hand-edit the generated output
• เพิ่มบทความ/หน้าใหม่ → ไหลเข้า sitemap + llms + schema เองAdd a new page/article → it flows into sitemap + llms + schema automatically

Part 3 — ทำงานกับ Claude CodePart 3 — Working with Claude Code

CLAUDE.md = คู่มือที่ทำให้ทุกเซสชันนิ่งCLAUDE.md = the rulebook that keeps every session consistent

• Golden rules (เช่น “ทุกหน้าต้องมี 2 ภาษา”), design tokens, deploy flowGolden rules (e.g. “every page in both languages”), design tokens, deploy flow
• ระบุชัดว่าไฟล์ไหน generate อัตโนมัติ · ห้ามแก้ด้วยมือ — กัน AI เผลอไปแก้แล้วพังA table of files that are generated, do-not-edit (stops AI breaking outputs)
• ใครเปิด Claude Code ก็ได้ กฎชุดเดียวกัน ทันทีAnyone opening Claude Code inherits the same rules instantly

→ CLAUDE.md template เอาไปตั้งต้นเองได้ — อยู่หน้าสุดท้าย (Resources)→ Grab the CLAUDE.md template to start your own — on the last slide (Resources)

Workflow

วิธีทำงานที่ เวิร์กจริงThe workflow that actually works

• Verify ทุกครั้ง — build แล้วดู output จริง ไม่เชื่อแค่ source (เช่น เปิด /sitemap.xml จริง ไม่ใช่แค่ดู template)Verify every time — build, then check the real output (e.g. open /sitemap.xml, don’t just trust the template)
• แก้ที่ generator ไม่ใช่ output (เช่น แก้ data/faq.yaml ไม่ใช่แก้ HTML หน้าเว็บ)Edit the generator, not the output (e.g. edit data/faq.yaml, not the page HTML)
• Deploy มีวินัย — branch flow, ไม่แก้ prod ตรง ๆDisciplined deploys — branch flow, never edit prod directly

ตาข่ายนิรภัยSafety net

ทำไมต้องพัฒนาบน GitWhy develop on Git

• AI แก้แบบ กล้า ๆ ได้ เพราะ rollback ได้ทุกเมื่อ (git revert / reset) — ผิดพลาดก็ย้อนคืนทันทีLet AI make bold changes — you can roll back anytime (git revert / reset); a bad edit is one command away from undone
• commit ทุกการแก้ = ประวัติชัดว่า AI ทำอะไรไปบ้าง · review diff ได้ก่อนเชื่อCommit every change → a clear record of what AI did · review the diff before you trust it
• Branch flow — ทำงานบน branch, PR ก่อน merge · ไม่แตะ prod ตรง ๆBranch flow — work on a branch, PR before merge · never touch prod directly
• Deploy ผูกกับ git — push → merge ไม่มีอัปโหลดไฟล์ด้วยมือDeploys ride on git — push → merge, no hand-uploading files

ชั้นเทคนิคTechnical layer

GEO เชิงเทคนิค — ให้ AI อ่านง่ายTechnical GEO — make it easy for AI

• llms.txt / llms-full.txt — สรุปองค์กรแบบ LLM อ่านง่ายllms.txt / llms-full.txt — an LLM-friendly summary of the org
• Rich JSON-LD — Organization, Service, FAQ, ReviewRich JSON-LD — Organization, Service, FAQ, Review
• เปิด AI crawler ใน robots (GPTBot, ClaudeBot, PerplexityBot…)Allow AI crawlers in robots (GPTBot, ClaudeBot, PerplexityBot…)

Part 4 — วัดผลPart 4 — Measure

Query-First Validation LoopQuery-First validation loop

เปลี่ยน GEO จาก “เดา” เป็น “วัดผลได้” — AI เป็นทั้งคนตรวจและคนช่วยปิด gapTurns GEO from “guesswork” into “measurable” — AI both audits and helps close the gaps

บทเรียนLessons

กับดักที่เจอ จริงReal pitfalls we hit

• AI ชอบยัดทุกอย่างไว้ไฟล์เดียว — เคยเจอหน้าเดียวเกือบ 2 หมื่นบรรทัด ต้องแยกเอง · กำหนดโครงสร้างไฟล์ใน CLAUDE.md ตั้งแต่แรกAI loves dumping everything into one file — we hit a ~20k-line page and had to split it · define the file structure in CLAUDE.md up front
• static file บัง generated file (เช่น robots.txt ที่วางเองทับตัว gen)A static file shadows a generated one (e.g. a hand-placed robots.txt over the generated one)
• หน้าใหม่ต้อง “ครบวงจร” — llms? sitemap? schema? hreflang? OG?New pages must be “end-to-end” — llms? sitemap? schema? hreflang? OG?
• หน้า JS หนัก (canvas) index ช้า — Google ต้อง render ก่อนJS-heavy pages (canvas) index slowly — Google must render first

ผลลัพธ์Results

พิสูจน์ได้ จริงProven outcomes

สรุปTakeaways

4 ข้อที่เอากลับบ้าน4 things to take home

• เริ่มจาก คำถามเป้าหมาย ไม่ใช่ดีไซน์Start from target questions, not design
• โครงสร้างต้องมี FAQ + Blog ที่ entity-richStructure must include an entity-rich FAQ + Blog
• Infra เป็น ไฟล์ (Hugo, ไม่มี CMS) ให้ AI แก้ได้Infra as files (Hugo, no CMS) so AI can edit it
• CLAUDE.md + verify ทุกครั้ง = ทำงานกับ Claude Code ให้นิ่งCLAUDE.md + verify every time = a stable Claude Code workflow

คนกำหนดทิศ · AI เร่งผลิต — เล็ง AI Search ไม่ใช่แค่ GoogleHumans set direction · AI accelerates — aim at AI Search, not just Google

เอาไปใช้ต่อTake it with you

Resources — หยิบไปใช้ได้เลยResources — grab & go

⬇️ดาวน์โหลด CLAUDE.md templateDownload the CLAUDE.md templateแม่แบบ generic เอาไปตั้งต้นโปรเจกต์ของคุณA generic starter for your own project 📚บทความ: Muze สร้างงานด้วย AI ยังไงArticle: How Muze builds with AI 🏆บทความ: เว็บ 100/100 ด้วย Claude CodeArticle: A 100/100 website with Claude Code 💬คุยกับเราเพิ่มเติมTalk to usปรึกษาการทำเว็บ / AI ให้องค์กรของคุณLet's build your company's website / AI

สแกนเพื่อเปิดหน้านี้Scan to open this page

Enjoy Building
Website with AI Enjoy Building
Website with AI

muze.co.th