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

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

يقول مركز المساعدة لدى Framer صراحةً إنه لا يوفّر تصدير HTML للاستضافة الذاتية (Framer Help). لذا فنقل الموقع من Framer إلى Astro إعادة بناء وليس عملية تصدير. تلتقط الموقع المنشور ليكون مرجعًا، وتعيد بناء كل قالب على هيئة مكوّنات Astro، وتنقل محتوى نظام إدارة المحتوى إلى مجموعات (collections)، وتعيد إنشاء الحركة التي تحتاج إليها فعلًا، وتمنح كل رابط يتغيّر إعادة توجيه دائمة.

إذا سرت بهذا الترتيب، يمكن أن يبدو الموقع الجديد كما كان، وأن يحمّل قدرًا أقل من JavaScript، وأن يحتفظ بترتيبه في نتائج البحث. أما إذا تخطّيت الالتقاط أو خريطة إعادة التوجيه، فستنتهي بإعادة تصميم لم يطلبها أحد وبتراجع في الزيارات القادمة من البحث.

لماذا تغادر الفرق Framer

Framer أداة جيدة لتصميم المواقع التسويقية ونشرها بسرعة. وأسباب المغادرة عادةً عملية لا جمالية:

• الاستضافة والملكية. يعمل موقع Framer على خوادم Framer. والفرق التي تريد الشيفرة في مستودعها الخاص، أو على استضافتها الخاصة، أو بجوار الواجهة الخلفية (backend) الخاصة بها، تحتاج إلى إعادة بناء.
• تكلفة الخطة لكل موقع. بحسب صفحة أسعار Framer التي راجعناها في 12 أكتوبر 2026، تكلّف خطة Basic مبلغ 10 دولارات أمريكية شهريًا، وخطة Pro التي تضيف عمليات إعادة التوجيه 30 دولارًا شهريًا، وكلتاهما بفوترة سنوية. أما التوطين (Localization) فإضافة مدفوعة.
• حدود إعادة التوجيه. لا تعمل عمليات إعادة التوجيه في Framer إلا للمسارات داخل النطاق نفسه (Framer Help).
• النماذج والبيانات والتكاملات التي تحتاج إلى واجهة خلفية حقيقية: نظام CRM، أو نظام حجوزات، أو محتوى مقيّد الوصول، أو أي شيء يجب أن يعمل على بنيتك التحتية الخاصة.

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

ما تعلّمناه من بناء أداة لالتقاط مواقع Framer

بنت Dardo أداة داخلية تلتقط صفحة Framer منشورة، لموقع تملكه، وتحوّلها إلى ملف مرجعي مستقل إلى جانب متتبّع لترحيلها إلى Astro يضم صفًا لكل عنصر يجب إعادة بنائه. وقد علّمنا بناؤها أين تُخفي مواقع Framer تعقيدها:

• الملفات موجودة على شبكة CDN الخاصة بـFramer. تُحمَّل الصور والخطوط والشيفرة من framerusercontent.com ونطاقات مرتبطة به. وتطلب الصور المتجاوبة الملف نفسه بعدة عروض (?width=512 و?width=1024)، لذا تحتفظ الأداة بملف محلي واحد لكل صورة، وهو الأكبر.
• يصل JavaScript على طبقات. يحمّل Framer وحدات صغيرة لا تفعل سوى إعادة تصدير الحزمة الحقيقية، لذا تفوّت جولة فحص واحدة جزءًا من الشيفرة. وتواصل الأداة إعادة الفحص إلى أن لا تظهر أي وحدة جديدة.
• محتوى نظام إدارة المحتوى بصيغة ملفات مستقلة. تُشحن مجموعات Framer CMS على هيئة ملفات .framercms تجلبها الصفحة من شبكة CDN على شكل نطاقات من البايتات (byte ranges). وعلى استضافة ثابتة عادية تعيد هذه الطلبات الملف كاملًا، كما أن الوحدة التي تبني روابطها تشير مجددًا إلى Framer.
• بيئة التشغيل تعيد كتابة الصفحة بعد تحميلها. تُجري بيئة تشغيل React في Framer عملية hydration على HTML، وقد تعيد إدراج عناصر أزلتها. فشارة «Made in Framer» مثلًا تُعاد إضافتها عبر hydration داخل حاوية خاصة بها.
• النماذج تعتمد على Framer. لا تحمل النماذج الملتقطة خاصية action في HTML، ولا يعمل إرسالها إلا عبر بيئة تشغيل Framer في المتصفح.
• وسوم SEO تشير إلى Framer. ما لم تُعَد كتابتها، تظل روابط canonical وOpen Graph تعلن عنوان Framer الأصلي.
• الحركة بيانات. تُخزَّن تأثيرات الظهور (Appear effects) في الصفحة على هيئة بيانات JSON، لذا تسجّلها الأداة مع الإطارات المفتاحية (keyframes) وتوقيت كل حركة قيد التشغيل.

الاستنتاج الذي خرجنا به: التصدير دليل وليس هو المُخرَج النهائي. لا ننشر أبدًا HTML الملتقط ولا بيئة تشغيل Framer، بل يخبراننا بدقة بما يجب إعادة بنائه.

من Framer إلى Astro خطوة بخطوة

1. اجرد كل الروابط. ابدأ من ملف sitemap.xml للموقع، وأضف كل صفحة من نظام إدارة المحتوى، واستخرج تقرير الصفحات (Pages) من Google Search Console لأطول نطاق زمني متاح. ودوّن أي عمليات إعادة توجيه مضبوطة مسبقًا في Framer ضمن Site Settings ثم Hosting.
2. صدّر ما يسمح به Framer. يقول Framer إن محتوى نظام إدارة المحتوى يمكن تصديره عبر إضافات إلى صيغ مثل CSV أو JSON (Framer Help). نزّل كل صورة وكل ملف، وتحقق من ترخيص كل خط قبل استضافته بنفسك.
3. التقط الموقع المنشور ليكون مرجعًا. سجّل كل قالب عند كل نقطة توقف (breakpoint)، إضافةً إلى توقيت كل حركة تريد الإبقاء عليها. تلتقط أداتنا الصفحات بعرض 1440 و810 و390 بكسل، ثم عند بكسل واحد أقل من كل نقطة توقف تجدها في CSS الموقع، وعندها تمامًا، وبكسل واحد فوقها.
4. أعد بناء القوالب على هيئة مكوّنات Astro. انقل مجموعات نظام إدارة المحتوى إلى مجموعات المحتوى (content collections) أو إلى نظام إدارة محتوى headless، والصور إلى astro:assets، والصفحات المترجمة إلى توجيه i18n في Astro، برابط مستقل لكل لغة.
5. أعد إنشاء الحركة التي تحمل معنى. تتحول معظم تأثيرات Framer إلى انتقالات CSS أو إطارات مفتاحية أو سكربت صغير. واحترم إعداد prefers-reduced-motion. وفي إحدى عمليات إعادة البناء التي أجريناها بأنفسنا من Framer إلى Astro، لموقع من 18 مسارًا لم يكن مشروعًا لعميل، تطابقت 217 من أصل 219 حالة تمرير وتفاعل مع الأصل ضمن فارق 1% في البكسلات.
6. امنح كل نموذج نقطة استقبال حقيقية. وجّه كل نموذج إلى معالج خاص بك (Cloudflare Worker، أو خدمة نماذج، أو نظام CRM لديك)، واختبر وصول الإرسالات في بيئة الاختبار.
7. انقل بيانات البحث الوصفية. العناوين والأوصاف ووسوم Open Graph والبيانات المنظمة ووسم canonical يشير إلى الصفحة نفسها في كل صفحة، إضافةً إلى خريطة موقع XML جديدة.
8. أعد التوجيه من الخادم لا من HTML. يحوّل بناء Astro الثابت دون محوّل (adapter) عمليات إعادة التوجيه المضبوطة إلى صفحات meta-refresh لا تحمل رمز حالة HTTP (مرجع إعدادات Astro). اضبط عمليات إعادة توجيه 301 بنظام 1:1 حيث يُستضاف الموقع، مثلًا في ملف _redirects على Cloudflare أو في Worker.
9. أطلق الموقع، ثم راقب. بدّل إعدادات DNS، وأبقِ مشروع Framer إلى أن يتم التحقق من الموقع الجديد، وتابع تقارير الفهرسة والصفحات في Search Console خلال الأسابيع القليلة التالية. وتغطي قائمة تحقق SEO لترحيل المواقع يوم الإطلاق والأيام التسعين التي تليه.

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

الحفاظ على SEO

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

الفخ الخاص بـFramer هو عنوان Framer المتبقي. تأكد من أنه لا يوجد وسم canonical أو إدخال في خريطة الموقع أو وسم Open Graph ما زال يذكر رابط Framer القديم، وأن مشروع Framer أُلغي نشره أو أُعيد توجيهه بمجرد أن يصبح الموقع الجديد متاحًا.

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

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

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