אתרים ו-SEO

אתר שנראה תקין אבל לא נקרא נכון – הבעיות שיוצר JavaScript למנועי חיפוש

תמונה: magnific
תוכן העניינים

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

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

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

שתי גרסאות של אותו עמוד

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

באתרים אחרים, ה־HTML הראשוני מכיל בעיקר מעטפת. רק לאחר שהדפדפן מוריד את קובצי ה־JavaScript, מריץ אותם ופונה ל־API, התוכן מופיע על המסך.

המשתמש רואה את הגרסה הסופית לאחר שכל הפעולות הסתיימו. מנוע החיפוש צריך לעבור תהליך נוסף כדי להגיע אליה.

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

המסע של הבוט דרך האתר

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

גילוי הכתובת

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

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

בקשת ה־HTML

לאחר גילוי הכתובת, הבוט פונה לשרת. בשלב הזה הוא מקבל קוד תגובה ואת מסמך ה־HTML הראשוני.

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

רינדור העמוד

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

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

אינדוקס

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

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

המקום הראשון שבו המסע נקטע: קישור שאינו באמת קישור

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

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

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

הבעיה נפוצה במיוחד ב:

  • כרטיסי מוצרים וכתבות.
  • תפריטי קטגוריות.
  • רכיבי “טען עוד”.
  • מסננים שיוצרים עמודים חדשים.
  • ניווט בין עמודי תוצאות.
  • קישורי Breadcrumbs שנבנו כרכיבי ממשק בלבד.

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

תוכן שמחכה לפעולה של המשתמש

מנוע חיפוש אינו משתמש רגיל. אין להניח שהוא ילחץ על לשונית, יאשר חלון, ימלא טופס או יגלול עד סוף עמוד כדי לחשוף תוכן.

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

הדבר משמעותי כאשר מאחורי הפעולה נמצאים:

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

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

התלות ב־API מוסיפה נקודת כשל

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

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

הכשל יכול להיגרם ממספר סיבות:

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

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

דפדפן מוכר יכול להסתיר את התקלה

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

הבוט מגיע לביקור נקי. אין לו היסטוריה, הרשאה או מידע ששמור בדפדפן.

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

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

הוראות אינדוקס שמשתנות במהלך הטעינה

JavaScript יכול לשנות Title, תיאור מטא, Canonical ונתונים מובנים. Google מסוגלת לעבד חלק מהשינויים האלה, אך נוצר סיכון כאשר ה־HTML הראשוני והגרסה המרונדרת שולחים הוראות שונות.

עמוד יכול, לדוגמה, להגיע מהשרת עם Canonical כללי ולאחר הרינדור להחליף אותו לכתובת הנוכחית. במקרה אחר, כל עמודי המערכת מקבלים בתחילה את אותו Title ורק לאחר קריאת API מופיעה הכותרת הנכונה.

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

  • קוד התגובה.
  • Title.
  • Canonical.
  • הוראות Robots.
  • כותרת ראשית.
  • תוכן מרכזי.
  • קישורים פנימיים חשובים.

המטרה אינה למנוע כל שינוי בצד הלקוח. היא למנוע מצב שבו זהות העמוד תלויה בהצלחת הרינדור.

כתובות שלא קיימות מבחינת השרת

באפליקציית Single Page Application אפשר לעבור בין מסכים בלי לטעון מסמך HTML חדש. הדפדפן משנה את הכתובת וה־JavaScript מחליף את התוכן.

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

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

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

חדר הבדיקות: משווים ארבע שכבות

אין צורך לנחש אם JavaScript גורם לבעיה. אפשר להשוות בין ארבע גרסאות של העמוד.

1. תגובת השרת

פותחים את קוד המקור המקורי ובודקים מה התקבל לפני הרצת JavaScript.

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

2. ה־DOM לאחר הרינדור

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

הסקירה הישראלית על JavaScript ו־SEO מדגישה גם היא את ההשוואה בין ה־HTML הגולמי לבין הגרסה המרונדרת כבדיקת בסיס לאבחון הפער.

3. הגרסה ש־Google רינדרה

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

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

4. התוצאה שנשמרה באינדקס

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

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

לא בודקים רק את עמוד הבית

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

בדיקה מייצגת צריכה לכלול לפחות:

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

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

לא כל הבדל הוא בעיית SEO

אין צורך לדרוש שה־HTML הראשוני יהיה זהה לחלוטין למה שהמשתמש רואה.

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

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

  • זהות העמוד.
  • הנושא המרכזי.
  • תוכן שנועד להתאנדקס.
  • קישורים לעמודים חשובים.
  • נתונים שמשפיעים על תוצאת החיפוש.
  • מצב תקין כאשר JavaScript או API נכשלו.

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

הפתרון אינו להסיר את JavaScript

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

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

העיקרון הוא שהבחירה תתבצע לפי תפקיד העמוד:

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

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

מה מעבירים לצוות הפיתוח

הודעה כללית כמו “Google לא רואה את האתר” אינה מספיקה. צוות הפיתוח צריך לקבל מקרה שניתן לשחזר ולבדוק.

בריף תיקון טוב כולל:

התבנית שנפגעה
לדוגמה: עמודי קטגוריה, ולא רק כתובת אחת.

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

הראיה
השוואה בין קוד המקור, ה־DOM המרונדר והגרסה שמוצגת בכלי הבדיקה.

ההשפעה
מוצרים אינם מתגלים דרך הקטגוריה או שהתיאור אינו מופיע בעמוד המאונדקס.

ההתנהגות הרצויה
תגובת השרת תכלול את כותרת הקטגוריה, תיאור וקישורי HTML תקינים למוצרים.

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

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

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

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

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

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

על הכותב/ת

מערכת RER

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