בלוג שיווק דיגטלי

בדיקות SEO לאתרי JavaScript

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

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

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

כשהרינדור עובר בצד השרת, הדפדפן או העכביש מקבלים את כל התוכן בדף כ-HTML, לעומת זאת…

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

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

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

אתרים שמשתמשים ב-JS לצורך הצגת תכנים משניים, לדוגמה:

  • אנימציות של רקעים
  • אפקטים על הפוינטר של העכבר

אתרים שמשתמשים ב-JS לצורך הצגת תכנים עיקריים \ חשובים ל-SEO, לדוגמה:

  • טעינת מוצרים נוספים בעת גלילה
  • טעינת טקסט בדף בעזרת JS
  • Single Page Apps – פה נטען תוכן אל הדף בעזרת JS ובעזרתו גם מתבצע מעבר מדף לדף. חלק ממאפייני SPA הם שהדף\תוכן נטען כתבנית סטטית ומשתמש ב-JS כדי להחליט איזה תוכן צריך להופיע ומתי.

כשמדברים על בעיות סריקה שמשפיעות על SEO מדובר בדרך כלל על הסוג השני של האתרים – אתרים שמשתמשים -בJS להצגת תכנים עיקריים.

בשביל לטפל בבעיות הנובעות מ-JS כדאי לנו לבדוק באילו בעיות מדובר, ועל מה זה משפיע.

כלים לבדיקת השפעת JS על SEO

  • כיבוי ה-JS בעזרת תוסף או דרך Chrome DevTools ובדיקת תקינות האתר וטעינת כל התוכן – זוהי בדיקה פשוטה והיא לא נותנת מידע טכני על איך נסרק הדף מצג גוגל, אך היא עוזרת לנו להבין איך ה-JS משפיע על תקינות הדף או התוכן שבו בהסתכלות ראשונית.

Disabling JS in Chrome Dev Tools

  • View Source לעומת Inspect Element
    View Source – מאפשר צפייה בקוד ה-HTML שלפני הפעלת ה-JS
    Inspect Element – מאפשרת צפייה בקוד לאחר הפעלת ה-JS


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

View Source VS Inspect Element 2

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

לשימוש בכלי בדיקת המובייל של גוגל:

https://search.google.com/test/mobile-friendly 

  • כלי ניתוח ה-URL ב-Search Console – Live Test:
    • בדיקת טעינת משאבים חשובים (JavaScript, CSS, תמונות ואחרים)
    • בדיקת קוד ה-HTML שגוגל קורא.
    • בדיקת תוצאת הרינדור של גוגל.

כך תוכלו להכינס אל Live Test:

  • זהירות כשמשתמשים ב-Cache
    זו לא הגירסה האחרונה שגוגל ראה ולכן מומלץ להימנע מהחלטות שנובעות אך ורק מהנתונים שבגירסת ה-Cache.

טיפים כלליים כאשר בודקים אתרי JS

  • לכל דף צריך להיות Title ו-Description משלו – אם אתם לא מוצאים אותם בקוד של הדף (קוד מקור – View Source) אז יכול להיות שתגיות המטא עובדות בצורת רינדור על ידי דפדפן (CSR), מכאן שצריך לבדוק אם עוד חלקים בדף משתמשים בטכנולוגיה זו.
  • גוגל משתמשים במנגנון Timeout שמפסיק את סריקת הדף במקרה ולוקח לדף יותר מידי זמן לעלות. לרוב, כשעושים אופטימיזציה ל-JS משתדלים לכוון לטעינת דף של פחות מ-5 שניות.
  • חשוב שיהיו לינקים שיקשרו בין העמודים באתר, כך גוגל יוכל לזחול באתר ולגלות דפים חדשים. קישורים רגילים בצורת a href היא האופציה הטובה ביותר.

    מבנה לינק תקין לדוגמה:

    Recommended link structure

    לא מומלץ להשתמש באלמנטים אחרים של HTML בשביל ליצור לינקים כמו למשל DIV או SPAN, גם לינקים בצורת איוונטים של JS כמו onClick לא מומלצים.

  • אם משתמשים בג'אבה סקריפט כדי ליצור מעברים בין עמודים – היזהרו מ-Fragment identifiers שזו צורת ייצור כתובות דפים בעזרת האש טגים "#", גוגל לא קורא עמודים אלה. השתמשו במקום ב-History API עם כתובות דפים נורמליות כדי להגיע לאותה תוצאה אבל בצורה שגוגל יוכל לעבוד איתה. גוגל הולך לבקר את הדפים בצורה אינדיבידואלית לכן Service Worker ו-JS שמשתמשים ב-History API יניבו תוצאות טובות יותר בנוגע ל-SEO.
  • השתדלו להימנע מדפי שגיאה Soft 404, אלו הם דפים שלא נמצאו (קוד 404) אך הם מחזירים קוד 200. שני פתרונות מקובלים הם:
    1. לייצר הפניית 301 לדף שמחזיר 404.
    2. להטמיע בדף תגית Robots NOINDEX.
  • העכבישים של גוגל לא יודעים לעשות החלטות לבד, לכן אם לדוגמה הקפצתם חלון עם שאלה שהגולש צריך לענות כדי לראות את תוכן הדף, קחו בחשבון שגוגל לא יוכל לראות את התוכן של דף זה.
  • גוגל משתמש בטעינת Cache איפה שאפשר כדי לחסוך במשאבים. בעקבות זאת, קבצי JS שעברו שינוי ונשארו עם אותו שם קובץ יכולים להיטען מה-Cache של גוגל במקום מהקובץ הנוכחי. כדי לגרום לגוגל לצרוך את קובץ ה-JS מחדש אפשר לתת שם שונה של קובץ לכל גירסה שמתעדכנת.
  • גוגל בוט לא עובד עם חיבורי WebSockets או WebRTC, לכן חשוב לוודא שיש אפשרות לגוגל בוט לקרוא את הדף בעזרת בקשות HTTP.

תהליכי בדיקה בסיסיים

  • בידקו מה רואה המשתמש על ידי טעינת הדף ב-Incognito, הדף צריך להיטען עם קוד 200, וכל התוכן שהגולש מצפה לראות בדף צריך להופיע.
  • בידקו שהדף לא חסום לסריקה בעזרת תגית NOINDEX או בעזרת קובץ Robots.txt, זה כמובן ימנע מגוגל לסרוק את האתר בשלב השני שמערב את סריקת ה-JS.
  • הכניסו את האתר שלכם לבדיקה דרך כלי בדיקת המובייל של גוגל:
    https://search.google.com/test/mobile-friendly
    (אם אתם רוצים לבדוק דף שנמצא בסביבת פיתוח – תוכלו להשתמש ב-Ngrok כדי לייצר כתובת פומבית)
    • בידקו שהאתר מופיע כמו שהמשתמשים צריכים לראות אותו, האם יש אלמנטים חסרים?
    • בידקו את קוד ה-HTML שהעכביש סרק, וודאו שלא חסרים אלמנטים חשובים.
    • בידקו אילו משאבים נטענו עם הדף ואילו נחסמו שלא לצורך.
    • אם תרצו להיכנס פנימה תוכלו גם לראות את הלוגים של ה-JS.
  • בידקו אם גוגל מצליח לראות תוכן שמוסתר מאחורי לחיצה שמופעלת בעזרת JS, לדוגמה: לשוניות, כפתורי "קרא עוד"… וכו', אפשר לבדוק אם זו בעיה במספר דרכים:
    • ביחרו קטע טקסט ייחודי מתוך הלשונית, והשתמשו בחיפוש מתקדם בגוגל.

      "{Excerpt from the text inside tab}" site:{your domain}

      "blah blah blah and more blah" site:example.com

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

    • השתמשו ב-Search Console ב-Live Test:
      אם אתם רואים את הקוד בתוך ה-HTML שגוגל סרק, גוגל יכול לסרוק את הטקסט שבלשונית ואתם יכולים להיות רגועים.
      נקודה למחשבה: אם הטקסט מוסתר או מצריך פעולה כדי להגיע אליו, יכול להיות שגוגל יתן פחות חשיבות לטקסט בלשונית לעומת טקסט שמופיע בדף.
    • השתמשו ב-Mobile Friendly Test כדי לבצע את אותה בדיקה כמו ב-Search Console.

פתרונות נפוצים לשיפור אינדוקס אתרי JS הם

  • Dynamic Rendering – מראה גירסת JS למשתמשים וגירסת HTML לעכבישים של גוגל. מתאים לאתרים שמשתנים בתדירות גבוהה. אפשר להשתמש ב-Rendertron בשביל להשיג תוצאה זו. רינדור דינמי לא נחשב בעיניי גוגל כתרמית Cloaking, כך מודיעים גוגל רשמית: https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering
  • Server-Side Rendering – מאפשר יצירת גירסת HTML כבר על השרת, כך כשדפדפן או מנוע חיפוש מבקשים את הדף, הם יקבלו דף HTML סטטי שמותאם ל-SEO. אם מדובר באתר גדול או בתדירות רינדור גבוהה, פעולה זו עלולה להכביד על השרת ושירותים חיצוניים כמו PreRender.io באים לעזרתנו.
  • Hybrid Rendering – זוהי דרך שבה משלבים את שתי הטכנולוגיות, כלומר בוחרים את החלקים החשובים שאותם אנחנו רוצים שגוגל יסרוק ויאנדקס באותו דף ומרנדרים רק אותם בצורת HTML סטטי, שאר החלקים בדף יעבדו דרך JS.

למי שרוצה להעמיק עוד בנושא של אופציות רינדור באינטרנט, אפשר לקרוא בדף הבא: https://developers.google.com/web/updates/2019/02/rendering-on-the-web

כיום גם באנגולר וגם בריאקט יש אפשרות להפעיל רינדור בצד שרת:
Angular – באנגולר אפשר להפעיל SSR בעזרת Universal Angular
React – בריאקט אפשר להשתמש ב-React Snap כדי להפעיל את שירות ה-Pre Rendering

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

מכירים מישהו שהמידע יעזור לו?
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email
שיתוף ב print
צור קשר
דילוג לתוכן