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

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

גוגל מכריזים: אנחנו יודעים להבין ג'אווה סקריפט

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

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

בקיצור – גוגל אומרת לנו, חברים, מעכשיו אתם תעשו אתרים טובים ואנחנו נדאג לכל השאר, גם אם בניתם את האתר באנגולר, ריאקט או כל טכנולוגיה אחרת ההופכת את האתר לSPA – Single page application.

אבל בפועל…

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

אז מה גוגל כן יודעים לעשות?

נכון ליולי 2017, זה מה שגוגל ידעת לעשות טוב:

1. סריקת תוכן שנטען לפני הקליק הראשון

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

2. סריקת קישורי JS

זו אומנם נקודה קטנה אבל אם בעברת קישורי ONCLICK היו הדרך להסתיר קישורים מגוגל – היום זה כבר לא יעבוד 🙂

אז איך מקדמים אתרי SPA?

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

סנאפשוטים HTML (או Prerender)

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

את הפתרון של Prerender ניתן להטמיע ע"י שירותים בתשלום צד ג' (המוצגים למטה) או לפתח באופן עצמאי.
השירותים המוכרים הם:

  1. prerender.io (המוביל בשוק ללא ספק).
  2. prerender.cloud

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

קוד מקור אחרי Prereder
קוד מקור אחרי Prereder

 

קוד מקור לפני Prerender
קוד מקור לפני Prerender

בשביל להבין בקצרה איך זה נראה – צפו בסרטון(פחות מ3 דק):

 

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

אז במידה והחלטתם להשתמש בprerender, סעיפים 1-5 בפסקה הבאה רלוונטים גם אליכם (וכמובן למי שבוחר ליישם בדרך אחרת), המשיכו לקרוא  🙂

ואם רוצים להאמין לגוגל שהוא יודע לסרוק?

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

  1. מהירות טעינה – מהירות טעינה היא פרמטר משפיע בקידום כל אתר, במיוחד באתר SPA.
    על פי בדיקות, גוגל נשאר מקסימום בכל עמוד בין 3 ל4 שניות, אם בזמן הזה הוא לא יצליח להבין מה קורה אצלכם בעמוד הוא ימשיך הלאה.
  2. URL ידידותי והיררכיה – URL באתרי SPA צריך להיות ידידותי ממש כמו באתרים רגילים.
    אם תשתמשו ב# גוגל יסתבך וגם אתם 🙂
  3. מפת אתר XML – סיבה נוספת לאפשר URL ידידותי היא על מנת לשלוח מפת אתר XML דרך הsearch console.
    חשוב להקפיד שכאשר נכנסים לURL ספציפי מקבלים כמובן את התוכן הספציפי לעמוד ולא תוכן מעמוד הבית או תוכן משולב מכמה עמודים המבוסס על פעילות קודמת של היוזר באתר (במידה והייתה).
  4. לא לחסום קבצי JS וCSS ע"י קובץ הROBOTS – אין הרבה מה להרחיב, אלה הנחיות רשמיות של גוגל 🙂
  5. וודאו שאתם מטמיעים את האנליטיקס כמו שצריך וכפי ששוקי מסביר במדריך המצויין שלו.
  6. מפת אתר HTML (ללא אנגולר בכלל) שהקישור אליה גם הוא HTMLי לחלוטין – על מנת לעזור לגוגל להגיע לעמודים החשובים באתר גם בלי להתחשב במפת האתר הXMLית, עלינו להציג לו בפשטות, דרך זחילת האתר עצמו את העמודים הללו.
  7. לוודא שלא טוענים קבצי JS בראש העמוד אלא אם חייבים – אחת הטעויות הנפוצות באתרי אנגולר היא טעינה מראש של כל קבצי הJS גם אם אין בהם צורך. הדבר משפיע על זמן הטעינה ועל היכולת של גוגל לעבד את העמוד.

מה עם מנועי החיפוש האחרים?

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

לסיכום

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

5 תגובות

  1. רותם הגב

    תודה על מאמר מצויין ולדעתי ראשון מסוגו בעברית!

    תוכל להרחיב קצת על "לוודא שלא טוענים קבצי JS בראש העמוד אלא אם חייבים"?

  2. אייל הגב

    לפי המאמר שלך, וזה ידוע לי, הוספת האש (#) לקישורי האתר פוגע בקידום וגוגל לא מחשיב אותם בתור קישור שונים מאשר הקישור מקורי של אותו עמוד (עד ה האש).
    מה דעתך על על קישורים אשר מכילים !# בקישור, האם הוא יתחשב בזה כעמוד נפרד?

    • עידן בן אור הגב

      קישורי #! הם בעייתים יותר ומקשים על סריקה, היום קל כבר לאפשר URL ידידותיים, אז למה לא? 🙂

  3. יצחק הגב

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

    נניח שיש לי דף ראשי https://example.com
    ובו לינק: https://example.com/mynew-page.
    לחיצה על הלינק מהדף הראשי לא תעביר את הגולש דף אלא תטען תוכן חדש.
    מצד שני, מי שיכנס ל https://example.com/mynew-page דרך ההיסטוריה/מייל, יקבל את התוכן של הדף.

    האם גם במקרה כזה גוגל מתקשה לאנדקס?

    תודה, כתבה מעניינת.

השארת תגובה