ย้าย Webflow ไป Astro: วิธีย้ายเว็บไซต์ Webflow โดยไม่เสียเนื้อหา ดีไซน์ และอันดับการค้นหา

คำตอบสั้น ๆ

การออกจาก Webflow ง่ายกว่าการออกจาก Framer ซึ่งไม่มีการส่งออกเป็น HTML เลย แต่ก็ง่ายกว่าแค่บางส่วนเท่านั้น ในแพ็กเกจ Workspace แบบเสียเงิน คุณส่งออก HTML, CSS, JavaScript และรูปภาพของเว็บไซต์ แล้วนำไปโฮสต์ที่ไหนก็ได้ ศูนย์ช่วยเหลือของ Webflow ก็ระบุชัดเจนไม่แพ้กันว่าอะไรบ้างที่ตกค้างอยู่ ได้แก่ เนื้อหา CMS การประมวลผลฟอร์ม การค้นหาในเว็บไซต์ การป้องกันด้วยรหัสผ่าน หน้าที่แปลภาษา และ code components ซึ่งไม่อยู่ในไฟล์ที่ส่งออก ส่วน Collection lists จะแสดงเป็นสถานะว่าง (Webflow Help)

การย้าย Webflow ไป Astro จึงเป็นการส่งออกส่วนหนึ่ง และสร้างใหม่อีกส่วนหนึ่ง คุณส่งออกสิ่งที่ Webflow ให้มา ดึง CMS ออกมาเป็น CSV หรือผ่าน API สร้างแต่ละเทมเพลตใหม่เป็นคอมโพเนนต์ Astro หาระบบใหม่มาแทนฟอร์มและการค้นหา สร้างการโต้ตอบ (interactions) ที่ต้องการเก็บไว้ขึ้นใหม่ และตั้งรีไดเรกต์ถาวรให้ทุก URL ที่เปลี่ยน หากทำตามลำดับนี้ เว็บไซต์ใหม่จะรักษาดีไซน์ เนื้อหา และอันดับการค้นหาไว้ได้

ทำไมทีมต่าง ๆ จึงย้ายจาก Webflow ไป Astro

Webflow เป็นเครื่องมือสร้างเว็บแบบภาพ (visual builder) ที่แข็งแกร่ง และทีมการตลาดจำนวนมากควรใช้ต่อไป เหตุผลที่ย้ายออกมักเป็นเรื่องความเป็นเจ้าของและค่าใช้จ่าย มากกว่าเรื่องดีไซน์:

• เว็บไซต์กลายเป็นงานของทีมวิศวกรรม เมื่อนักพัฒนาเป็นผู้แก้ไขส่วนใหญ่ การทำงานกับโค้ดเบสใน repository ของคุณเองจะเร็วกว่าการทำงานบนแคนวาสแบบภาพ และโค้ดยังวางไว้คู่กับผลิตภัณฑ์ แบ็กเอนด์ และชุดทดสอบของคุณได้
• ค่าแพ็กเกจต่อเว็บไซต์ ตามหน้าราคาของ Webflow ที่ตรวจสอบเมื่อวันที่ 13 ตุลาคม 2026 แพ็กเกจเว็บไซต์ Basic ราคา USD 15 ต่อเดือน และ Premium ซึ่งเป็นแพ็กเกจที่มี Webflow CMS ราคา USD 25 ต่อเดือน ทั้งสองแบบเรียกเก็บรายปี ส่วนการแปลภาษาเป็นส่วนเสริม เริ่มต้นที่ USD 9 ต่อเดือน
• ฟีเจอร์ที่ต้องมีแบ็กเอนด์จริง เช่น ฟอร์มที่เขียนข้อมูลลง CRM ของคุณ เนื้อหาที่จำกัดสิทธิ์การเข้าถึง การค้นหาข้ามหลายเว็บไซต์ หรืออะไรก็ตามที่ต้องทำงานบนโครงสร้างพื้นฐานของคุณเอง
• การส่งออกอย่างเดียวพาคุณออกมาไม่ได้ การส่งออกโค้ดต้องใช้แพ็กเกจ Workspace แบบเสียเงิน ไม่ใช่แค่แพ็กเกจเว็บไซต์ และไม่รวม CMS ไม่ว่าจะเลือกทางไหน การออกมาอย่างเรียบร้อยต้องมีการวางแผน

หากทีมการตลาดของคุณเผยแพร่หน้าเว็บแบบภาพทุกสัปดาห์ และเว็บไซต์ทำหน้าที่ได้ดีอยู่แล้ว การอยู่กับ Webflow ต่อก็เป็นทางเลือกที่สมเหตุสมผล การย้ายเว็บไซต์ควรได้สิ่งที่ชัดเจนกลับมา

สิ่งที่การส่งออกโค้ดของ Webflow มีและไม่มี

ที่มา: บทความช่วยเหลือของ Webflow เรื่องการส่งออกโค้ดของเว็บไซต์

สิ่งที่เราพบเมื่อตรวจเว็บไซต์ Webflow ที่เผยแพร่อยู่

เมื่อวันที่ 13 ตุลาคม 2026 เราดาวน์โหลดหน้าแรกของเว็บไซต์เจ็ดแห่งที่สร้างด้วย Webflow รวมถึง webflow.com เอง แล้วดูว่าการย้ายเว็บไซต์จะต้องนำอะไรไปด้วยบ้าง:

• ทั้งเจ็ดแห่งโหลด jQuery และรูปภาพจากเซิร์ฟเวอร์ของ Webflow รูปภาพมาจาก cdn.prod.website-files.com และศูนย์ช่วยเหลือของ Webflow เองก็ระบุว่าฟิลด์รูปภาพและไฟล์ที่ส่งออกเป็น CSV คือลิงก์ไปยังโฮสติ้งของโปรเจกต์ต้นฉบับ ซึ่งจะใช้ไม่ได้หากโปรเจกต์นั้นถูกลบ (Webflow Help) แอสเซ็ตทุกไฟล์จึงต้องดาวน์โหลดและนำไปโฮสต์ใหม่
• ทั้งเจ็ดแห่งยังใช้รูปสำหรับแชร์บนโซเชียลจาก Webflow ด้วย รูป Open Graph เป็นสิ่งที่ลืมได้ง่าย และเมื่อปิดโปรเจกต์เก่า ตัวอย่างลิงก์ (link preview) บน LinkedIn หรือ WhatsApp ก็จะไม่มีรูป
• ทั้งเจ็ดแห่งแสดงลิสต์จาก CMS ไว้ใน HTML ที่เผยแพร่โดยตรง ตั้งแต่ 3 ถึง 19 Collection lists ต่อหน้าแรก นี่เป็นข่าวดี เพราะต่างจากเว็บไซต์ Framer ซึ่งคู่มือย้าย Framer ไป Astroของเราอธิบายว่าถูกรันไทม์สร้างขึ้นใหม่หลังโหลดเสร็จ หน้า Webflow ที่เผยแพร่อยู่เป็นข้อมูลอ้างอิงที่ครบถ้วนว่าเนื้อหาใดอยู่ตรงไหน แม้ไฟล์ส่งออกโค้ดจะมีลิสต์เหล่านั้นเป็นค่าว่างก็ตาม
• ห้าในเจ็ดแห่งใช้ Webflow Interactions ซึ่งสังเกตได้จากแอตทริบิวต์ data-w-id บนองค์ประกอบสูงสุด 109 ชิ้นในหน้าแรกหน้าเดียว แต่ละรายการคือพฤติกรรมเล็ก ๆ ที่ต้องสร้างใหม่ หรือต้องตัดสินใจตัดทิ้ง

ย้าย Webflow ไป Astro ทีละขั้นตอน

1. ทำรายการทุก URL Webflow สร้าง /sitemap.xml ให้อัตโนมัติเมื่อเปิดตัวเลือกนั้นไว้ (Webflow Help) เพิ่มทุกหน้าของ Collection ดึงรายงาน Pages จาก Google Search Console ในช่วงเวลายาวที่สุดที่มี และส่งออกรีไดเรกต์ 301 ที่มีอยู่เป็น CSV จาก Site settings, Publishing (Webflow Help)
2. ส่งออกเนื้อหา ส่งออก CMS Collection แต่ละรายการเป็น CSV จากแผง CMS โดยทำหนึ่งครั้งต่อหนึ่งภาษาหากใช้ Localize และเก็บคอลัมน์ Item ID ไว้ CSV จะทำให้ข้อมูลแบนราบ ฟิลด์ reference ออกมาเป็นข้อความธรรมดา multi-reference เป็นข้อความคั่นด้วยจุลภาค และ rich text เป็น HTML สำหรับเนื้อหาที่มี reference Webflow Data API จะแสดงรายการพร้อมฟิลด์และภาษาของแต่ละรายการ ซึ่งมักสะอาดกว่าการนำไฟล์ CSV มาต่อกันใหม่
3. ดาวน์โหลดแอสเซ็ตทุกไฟล์ ทั้งรูปภาพ PDF ฟอนต์ที่คุณมีสิทธิ์นำไปโฮสต์เอง รูป Open Graph และ favicon อย่าปิดโปรเจกต์ Webflow จนกว่าเว็บไซต์ใหม่จะไม่ชี้ไปที่ website-files.com แล้ว
4. ส่งออกโค้ดไว้เป็นข้อมูลอ้างอิง หากคุณใช้แพ็กเกจ Workspace แบบเสียเงิน ให้ส่งออก HTML และ CSS แต่อย่านำขึ้นใช้งานเป็นเว็บไซต์ใหม่ เพราะจะมี webflow.js, jQuery และลิสต์ CMS ที่ว่างเปล่าติดมาด้วย ให้ใช้เพื่ออ่านค่าระยะห่าง เบรกพอยต์ และโครงสร้างคลาสที่แม่นยำ
5. วางโมเดลเนื้อหาใน Astro เปลี่ยน Collection แต่ละรายการเป็น content collection ของ Astro หรือโมเดลใน headless CMS โดยให้ reference ยังคงเป็น reference จากนั้นสร้างแต่ละเทมเพลตใหม่เป็นคอมโพเนนต์ Astro และย้ายรูปภาพไปใช้ astro:assets
6. สร้างการโต้ตอบที่สื่อความหมายขึ้นใหม่ Webflow Interactions ส่วนใหญ่เปลี่ยนเป็น CSS transition, keyframes หรือ JavaScript ไม่กี่บรรทัดได้ สำหรับโมชันที่ซับซ้อนกว่านั้น GSAP ใช้งานเชิงพาณิชย์ได้ฟรีตั้งแต่ Webflow เปิดให้ใช้ฟรีในเดือนเมษายน 2025 (Webflow) และไม่ว่าแบบไหนก็ต้องรองรับ prefers-reduced-motion
7. หาระบบใหม่แทนฟอร์ม การค้นหา และหน้าที่ป้องกันด้วยรหัสผ่าน ให้แต่ละฟอร์มมีปลายทางจริง (Cloudflare Worker บริการรับฟอร์ม หรือ CRM ของคุณ) เพิ่มดัชนีค้นหาแบบสแตติกอย่าง Pagefind หากเว็บไซต์ต้องมีการค้นหา และย้ายการป้องกันด้วยรหัสผ่านไปไว้ที่โฮสต์หรือแอปของคุณ
8. สร้างหน้าที่แปลภาษาใหม่ให้ถูกต้อง ไฟล์ส่งออกโค้ดมีเฉพาะภาษาหลัก จึงต้องสร้างแต่ละภาษาด้วย i18n routing ของ Astro โดยมีหนึ่ง URL ต่อหนึ่งภาษา และใส่ hreflang เชื่อมระหว่างกัน
9. ใช้รูปแบบ URL ให้ตรงกัน Webflow แสดงหน้าเว็บโดยไม่มีเครื่องหมายทับปิดท้าย (trailing slash) และรีไดเรกต์ /pricing/ ไปที่ /pricing ให้ตั้งค่า trailingSlash และ build.format ของ Astro เพื่อให้เว็บไซต์ใหม่สร้างที่อยู่แบบเดียวกัน (Astro configuration reference) ทุกจุดที่ไม่ตรงกันคือรีไดเรกต์ที่ไม่จำเป็นต้องมี
10. รีไดเรกต์ที่เซิร์ฟเวอร์ แล้วเปิดตัวและติดตามผล Astro ที่บิลด์แบบสแตติกโดยไม่มี adapter จะเปลี่ยนรีไดเรกต์ที่ตั้งไว้ให้เป็นหน้า meta refresh จึงควรตั้งรีไดเรกต์ 301 แบบ 1:1 ที่โฮสต์ของเว็บไซต์ เช่น ในไฟล์ _redirects ของ Cloudflare เปลี่ยน DNS เก็บโปรเจกต์ Webflow ไว้จนกว่าจะยืนยันว่าเว็บไซต์ใหม่เรียบร้อย และติดตามรายงานการจัดทำดัชนีใน Search Console ในอีกหลายสัปดาห์ถัดไป เช็กลิสต์ SEO สำหรับการย้ายเว็บไซต์ของเราครอบคลุมวันเปิดตัวและ 90 วันหลังจากนั้น

สิ่งที่เปลี่ยนไปหลังย้าย

รักษา SEO ไว้ให้ครบ

คู่มือของ Google เรื่องการย้ายเว็บไซต์ที่มีการเปลี่ยน URLใช้ได้กับกรณีนี้ ให้แมป URL เก่าทุกตัวไปยังหน้าใหม่ที่ใกล้เคียงที่สุด ใช้รีไดเรกต์ถาวรฝั่งเซิร์ฟเวอร์ และคงไว้อย่างน้อยหนึ่งปี หาก URL ยังเหมือนเดิมทั้งหมด ซึ่งการสร้างใหม่อย่างรอบคอบมักทำได้กับ Webflow สิ่งที่ต้องทำส่วนใหญ่คือตรวจว่า title, description, แท็ก canonical, ข้อมูลเชิงโครงสร้าง และรูป Open Graph ย้ายมาครบ

กับดักเฉพาะของ Webflow คือสิ่งที่หลงเหลืออยู่ ได้แก่ รูป Open Graph หรือ PDF ที่ยังโหลดจาก website-files.com ที่อยู่ staging บน webflow.io ที่ยังถูกจัดทำดัชนีอยู่ หรือหน้า CMS ที่ slug เปลี่ยนไประหว่างการย้าย ตรวจทั้งสามอย่างนี้ก่อนปิดโปรเจกต์ Webflow

Dardo ย้ายเว็บไซต์จาก Webflow อย่างไร

เราย้ายเว็บไซต์ออกจาก Webflow เป็นส่วนหนึ่งของบริการย้ายเว็บไซต์ ได้แก่ ทำรายการ URL และเนื้อหา ส่งออก CMS สร้างหน้าตัวแทนหนึ่งหน้าก่อนแล้วตรวจที่ความกว้างที่ตกลงกันไว้ จากนั้นจึงสร้างเทมเพลต ฟอร์ม และรีไดเรกต์ที่เหลือ งานสร้างเว็บไซต์คือการพัฒนาเว็บไซต์ด้วย Astro ส่วนงานโมชันคือครีเอทีฟดีเวลลอปเมนต์ เว็บไซต์นี้ dardo.studio ทำงานด้วย Astro บน Cloudflare Workers โดยเก็บเนื้อหาไว้ใน headless CMS และเราเขียนและเผยแพร่บล็อกนี้ผ่าน CMS ตัวนั้น

หากคุณกำลังพิจารณาย้าย ส่งเว็บไซต์และสิ่งที่คุณอยากเปลี่ยนมาให้เรา เราจะบอกคุณว่าการออกจาก Webflow คุ้มค่าหรือไม่ ก่อนจะเสนอราคา