איך לעבור מוובפלואו (Webflow) לפריימר (Framer) בלי לפגוע ב-SEO

צוותים בדרך כלל עוברים מ-Webflow ל-Framer כדי שאנשי השיווק יוכלו לבנות ולשנות עמודים ללא צורך במפתח. קל יותר להעביר אתרי Webflow מאשר אתרים ברוב הפלטפורמות האחרות, מכיוון שהתוכן כבר יושב באוספים (collections) מובנים והכתובות (URLs) בדרך כלל נקיות. עם זאת, ארבעה דברים עדיין לא עוברים מעצמם: אוספי CMS, אינטראקציות, נקודות קצה של טפסים (form endpoints) והפניות (redirects). המדריך הזה מכסה כל אחד מהם. לצפייה ברשימת המשימות (checklist) שמתאימה לכל פלטפורמה, קראו כיצד להעביר את האתר שלכם מבלי לפגוע ב-SEO.

אנחנו בונים גם ב-Webflow וגם ב-Framer, ולכן חלק מהעבודה שלנו הוא לבדוק שהמעבר הזה בכלל הגיוני עבורכם.

קודם כל, בודקים התאמה

Framer מתאימה במיוחד לאתרי שיווק שצוות השיווק מעדכן מדי שבוע. ישנם כמה סוגי הגדרות ב-Webflow שדורשים בדיקה מעמיקה יותר לפני שמחליטים להתחייב:

• איקומרס או אזורי חברים (memberships). אם אתר ה-Webflow שלכם מפעיל חנות מקוונת או מערכת התחברות לחברים, אלו דורשים פלטפורמה ייעודית שנבנתה עבורם. אנחנו לא בונים חנויות אונליין ב-Framer.
• לוגיקה מורכבת של CMS. אוספים רבים עם הפניות מקושרות (nested references), מסננים ותנאי נראות (conditional visibility) יכולים לעבור, אך כדאי לבנות קודם כל תבנית אחת ב-Framer כדי לבדוק את העניין.
• אוטומציות של Webflow API. כל כלי חיצוני שכותב נתונים ישירות ל-CMS של Webflow יצטרך פתרון חדש.

שלב 1: מיפוי האתר הקיים (Inventory)

• כתובות אתר (URLs). התחילו עם מפת האתר של Webflow בכתובת sitemap.xml/, לאחר מכן בצעו סריקה (crawl) של האתר ויצאו את דוח הביצועים (Performance report) לפי עמודים מתוך ה-Search Console של גוגל. יחד הם יציגו לכם כל כתובת URL קיימת ואילו מהן מייצרות תנועה.
• אוספים (Collections). הכינו רשימה של כל אוסף ב-CMS יחד עם השדות שלו, סוגי השדות, כמות הפריטים ונתיב התבנית (template path).
• הפניות קיימות. העתיקו את כל חוקי ההפניות מרשימת הפניות ה-301 של Webflow שנמצאת בהגדרות האתר, תחת Publishing. גם הן יעברו איתנו.
• אינטראקציות וקוד מותאם אישית. רשמו לעצמכם כל אינטראקציה, קוד מוטמע (embed) וסקריפט, כולל כלים כמו Finsweet Attributes.
• טפסים ואינטגרציות. הכינו רשימה של כל טופס באתר, לאן הוא שולח את הנתונים ואיזו אוטומציה הוא מפעיל.

שלב 2: ייצוא אוספי ה-CMS כקובצי CSV

Webflow מאפשרת לייצא כל אוסף כקובץ CSV ישירות מלוח ה-CMS. ה-CMS של Framer יודע לייבא קובצי CSV, כך שהתוכן שלכם יעבור טבלה אחר טבלה.

• התאמת שמות השדות. Framer מייבאת רק עמודות ששמותיהן תואמים בדיוק לשדות הקיימים באוסף שלה, והיא דורשת עמודת Slug ייחודית. שנו את שמות הכותרות בגיליון האקסל/Google Sheets לפני שאתם מייבאים.
• טקסט עשיר (Rich text). Webflow מייצאת טקסט עשיר בפורמט HTML, וזה בדיוק הפורמט שמנגנון הייבוא של Framer מצפה לקבל.
• העמודות הייעודיות של Webflow. קובץ הייצוא כולל מזהי פריטים (item IDs), תאריכים ותגיות של פריטים בארכיון או בטיוטה. מחקו את ה-IDs וסננו החוצה פריטים שנמצאים בארכיון, אלא אם כן אתם רוצים להחזיר אותם לאתר.
• תמונות. קובץ הייצוא מציג תמונות כקישורים לאחסון הקבצים של Webflow. העלו אותן מחדש ל-Framer, כדי שהאתר החדש לא יהיה תלוי בחשבון ה-Webflow הישן שלכם.
• קישורים בין אוספים (References). בדקו את שדות ההפניה (reference) וההפניות המרובות (multi-reference) לאחר הייבוא, כדי לוודא שכל פוסט עדיין מקושר לכותב הנכון, לקטגוריה הנכונה או לפריטים קשורים.
• מגבלת גודל קבצים. Framer דורשת קובצי UTF-8 השוקלים פחות מ-5 MB, לכן פצלו אוספים גדולים למספר קבצים קטנים יותר. ייבוא חוזר עם אותם ה-slugs פשוט יעדכן את הפריטים הקיימים.

שלב 3: בנייה מחדש של אינטראקציות

האינטראקציות של Webflow אינן ניתנות לייצוא. ל-Framer יש כלים משלה: אפקטים של הופעה (appear), ריחופים (hover), אפקטים של גלילה, אנימציות מבוססות גלילה וגרסאות רכיבים (variants). התייחסו לבנייה מחדש כאל תהליך של עריכה ושיפור. שמרו על האינטראקציות שמסבירות את המוצר או מכוונות את עין המשתמש, וותרו על אנימציות קישוטיות מיותרות שרק מאיטות את העמוד. תוספים של Webflow כמו מסנני CMS ורשימות "טען עוד" ידרשו פתרון מקביל ב-Framer, בין אם באמצעות הגדרת רשימת אוסף מובנית או רכיב קוד קטן.

שלב 4: שמירה על ה-Slugs ונתיבי התיקיות

Webflow מציגה עמודים סטטיים בתוך תיקיות, כגון solutions/fintech/, ופריטי CMS תחת נתיב האוסף, כגון blog/post-name/. Framer תומכת בשני המבנים הללו. עמודים יכולים לשבת בתוך תיקיות, ועמודי CMS חיים בנתיב שתבחרו, למשל blog/:slug/. עבור רוב אתרי ה-Webflow, כמעט כל כתובת URL יכולה להישאר בדיוק כפי שהיא, וכתובת URL שנשארת זהה אינה מצריכה הפניה.

שימו לב לפרטים הקטנים: ודאו שנתיבי האוספים תואמים, שה-slugs זהים לחלוטין (כולל אותיות גדולות/קטנות באנגלית), ועמודים מתורגמים שומרים על תיקיות השפה שלהם. אם נתיב של אוסף מסוים משתנה, למשל מ-post/ ל-blog/, הפניית wildcard בודדת תכסה את כל התיקייה.

שלב 5: העברת הפניות ה-301 ל-Framer

צרו מפה (גיליון) בעלת שלוש עמודות: URL ישן, URL חדש וסטטוס. היא תכיל שני סוגי שורות.

• חוקי Webflow הישנים. כל הפניית 301 קיימת עוברת איתנו. כוונו כל אחת מהן ישירות לעמוד הסופי שלה, כדי שקישור שכבר עבר הפניה אחת לא יעבור שתיים (שרשרת הפניות).
• שינויים חדשים. כל כתובת URL שמשתנה במהלך המעבר מקבלת שורה שמפנה אותה לעמוד המתאים ביותר באתר החדש.

ב-Framer, הוסיפו את החוקים תחת Site Settings, אז Hosting ואז Redirects. השתמשו ב-* כדי להתאים לתיקייה וב-1: כדי להשתמש מחדש בחלק שהותאם, כך ש-post/* יכול להפנות ל-blog/:1/. החוקים נכנסים לתוקף ברגע שאתם מפרסמים את האתר (publish), וניתן לגרור אותם כדי לקבוע את סדר העדיפויות שלהם. שינוי שם של עמוד או נתיב אוסף בשלב מאוחר יותר לא יעדכן אוטומטית את החוקים הקיימים, לכן הקפידו לעדכן את המפה בכל פעם שנתיב משתנה. ההפניות של Framer עובדות על נתיבים בתוך הדומיין שלכם. אם גם הדומיין עצמו משתנה, הגדירו את ההפניה ברמת הדומיין אצל ספק האחסון (host) הישן שלכם. כמו כן, ודאו שתוכנית ה-Framer שלכם תומכת בכמות ההפניות הנדרשת לכם.

שלב 6: החלפת נקודות הקצה של טפסי Webflow

טפסים ב-Webflow נשלחים למערכת ניהול הטפסים המובנית שלה, והיא זו ששולחת את התראות המייל. ברגע שהדומיין יופנה ל-Framer, המערכת הזו יוצאת מהתמונה, וכל מה שהופעל בעקבות שליחת טופס ב-Webflow ייעצר יחד איתה: תהליכי Zapier או Make, סנכרון ל-CRM והתראות ב-Slack.

• בנו מחדש כל טופס. השתמשו בטפסים המובנים של Framer, שיכולים לשלוח נתונים למייל או ל-webhook, או הטמיעו טופס ייעודי של ה-CRM שלכם. באתר ה-Framer של Lava, למשל, הטפסים מוזרמים ישירות לתוך Customer.io.
• כוונו מחדש את האוטומציות. כל זאפ (Zap) או תרחיש (Scenario) שהתבסס על טריגר של טופס Webflow יצטרך לקבל כעת את מקור המידע החדש.
• ייצאו לידים קודמים. הורדו את כל הפניות והלידים שנשלחו בעבר מתוך Webflow לפני שאתם סוגרים את החשבון.
• בדיקה עם נתונים אמיתיים. שלחו פניית ניסיון בכל אחד מהטפסים לפני העלייה לאוויר.

שלב 4: העברת המטא-דאטה והקוד

הגדירו מחדש את כותרת ה-SEO, תיאור העמוד (description) ותמונת ה-Open Graph עבור כל עמוד סטטי בהגדרות העמוד ב-Framer. בתבניות ה-CMS, קשרו את הכותרת והתיאור לשדות האוסף המתאימים, בדיוק כפי שהיה ב-Webflow. העבירו את כל הסקריפטים שהיו בקוד ה-head וה-footer ב-Webflow: מערכות אנליטיקס, ניהול הסכמות עוגיות (consent), תגיות אימות קוד וסכמות JSON-LD. לאחר מכן, ודאו שתגיות ה-canonical מפנות לדומיין הראשי והחי שלכם.

צ'ק ליסט לפני עלייה לאוויר

• סרקו את שני האתרים. השוו בין דוחות הסריקה של Webflow ושל Framer כדי לאתר עמודים חסרים, כותרות או תיאורים שנשמטו.
• בדקו את מפת ההפניות. ודאו שאין שרשראות הפניה ושאין הפניות המובילות לעמודים שאינם קיימים.
• אינדוקס פעיל. ודאו שהאתר החדש פתוח לאינדוקס וקובץ ה-robots.txt מאפשר סריקה של מנועי חיפוש.
• גישה ל-Search Console. אמתו את הדומיין שלכם דרך ה-DNS, כדי שהנכס ימשיך לעבוד בצורה רציפה גם לאחר המעבר.
• טפסים ומעקבים. ודאו שכל טופס נבדק בהצלחה, ושמערכות האנליטיקס ואירועי ההמרות (conversions) עובדים ומדווחים.
• שמרו על פרויקט ה-Webflow שלכם. אל תמחקו או תבטלו אותו עד לסיום כל בדיקות הפוסט-השקה.

צ'ק ליסט לאחר עלייה לאוויר (Post-Launch)

• ביום הראשון. הריצו סריקה על כל כתובות ה-URL הישנות שלכם. כל אחת מהן צריכה להחזיר קוד 301 לעמוד הנכון, ואז קוד 200. הגישו את מפת האתר (sitemap) החדשה ב-Search Console וב-Bing Webmaster Tools (מכיוון שהחיפוש של ChatGPT ו-Copilot מתבססים על האינדקס של Bing). בדקו את העמודים המובילים שלכם בעזרת כלי בדיקת ה-URL ובקשו אינדוקס מחדש.
• בשבוע הראשון. בדוח העמודים של Search Console, עקבו אחר שגיאות כמו "לא נמצא (404)", שגיאות הפניה (Redirect error) ודפים כפולים ללא תג קנוניקל שהוגדר על ידי המשתמש. כל עמוד 404 שמקבל תנועה או קישורים חיצוניים חייב לקבל הפניה מיידית.
• בשבועות 2 עד 4. השוו את הקליקים והחשיפות (impressions) של העמודים המובילים שלכם אל מול נתוני הבסיס שאספתם בשלב 1. תנודות מסוימות בזמן שגוגל סורק מחדש את האתר הן נורמליות לחלוטין. עמוד שממשיך לחוות ירידה קבועה בדרך כלל סובל מהפניה שבורה או ממטא-דאטה שהלך לאיבוד.

לוחות זמנים ריאליים

רוב הפרויקטים שלנו עולים לאוויר תוך שבועיים עד 6 שבועות. מעבר מ-Webflow עם אוספים נקיים ומאורגנים בדרך כלל ייקח פחות זמן, מכיוון שהתוכן כבר מובנה בצורה נכונה.

• שבוע ראשון. מיפוי האתר, בדיקת התאמה, ייצוא אוספים והכנת מפת ההפניות.
• שבועות הביניים. עיצוב ובנייה, ייבוא ה-CMS, הגדרת אינטראקציות וטפסים.
• השבוע האחרון. מעבר על מטא-דאטה, השוואת סריקות, העלאת ההפניות ועלייה לאוויר.
• שבועיים לאחר ההשקה. בדיקות ותיקונים ב-Search Console, המכוסים במסגרת התמיכה הכלולה שלנו.

אתרים מרובי שפות או אינטגרציות מורכבות וכבדות ימשכו את הפרויקט לכיוון הרף העליון של לוחות הזמנים. כך אנחנו מנהלים מעברים מ-Webflow ל-Framer מתחילת התהליך ועד סופו המוצלח.