קידום אתרים מבוססי ג'אווה סקריפט (אנגולר, ריאקט)

לא כל אתרי האינטרנט יושבים על אותה תשתית טכנולוגית. חלק גדל והולך מהאתרים מבוסס על תשתיות ג'אווה סקריפט כגון אנגולר או ריאקט; קוד פחות ידידותי למנועי חיפוש. למרבה המזל, יש כמה פתרונות מעולים לקידום אתרי JS.

מעל 43% מהאתרים בעולם מבוססים על פלטפורמת וורדפרס, והשאר על פלטפורמות כגון ויקס, שופיפיי וכן הלאה. כמעט כל האתרים הללו מבוססים על קוד HTML רגיל, המאפשר למנועי החיפוש לקרוא את התוכן ולאנדקס את דפי האתר בארכיון שלו. אומנם יכול להיות בהם גם רכיבי JS, אבל שלד האתר עשוי רובו ככולו מ-HTML קריא למנועי חיפוש.

מה זה ג'אווה סקריפט

ג'אווה סקריפט הוא קוד המיועד ליצור אלמנטים מתעדכנים בזמן אמת (לדוגמה, חלון חדשות מתעדכן או טיקר מניות באתרי פיננסים). כמו כן זוהי שפת תכנות שפועלת בצד הדפדפן (Client Side), בניגוד ל-HTML שפועל בצד השרת (Server Side).

ג'אווה סקריפט לא מאפשרת למנועי חיפוש לסרוק את התוכן, ולפיכך מציבה הרבה בעיות עם קידום אורגני של אתרים מהסוג הזה. לדוגמה אתרי Single Page Application (או SPA בקיצור) הם בדיוק סוג האתרים הזה.

מצד אחד, מיעוט ממיליוני האתרים הקיימים בעולם מבוסס כולו על טכנולוגיית ג'אווה סקריפט (JS). מצד שני, במיעוט הזה נכללים אתרים מפורסמים כגון פייסבוק, טוויטר, נטפליקס, אינסטגרם, פורבס ורבים מוכרים נוספים.

מדוע כדאי לבנות אתרים ב-JS

• זמני פיתוח קצרים יותר
• חוויית שימוש משופרת
• זמני טעינה משופרים
• רכיבים דינמיים שמתעדכנים בזמן אמת
• ועוד

מדוע JS מונע סריקה של מנועי חיפוש

הפעילות של JS בצד הדפדפן, גורמת לעומס חריג בזמני העבודה. כל עמוד ג'אווה סקריפט דורש ממנועי החיפוש פי 20 יותר משאבים, כדי שניתן יהיה לסרוק אותו. כמו כן אם הקישורים עצמם באתר עשויים מ-JS ולא HTML, הזחלן לא יוכל לעבור ביניהם.

בהינתן המצב החריג הזה, הזחלנים של גוגל פשוט מוותרים כדי לחסוך זמן עבודה (כדי לא לשרוף את תקציב הזחילה). פועל יוצא מכך הוא שכל מה שיושב על JS לא נסרק בשלמותו או לא נסרק בכלל.

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

יש אתרים שרק חלקים מהם לא נגישים בשל JS, וגם פה מדובר בבעיה שדורשת מענה. בבדיקה של אתרים מובילים בארצות הברית נמצא כי 25% מהתוכן בממוצע – לא נגיש למנועי חיפוש בגלל שהוא מיוצר ב-JS. באתר נייקי העולמי מדובר על 22% מהתוכן; באתר H&M העולמי 35% מהתוכן; ויש כאלו שמגיעים גם מעבר ל-90% תוכן שאינו נסרק. חבל!

איך מזהים אתר שמבוסס על ג'אווה סקריפט

כיום יש כמה סוגי של JS כגון אנגולר, ריאקט, Vue, Node, גטסבי ועוד; כולם מתנהגים פחות או יותר באותו אופן עם מנועי חיפוש.

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

לא כל אתר שבנוי על ג'אווה סקריפט יעשה לכם בעיות, אבל מומלץ לבדוק שהכל תקין. לדוגמה:

תוסף Wappalyzer לדפדפן כרום – התוסף מזהה טכנולוגיות ומאפשר לדעת האם האתר בנוי ב-JS.

בדיקת View Source של הדף – אם נראה שחסרים רכיבים כגון טקסטים, טייטל, מטא תיאור או רכיבי מטא אחרים, כנראה שמדובר באתר JS (לא תמיד, לכן מומלץ לבצע עוד בדיקות כדי לאשש את ההשערה). ניתן להשתמש גם ב-Inspect Element, אם כי הוא פחות מדויק באבחון הזה.

בדיקת הדף בגוגל קונסול – כך נוודא שגוגל רואה מה שאנחנו רואים. גם אם כתובת העמוד סרוקה ונמצאת בגוגל, עשויים להיות חוסרים בהשוואה לבדיקה הקודמת, ומשמע שהם כנראה חבויים מאחורי קוד JS.

זחילה לעומת רינדור

עד כאן בכל הנוגע להתנהגות של דפדפנים. כדי שמנוע חיפוש יוכל להבין במה עוסק דף המבוסס על JS, גם הבוט שלו צריך להתנהג כמו דפדפן. למעשה מדובר בשני שלבים: זחילה (מעבר בין עמודי האתר כדי לגלות את כולם) ורינדור (Rendering או בתרגום חופשי – יצירת הדף מחדש באינדקס).

כפי שכבר צוין קודם לכן, באתרי JS המבוססים על ריאקט או אנגולר – התהליך הזה לא מתקיים בצורה תקינה. כדי לתקן את יכולת הבוט גם לזחול באתר ג'אווה סקריפט וגם לרנדר אותו – נצטרך להשתמש בסביבות עבודה (JS Framework) שנוצרו במיוחד לצורך כך.

הגשת האתר על בסיס צד שרת

פריימוורק המאפשר לבצע Server Side Rendering, מנגיש למעשה את אתרי ה-JS לבוטים של מנועי החיפוש. יש להשתמש בסביבות עבודה כגון אנגולר יוניברסל (עבור אתרי אנגולר), גטסבי או נקסט (עבור אתרי ריאקט) וכן הלאה. סביבות עבודה אלו מגיעות עם פתרונות מובנים מראש, שמחסלים כמעט את כל הבעיות ש-JS מציב בפני מנועי חיפוש.

הגשת האתר בצורה דינמית

פתרון נוסף מציע להגיש את האתר לזחלנים בצורה כפולה – גרסת JS לצד הדפדפן וגרסת HTML לצד השרת. ניתן לבצע Dynamic Rendering באמצעות כלים חיצוניים כגון rendertron, prerender, puppeteer וכן הלאה.

במצב זה חייבים להבטיח ששתי הגרסאות יוגשו לזחלנים, אחרת יווצר מצב של הסתרה (Clocking) – גרסה אחת למשתמש וגרסה שונה למנועי החיפוש. גוגל לא אוהב את זה, בלשון המעטה.

הגשת האתר בצורה סטטית

עוד פתרון אפשרי הוא להגיש לבוטים עותק סטטי לחלוטין של האתר (SSG – Static Site Generation). באתרים רגילים (דינמיים), כניסה לדף אינטרנט מתחילה שרשרת של תהליכים: שליחת בקשה לשרת, משיכת התוכן ממסד הנתונים, יצירת העמוד והצגתו למשתמש.

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

עכשיו אפשר להתחיל לעבוד

אחרי שזיהיתם שמדובר באתר JS או שיש בו הרבה רכיבי JS שמסתירים חלק ניכר מהתוכן, תוכלו לבחור את שיטת העבודה מבין ההצעות שהועלו כאן. אינכם צריכים להיות אנשי קוד או מפתחים; רק להבין את מהות הדברים, כדי שתוכלו ליידע את אנשי הפיתוח מה האופציות הרצויות.

קחו בחשבון שאנשי הפיתוח ככל הנראה מבינים יותר טוב מכם את סוגי האופציות הללו; לכן כדאי להעלות את האפשרויות, ולהחליט ביחד איזו אפשרות היא הטובה ביותר. אל תעשו מיגרציית אתר לגרסת JS, בלי להחליט מראש על הפתרון שיאפשר לכם לבצע SEO בצורה יעילה.

לסיכום

אמנם רוב האתרים בעולם עדיין בנויים ב-HTML הקשיש והטוב, אבל אתרי JS תופסים תאוצה רצינית בשנים האחרונות. כדאי לצפות לגידול משמעותי באתרי ג'אווה סקריפט, הן בשל היתרונות שהוצגו כאן והן בשל יתרונות נוספים.

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