نقل موقع Webflow إلى Astro: كيف تنقل موقعك دون أن تخسر محتواه أو تصميمه أو ترتيبه في نتائج البحث

الإجابة المختصرة

مغادرة Webflow أسهل من مغادرة Framer الذي لا يتيح تصدير HTML أصلًا، لكن التصدير لا يقطع بك إلا جزءًا من الطريق. ففي خطط Workspace المدفوعة يمكنك تصدير ملفات HTML وCSS وJavaScript والصور الخاصة بموقعك واستضافتها في أي مكان. غير أن مركز المساعدة لدى Webflow واضح بالقدر نفسه بشأن ما يبقى خلفك: محتوى نظام إدارة المحتوى (CMS)، ومعالجة النماذج، والبحث في الموقع، والحماية بكلمة مرور، والصفحات المترجمة، ومكوّنات الشيفرة (code components) لا يشملها التصدير، وتظهر قوائم المجموعات (Collection lists) في حالتها الفارغة (Webflow Help).

لذا فنقل موقع Webflow إلى Astro جزء منه تصدير وجزء إعادة بناء. تصدّر ما يقدّمه Webflow، وتستخرج محتوى نظام إدارة المحتوى بصيغة CSV أو عبر واجهة API، وتعيد بناء كل قالب على هيئة مكوّنات Astro، وتستبدل النماذج والبحث، وتعيد إنشاء التفاعلات التي تريد الإبقاء عليها، وتمنح كل رابط يتغيّر إعادة توجيه دائمة. وإذا سرت بهذا الترتيب، يحتفظ الموقع الجديد بتصميمه ومحتواه وترتيبه في نتائج البحث.

لماذا تنتقل الفرق من Webflow إلى Astro

Webflow أداة بناء بصرية قوية، وكثير من فرق التسويق ينبغي أن تبقى عليها. وأسباب المغادرة تتعلق عادةً بالملكية والتكلفة لا بالتصميم:

• يصبح الموقع من مسؤولية فريق التطوير. حين يجري المطوّرون معظم التعديلات، يكون العمل على شيفرة في مستودعك الخاص أسرع من العمل على لوحة تصميم بصرية، ويمكن لهذه الشيفرة أن تعيش بجوار منتجك وواجهتك الخلفية (backend) واختباراتك.
• تكلفة الخطة لكل موقع. بحسب صفحة أسعار Webflow التي راجعناها في 13 أكتوبر 2026، تكلّف خطة الموقع Basic مبلغ 15 دولارًا أمريكيًا شهريًا، وتكلّف خطة Premium، وهي الخطة التي تتضمن Webflow CMS، مبلغ 25 دولارًا شهريًا، وكلتاهما بفوترة سنوية. أما التوطين (Localization) فإضافة تبدأ من 9 دولارات شهريًا.
• ميزات تحتاج إلى واجهة خلفية حقيقية: نماذج تكتب البيانات في نظام CRM لديك، أو محتوى مقيّد الوصول، أو بحث يشمل أكثر من موقع، أو أي شيء يجب أن يعمل على بنيتك التحتية الخاصة.
• التصدير وحده لا يُخرجك من Webflow. يتطلب تصدير الشيفرة خطة Workspace مدفوعة، لا خطة موقع فحسب، ولا يشمل نظام إدارة المحتوى. فالخروج النظيف يحتاج إلى تخطيط في كل الأحوال.

إذا كان فريق التسويق لديك ينشر الصفحات بصريًا كل أسبوع والموقع يؤدي مهمته، فالبقاء على Webflow خيار معقول. وينبغي أن يحقق الترحيل شيئًا محددًا في المقابل.

ما الذي يشمله تصدير الشيفرة في Webflow وما الذي يستبعده

المصدر: مقالة مركز المساعدة لدى Webflow حول تصدير شيفرة الموقع.

ما رأيناه عند فحص مواقع منشورة على Webflow

في 13 أكتوبر 2026 نزّلنا الصفحات الرئيسية لسبعة مواقع مبنية على Webflow، منها webflow.com نفسه، ونظرنا في ما سيتعيّن على الترحيل نقله:

• المواقع السبعة كلها تحمّل jQuery وصورها من خوادم Webflow. تأتي الصور من cdn.prod.website-files.com، ويشير مركز المساعدة لدى Webflow نفسه إلى أن حقول الصور والملفات المصدَّرة إلى CSV روابطُ إلى استضافة المشروع الأصلي، وأنها تتعطل إذا حُذف ذلك المشروع (Webflow Help). لذا يجب تنزيل كل ملف واستضافته من جديد.
• المواقع السبعة كلها تقدّم صورة المشاركة على الشبكات الاجتماعية من Webflow أيضًا. من السهل نسيان صورة Open Graph، وتفقد معاينات الروابط على LinkedIn أو WhatsApp صورتها بمجرد إغلاق المشروع القديم.
• المواقع السبعة كلها تعرض قوائم نظام إدارة المحتوى مباشرةً في HTML المنشور، بين 3 و19 قائمة مجموعات في كل صفحة رئيسية. وهذا خبر جيد: فعلى عكس موقع Framer الذي يُعاد بناؤه بواسطة بيئة تشغيل (runtime) بعد تحميله، كما يوضح دليلنا لنقل موقع Framer إلى Astro، تُعدّ صفحة Webflow المنشورة مرجعًا كاملًا لمكان كل محتوى، حتى وإن ترك تصدير الشيفرة تلك القوائم فارغة.
• خمسة من المواقع السبعة تستخدم Webflow Interactions، وتدلّ عليها سمات data-w-id الموجودة على ما يصل إلى 109 عناصر في صفحة رئيسية واحدة. وكل تفاعل منها سلوك صغير يجب إعادة إنشائه، أو قرار بالاستغناء عنه.

نقل موقع Webflow إلى Astro خطوة بخطوة

1. اجرد كل الروابط. ينشئ Webflow ملف /sitemap.xml تلقائيًا عند تفعيل هذا الخيار (Webflow Help). أضف كل صفحة من صفحات المجموعات، واستخرج تقرير الصفحات (Pages) من Google Search Console لأطول نطاق زمني متاح، وصدّر عمليات إعادة التوجيه 301 الحالية بصيغة CSV من Site settings ثم Publishing (Webflow Help).
2. صدّر المحتوى. صدّر كل مجموعة في نظام إدارة المحتوى إلى CSV من لوحة CMS، مرة لكل لغة إن كنت تستخدم Localize، واحتفظ بعمود Item ID. يُسطّح ملف CSV البيانات: تخرج حقول المرجع (reference) نصًا عاديًا، والمراجع المتعددة (multi-reference) نصًا مفصولًا بفواصل، والنص المنسّق (rich text) بصيغة HTML. ولكل ما يتضمن مراجع، تعرض واجهة Webflow Data API العناصر مع حقولها ولغاتها، وهي عادةً أنظف من إعادة تجميع ملفات CSV معًا.
3. نزّل كل الملفات. الصور، وملفات PDF، والخطوط التي يسمح ترخيصها باستضافتها بنفسك، وصور Open Graph، وأيقونة الموقع (favicon). لا تُغلق مشروع Webflow إلى أن يتوقف الموقع الجديد عن الإشارة إلى website-files.com.
4. صدّر الشيفرة لتكون مرجعًا. إذا كنت على خطة Workspace مدفوعة، فصدّر HTML وCSS. لا تنشرهما على أنهما الموقع الجديد، فسيحملان webflow.js وjQuery وقوائم مجموعات فارغة. استخدمهما لقراءة المسافات ونقاط التوقف (breakpoints) وبنية الأصناف (classes) بدقة.
5. صمّم نموذج المحتوى في Astro. حوّل كل مجموعة إلى مجموعة محتوى (content collection) في Astro أو إلى نموذج في نظام إدارة محتوى headless، مع الإبقاء على المراجع مراجعَ، ثم أعد بناء كل قالب على هيئة مكوّنات Astro وانقل الصور إلى astro:assets.
6. أعد إنشاء التفاعلات التي تحمل معنى. تتحول معظم Webflow Interactions إلى انتقالات CSS أو إطارات مفتاحية (keyframes) أو بضعة أسطر من JavaScript. وللحركة الأثقل، أصبحت مكتبة GSAP مجانية للاستخدام التجاري منذ أن جعلها Webflow كذلك في أبريل 2025 (Webflow). وفي الحالتين، احترم إعداد prefers-reduced-motion.
7. استبدل النماذج والبحث والصفحات المحمية. امنح كل نموذج نقطة استقبال حقيقية (Cloudflare Worker، أو خدمة نماذج، أو نظام CRM لديك)، وأضف فهرس بحث ثابتًا مثل Pagefind إذا كان الموقع يحتاج إلى بحث، وانقل أي حماية بكلمة مرور إلى جهة الاستضافة أو إلى تطبيقك.
8. أعد بناء الصفحات المترجمة كما ينبغي. لا يشمل تصدير الشيفرة إلا اللغة الأساسية، لذا ابنِ كل لغة باستخدام توجيه i18n في Astro، برابط مستقل لكل لغة ووسوم hreflang بينها.
9. طابِق صيغة الروابط. يقدّم Webflow الصفحات دون شرطة مائلة في النهاية، ويعيد توجيه /pricing/ إلى /pricing. اضبط trailingSlash وbuild.format في Astro لينتج الموقع الجديد العناوين نفسها (مرجع إعدادات Astro)؛ فكل اختلاف هو إعادة توجيه لم تكن بحاجة إليها.
10. أعد التوجيه من الخادم، ثم أطلق الموقع وراقب. يحوّل بناء Astro الثابت دون محوّل (adapter) عمليات إعادة التوجيه المضبوطة إلى صفحات meta-refresh، لذا اضبط عمليات إعادة توجيه 301 بنظام 1:1 حيث يُستضاف الموقع، مثلًا في ملف _redirects على Cloudflare. بدّل إعدادات DNS، وأبقِ مشروع Webflow إلى أن يتم التحقق من الموقع الجديد، وتابع تقارير الفهرسة في Search Console خلال الأسابيع القليلة التالية. وتغطي قائمة تحقق SEO لترحيل المواقع التي أعددناها يوم الإطلاق والأيام التسعين التي تليه.

ما الذي يتغيّر بعد الانتقال

الحفاظ على SEO

تنطبق هنا إرشادات Google بشأن نقل المواقع مع تغيير الروابط: اربط كل رابط قديم بأقرب مكافئ جديد له، واستخدم عمليات إعادة توجيه دائمة من جهة الخادم، وأبقِها سنة على الأقل. وإذا بقيت الروابط كما هي، وهو ما تستطيع إعادة البناء المتأنية تحقيقه في أحيان كثيرة مع Webflow، فكل ما عليك في الغالب هو التحقق من انتقال العناوين والأوصاف ووسوم canonical والبيانات المنظمة وصور Open Graph.

الفخاخ الخاصة بـWebflow هي البقايا: صورة Open Graph أو ملف PDF ما زال يُقدَّم من website-files.com، أو عنوان اختباري (staging) على webflow.io ما زال مفهرسًا، أو صفحة في نظام إدارة المحتوى تغيّر الـslug الخاص بها أثناء النقل. تحقّق من الثلاثة قبل إغلاق مشروع Webflow.

كيف تنفّذ Dardo ترحيل مواقع Webflow

ننفّذ عمليات الانتقال من Webflow ضمن خدمة نقل المواقع: جرد الروابط والمحتوى، ثم تصدير نظام إدارة المحتوى، ثم إعادة بناء صفحة تمثيلية أولًا ومراجعتها على عروض شاشة متفق عليها، ثم بقية القوالب والنماذج وعمليات إعادة التوجيه. أما البناء نفسه فهو تطوير مواقع الويب بإطار Astro، وأعمال الحركة من التطوير الإبداعي. وهذا الموقع، dardo.studio، يعمل بإطار Astro على Cloudflare Workers ومحتواه في نظام إدارة محتوى headless، ونكتب هذه المدونة وننشرها عبر نظام إدارة المحتوى ذاك.

إذا كنت تفكّر في الانتقال، أرسل إلينا الموقع وما تريد تغييره. سنخبرك إن كانت مغادرة Webflow تستحق العناء قبل أن نقدّم عرض سعر.