Framer से Astro माइग्रेशन: डिज़ाइन और रैंकिंग खोए बिना Framer साइट कैसे ले जाएँ

संक्षिप्त उत्तर

Framer का अपना हेल्प सेंटर साफ़ कहता है कि वह सेल्फ़-होस्टिंग के लिए HTML एक्सपोर्ट की सुविधा नहीं देता (Framer Help)। इसलिए Framer से Astro पर जाना एक्सपोर्ट नहीं, बल्कि रीबिल्ड है, यानी साइट को दोबारा बनाना। आप पब्लिश हुई साइट को रेफ़रेंस के तौर पर कैप्चर करते हैं, हर टेम्पलेट को Astro कंपोनेंट के रूप में दोबारा बनाते हैं, CMS कंटेंट को कलेक्शन में ले जाते हैं, सिर्फ़ वही मोशन दोबारा बनाते हैं जिसकी सच में ज़रूरत है, और बदलने वाले हर URL को एक स्थायी रीडायरेक्ट देते हैं।

इसी क्रम में किया जाए तो नई साइट दिखने में वैसी ही रह सकती है, कम JavaScript लोड कर सकती है और अपनी रैंकिंग बनाए रख सकती है। कैप्चर या रीडायरेक्ट मैप छोड़ दिया, तो नतीजा होता है एक ऐसा रीडिज़ाइन जो किसी ने माँगा ही नहीं था, और सर्च ट्रैफ़िक में गिरावट।

टीमें Framer क्यों छोड़ती हैं

Framer मार्केटिंग साइटें जल्दी डिज़ाइन और पब्लिश करने के लिए एक अच्छा टूल है। उसे छोड़ने की वजहें आमतौर पर दिखावट से नहीं, व्यावहारिक ज़रूरतों से जुड़ी होती हैं:

• होस्टिंग और मालिकाना हक। Framer साइट Framer के सर्वरों पर चलती है। जो टीमें कोड अपनी रिपॉज़िटरी में, अपने होस्ट पर या अपने बैकएंड के साथ रखना चाहती हैं, उन्हें साइट दोबारा बनानी पड़ती है।
• हर साइट के प्लान का खर्च। Framer के प्राइसिंग पेज पर, 12 अक्टूबर 2026 को देखने पर, Basic प्लान USD 10 प्रति माह और Pro प्लान, जिसमें साइट रीडायरेक्ट जुड़ते हैं, USD 30 प्रति माह था, दोनों सालाना बिलिंग पर। लोकलाइज़ेशन एक पेड ऐड-ऑन है।
• रीडायरेक्ट की सीमाएँ। Framer के रीडायरेक्ट सिर्फ़ उसी डोमेन के पाथ के लिए काम करते हैं (Framer Help)।
• फ़ॉर्म, डेटा और इंटीग्रेशन जिन्हें असली बैकएंड चाहिए: CRM, बुकिंग सिस्टम, गेटेड कंटेंट या कुछ भी जिसे आपके अपने इन्फ्रास्ट्रक्चर पर चलना हो।

अगर आपकी मार्केटिंग टीम हर हफ़्ते विज़ुअली पेज बनाती और एडिट करती है और साइट अपना काम कर रही है, तो Framer पर बने रहना सही फ़ैसला हो सकता है। माइग्रेशन में डिज़ाइन और डेवलपमेंट का समय लगता है; उसके बदले कुछ ठोस मिलना चाहिए।

Framer कैप्चर टूल बनाकर हमने क्या सीखा

Dardo ने एक इंटरनल टूल बनाया है जो किसी पब्लिश हुए Framer पेज को, उस साइट के लिए जिसके आप मालिक हैं, कैप्चर करता है और उसे एक स्टैंडअलोन रेफ़रेंस फ़ाइल और एक Astro माइग्रेशन ट्रैकर में बदल देता है, जिसमें दोबारा बनाई जाने वाली हर चीज़ की एक पंक्ति होती है। इसे बनाते हुए हमें पता चला कि Framer साइटें अपनी जटिलता कहाँ छिपाती हैं:

• एसेट Framer के CDN पर रहते हैं। इमेज, फ़ॉन्ट और कोड framerusercontent.com और उससे जुड़े डोमेन से लोड होते हैं। रिस्पॉन्सिव इमेज एक ही फ़ाइल को कई चौड़ाइयों में माँगती हैं (?width=512, ?width=1024), इसलिए कैप्चर हर इमेज की एक ही लोकल फ़ाइल रखता है, सबसे बड़ी वाली।
• JavaScript परतों में आता है। Framer छोटे मॉड्यूल लोड करता है जो सिर्फ़ असली बंडल को री-एक्सपोर्ट करते हैं, इसलिए एक बार स्कैन करने पर कोड छूट जाता है। टूल तब तक दोबारा स्कैन करता रहता है जब तक कोई नया मॉड्यूल सामने आना बंद न हो जाए।
• CMS कंटेंट एक अलग फ़ाइल फ़ॉर्मेट में होता है। Framer CMS कलेक्शन .framercms फ़ाइलों के रूप में आते हैं, जिन्हें पेज CDN से byte range में फ़ेच करता है। किसी सामान्य स्टैटिक होस्ट पर ये रिक्वेस्ट पूरी फ़ाइल लौटाती हैं, और जो मॉड्यूल इनके URL बनाता है वह वापस Framer की ओर इशारा करता है।
• रनटाइम लोड होने के बाद पेज को दोबारा लिखता है। Framer का React रनटाइम HTML को hydrate करता है और आपके हटाए गए एलिमेंट दोबारा डाल सकता है। उदाहरण के लिए, "Made in Framer" बैज अपने अलग कंटेनर में hydrate होता है।
• फ़ॉर्म Framer पर निर्भर हैं। कैप्चर किए गए फ़ॉर्म में कोई HTML action नहीं होता; सबमिशन सिर्फ़ Framer के क्लाइंट रनटाइम के ज़रिए काम करते हैं।
• SEO टैग Framer की ओर इशारा करते हैं। अगर इन्हें दोबारा न लिखा जाए, तो canonical और Open Graph URL मूल Framer पते का ही प्रचार करते रहते हैं।
• मोशन भी डेटा है। Appear इफ़ेक्ट पेज में JSON पेलोड के रूप में सेव होते हैं, इसलिए टूल उन्हें रिकॉर्ड करता है, साथ ही चल रहे हर एनिमेशन के keyframes और टाइमिंग भी।

हमारा निष्कर्ष: एक्सपोर्ट सबूत है, डिलीवरेबल नहीं। हम कैप्चर किया गया HTML या Framer का रनटाइम कभी शिप नहीं करते। वे हमें ठीक-ठीक बताते हैं कि क्या दोबारा बनाना है।

Framer से Astro, चरण दर चरण

1. हर URL की सूची बनाएँ। साइट के sitemap.xml से शुरू करें, हर CMS पेज जोड़ें और Google Search Console से उपलब्ध सबसे लंबी अवधि की Pages रिपोर्ट निकालें। Framer में Site Settings, Hosting के तहत पहले से सेट किए गए रीडायरेक्ट भी नोट करें।
2. जो Framer देता है, वह एक्सपोर्ट करें। Framer के अनुसार CMS कंटेंट प्लगइन की मदद से CSV या JSON जैसे फ़ॉर्मेट में एक्सपोर्ट किया जा सकता है (Framer Help)। हर इमेज और फ़ाइल डाउनलोड करें, और सेल्फ़-होस्ट करने से पहले हर फ़ॉन्ट का लाइसेंस जाँचें।
3. पब्लिश हुई साइट को रेफ़रेंस के तौर पर कैप्चर करें। हर टेम्पलेट को हर ब्रेकपॉइंट पर रिकॉर्ड करें, साथ ही हर उस एनिमेशन की टाइमिंग जिसे आप रखना चाहते हैं। हमारा टूल पेजों को 1440, 810 और 390 पिक्सेल चौड़ाई पर कैप्चर करता है, फिर साइट की CSS में मिले हर ब्रेकपॉइंट पर, उससे एक पिक्सेल नीचे और एक पिक्सेल ऊपर।
4. टेम्पलेट को Astro कंपोनेंट के रूप में दोबारा बनाएँ। CMS कलेक्शन को content collections या headless CMS में, इमेज को astro:assets में, और लोकलाइज़ किए गए पेजों को Astro की i18n रूटिंग में ले जाएँ, हर भाषा के लिए एक URL।
5. वही मोशन दोबारा बनाएँ जिसका कोई मतलब है। Framer के ज़्यादातर इफ़ेक्ट CSS transitions, keyframes या एक छोटी स्क्रिप्ट बन जाते हैं। prefers-reduced-motion का सम्मान करें। हमारे अपने एक Framer-से-Astro रीबिल्ड में, 18 रूट वाली एक साइट जो किसी क्लाइंट का प्रोजेक्ट नहीं थी, 219 में से 217 स्क्रॉल और इंटरैक्शन स्टेट 1% पिक्सेल अंतर के भीतर मूल साइट से मेल खाए।
6. हर फ़ॉर्म को असली एंडपॉइंट दें। हर फ़ॉर्म को अपने हैंडलर (Cloudflare Worker, कोई फ़ॉर्म सर्विस या आपका CRM) से जोड़ें और स्टेजिंग पर डिलीवरी टेस्ट करें।
7. सर्च मेटाडेटा साथ ले जाएँ। हर पेज पर टाइटल, डिस्क्रिप्शन, Open Graph टैग, स्ट्रक्चर्ड डेटा और self-referencing canonical, साथ में एक नया XML साइटमैप।
8. रीडायरेक्ट सर्वर पर करें, HTML में नहीं। बिना एडैप्टर वाला स्टैटिक Astro बिल्ड कॉन्फ़िगर किए गए रीडायरेक्ट को ऐसे meta-refresh पेजों में बदल देता है जिनका कोई HTTP स्टेटस कोड नहीं होता (Astro कॉन्फ़िगरेशन रेफ़रेंस)। जहाँ साइट होस्ट है, वहीं 1:1 301 रीडायरेक्ट सेट करें, जैसे Cloudflare की _redirects फ़ाइल में या किसी Worker में।
9. लॉन्च करें, फिर नज़र रखें। DNS बदलें, नई साइट वेरिफ़ाई होने तक Framer प्रोजेक्ट बनाए रखें, और अगले कुछ हफ़्तों तक Search Console की इंडेक्सिंग और Pages रिपोर्ट देखते रहें। हमारी वेबसाइट माइग्रेशन SEO चेकलिस्ट लॉन्च के दिन और उसके बाद के 90 दिनों को कवर करती है।

माइग्रेशन के बाद क्या बदलता है

SEO को सुरक्षित रखना

Google की URL बदलाव के साथ साइट मूव की गाइड यहाँ भी लागू होती है: हर पुराने URL को उसके सबसे नज़दीकी नए समकक्ष से मैप करें, स्थायी सर्वर-साइड रीडायरेक्ट इस्तेमाल करें और उन्हें कम से कम एक साल तक रखें। अगर URL बिल्कुल वही रहते हैं, जो सावधानी से किए गए रीबिल्ड में अक्सर संभव होता है, तो आपको बस यह पक्का करना है कि नए पेजों पर वही कंटेंट और मेटाडेटा हो।

Framer से जुड़ा खास जाल है बचा रह गया Framer पता। पक्का करें कि कोई भी canonical, साइटमैप एंट्री या Open Graph टैग अब भी पुराने Framer URL का नाम न ले, और नई साइट लाइव होते ही Framer प्रोजेक्ट को अनपब्लिश या रीडायरेक्ट कर दिया जाए।

Dardo Framer माइग्रेशन कैसे करता है

हम Framer से माइग्रेशन अपनी वेबसाइट माइग्रेशन सेवा के तहत करते हैं: सूची, कैप्चर, पहले एक प्रतिनिधि पेज दोबारा बनाकर तय की गई चौड़ाइयों पर उसकी समीक्षा, फिर बाकी टेम्पलेट, फ़ॉर्म और रीडायरेक्ट। बिल्ड अपने आप में Astro में वेब डेवलपमेंट है, और मोशन का काम क्रिएटिव डेवलपमेंट के तहत आता है। यह साइट, dardo.studio, Cloudflare Workers पर Astro से चलती है और इसका कंटेंट एक headless CMS में है; यही सेटअप हम सबसे ज़्यादा इस्तेमाल करते हैं।

अगर आप माइग्रेशन पर विचार कर रहे हैं, तो हमें अपनी साइट भेजें और बताएँ कि आप क्या बदलना चाहते हैं। कोटेशन देने से पहले हम बताएँगे कि रीबिल्ड करना फ़ायदेमंद है या नहीं।