קידום אתרי ג'אווה סקריפט (אנגולר, ריאקט ועוד) – האם זה אפשרי?

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

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

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

מה ההבדל בין JS לשפות אחרות

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

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

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

לדוגמה – בבדיקה שנעשתה ב-2019 נמצא כ-80% מאתרי המסחר בארצות הברית משתמשים ב-JS לצורכי תוכן, מוצרים ועוד; אבל יותר מ-50% מהם – שכן מאונדקסים במנועי חיפוש – כוללים רכיבים לא מאונדקסים רק בגלל שהם נוצרים על ידי JS. פועל יוצא מכך הוא שחלקים שלמים מתוך האתרים הללו אינם נגישים למנועי חיפוש (25% בממוצע).

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

איך בודקים מה רואים מנועי החיפוש

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

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

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

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

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

איך מקדמים אתרי JS – מוודאים נגישות למנועי חיפוש

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

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

למרבה המזל, כיום יש כבר מספר פתרונות מוכנים מראש המבטיחים נגישות מלאה של אתרי ג'אווה סקריפט לכל מנועי החיפוש. הנה 2 הפתרונות העיקריים והבולטים שבהם:

הגשת צד שרת (Server Side Rendering)

סט פתרונות מוכנים מראש עבור אתרי JS. לדוגמה, באתרי אנגולר משתמשים ב-Angular Universal; באתרי ריאקט משתמשים בפריימוורקים כגון gatsby.js / next.js; באתרי vue.js משתמשים ב-nuxt.js ועוד. הפתרונות הללו מחסלים את הבעייתיות הקיימת בסביבות עבודה מבוססות ג'אווה סקריפט.

הגשה דינמית (Dynamic Rendering)

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

אם בחרתם בשיטה זו, יש לוודא שבכל עמודי האתר שתי הגרסאות יהיו זהות לחלוטין – אחרת אתם מסתכנים בהסתרה (Cloaking) שעלולה להוביל לבעיות. גרסת ה- prerender תמיד חייבת להיות זהה לגרסה המוגשת למשתמשים.

עצות נוספות לקידום אורגני של אתרי ג'אווה סקריפט

• לא לחסום קובצי JS ו-CSS בקובץ רובוטס – זאת בהתאם להנחיות הרשמיות של גוגל.
• להציב מפות אתר תקניות – הן מפת XML למנועי חיפוש והן מפת HTML רגילה למשתמשים.
• ככל שמהירות הטעינה של האתר תהיה קצרה יותר, כך הבוטים יוכלו לזחול ביעילות בכל עמוד. אם זמן הטעינה של העמוד חורג מ-3 או 4 שניות, רוב הסיכויים שהבוט יעזוב את העמוד בלי שנטען במלואו. לצורך כך מומלץ לא לטעון קובצי JS בראש העמוד, אלא אם חייבים.
• הימנעות מפונקציות הפועלות ישירות ב-DOM – בצורה כזו כל העבודה תתבצע על צד שרת בלבד. ככל הנראה זה הפתרון הכי פחות פרקטי ליישום, אבל גם זו אפשרות שכדאי להכיר.

רגע לפני סיום

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

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

בהצלחה!

אודות הכותב

אייל רחמים

בעל ניסיון של 14 שנים בשיווק דיגיטלי ו11 שנים בקידום אתרים, יזם דיגיטלי, מנכ״ל דיגיטאץ׳ – חברה לקידום אתרים ושיווק באינטרנט, מרצה במכללה למנהל, והבעלים של הבלוג seolinks.

לכל המאמרים