התובנות והעדכונים האחרונים מ-Google I/O 2019.
בחיפוש Google קורים הרבה דברים טובים, ושמחנו לשתף אותם בכנס Google I/O 2019.
בפוסט הזה נתמקד בשיטות המומלצות להגדרת אפליקציות אינטרנט של JavaScript כגלויות בחיפוש Google, כולל:
- Googlebot החדש לטווח ארוך
- צינור עיבוד הנתונים של Googlebot לסריקה, רינדור והוספה לאינדקס
- זיהוי תכונות וטיפול בשגיאות
- אסטרטגיות רינדור
- כלים לבדיקת האתר בחיפוש Google
- אתגרים נפוצים ופתרונות אפשריים
- שיטות מומלצות לאופטימיזציה למנועי חיפוש (SEO) באפליקציות אינטרנט של JavaScript
הכירו את Googlebot לטווח ארוך
השנה הכרזנו על ה-Googlebot החדש והתמידי החדש, שרבים חיכו לו.
Googlebot משתמש עכשיו במנוע Chromium מודרני כדי לעבד אתרים עבור חיפוש Google. בנוסף, נבדוק גרסאות חדשות יותר של Chromium כדי לעדכן את Googlebot, לרוב בתוך כמה שבועות מכל גרסה יציבה של Chrome. ההודעה הזו מהווה חדשות חשובות למפתחי אתרים ולמומחי אופטימיזציה למנועי חיפוש (SEO), כי היא מציינת את ההתפתחות של יותר מ-1,000 תכונות חדשות — כמו ES6+ , IntersectionObserver ו-Web Components v1 — ב-Googlebot.
איך Googlebot פועל
Googlebot הוא צינור עיבוד נתונים שכולל מספר רכיבים. במאמר הזה נסביר איך Googlebot מוסיף דפים לחיפוש Google.
התהליך פועל כך:
- Googlebot מוסיף כתובות אתרים לתור לסריקה.
- לאחר מכן, המערכת תאחזר את כתובות ה-URL עם בקשת HTTP על סמך תקציב הסריקה.
- Googlebot סורק את ה-HTML לאיתור קישורים ומכניסים את הקישורים שנמצאו לתור לסריקה.
- לאחר מכן, Googlebot מוסיף את הדף לתור לעיבוד.
- בהקדם האפשרי, מופע של Chromium ללא GUI מעבד את הדף, כולל הפעלת JavaScript.
- Googlebot משתמש ב-HTML שעבר עיבוד כדי להוסיף את הדף לאינדקס.
ההגדרה הטכנית שלכם יכולה להשפיע על תהליך הסריקה, הרינדור וההוספה לאינדקס. לדוגמה, זמני תגובה איטיים או שגיאות בחיבור לשרת יכולים להשפיע על תקציב הסריקה. דוגמה נוספת: דרישה מ-JavaScript כדי לעבד את הקישורים עלולה להוביל לגילוי איטי יותר של הקישורים האלה.
שימוש בזיהוי תכונות וטיפול בשגיאות
ל-Googlebot המשתנה יש הרבה תכונות חדשות, אבל חלק מהתכונות עדיין לא נתמכות. הסתמכות על תכונות שאינן נתמכות או שלא תטפל בשגיאות באופן תקין עלולים למנוע את היכולת של Googlebot לעבד את התוכן או להוסיף אותו לאינדקס.
נבחן את הדוגמה הבאה:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
בחלק מהמקרים הדף לא יציג תוכן כלשהו, מפני שהקוד לא מטופל כשהמשתמשים דוחים את ההרשאה או כשקריאת getCurrentPosition מחזירה שגיאה. כברירת מחדל, Googlebot דוחה בקשות הרשאה כאלה.
זהו פתרון טוב יותר:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
נתקלתם בבעיות בהוספת אתר JavaScript לאינדקס? כדאי לעיין במדריך לפתרון בעיות כדי למצוא פתרונות.
בחירה של אסטרטגיית העיבוד המתאימה לאפליקציית האינטרנט
כיום, אסטרטגיית העיבוד המוגדרת כברירת מחדל לאפליקציות בדף יחיד היא רינדור בצד הלקוח. ה-HTML טוען את ה-JavaScript, אשר לאחר מכן יוצר את התוכן בדפדפן בזמן שהוא מופעל.
בואו נבחן אפליקציית אינטרנט שמציגה אוסף של תמונות של חתולים ומשתמשת ב-JavaScript כדי לבצע עיבוד מלא בדפדפן.
אם אין לכם אפשרות לבחור את אסטרטגיית העיבוד שלכם, מומלץ לשקול את האפשרות לעיבוד בצד השרת או לעיבוד מראש. הם מריצים JavaScript בשרת כדי ליצור את תוכן ה-HTML הראשוני, דבר שיכול לשפר את הביצועים של המשתמשים וגם של הסורקים. האסטרטגיות האלה מאפשרות לדפדפן להתחיל לעבד HTML כשהוא מגיע לרשת, ולהאיץ את טעינת הדף. בסשן הרינדור ב-I/O או בפוסט בבלוג בנושא רינדור באינטרנט מראים איך רינדור ושימור מים בצד השרת יכולים לשפר את הביצועים וחוויית המשתמש של אפליקציות אינטרנט, ומספקים דוגמאות נוספות לקוד לאסטרטגיות האלה.
אם אתם מחפשים פתרון זמני שיעזור לסורקים שלא להפעיל JavaScript — או אם אתם לא יכולים לבצע שינויים ב-codebase של ממשק הקצה, כדאי לכם לשקול שימוש ברינדור דינמי, שתוכלו לנסות ב-Codelab הזה. עם זאת, שימו לב שחוויית המשתמש או יתרונות הביצועים לא יפיקו תועלת מעיבוד בצד השרת או בעיבוד מראש, כי העיבוד הדינמי מציג רק HTML סטטי לסורקים. כך תוכלו לעקוף את הבעיה במקום אסטרטגיה לטווח הארוך.
בדוק את הדפים שלך
רוב הדפים פועלים בדרך כלל כראוי עם Googlebot, אבל מומלץ לבדוק את הדפים באופן קבוע כדי לוודא שהתוכן זמין ל-Googlebot ושאין בעיות. יש כמה כלים מצוינים שיעזרו לכם לעשות זאת.
הדרך הקלה ביותר לבצע בדיקה מהירה של דף היא בדיקת התאמה לניידים. מעבר להצגת בעיות עם התאמה לניידים, התכונה מספקת גם צילום מסך של התוכן בחלק העליון והקבוע וה-HTML שעבר עיבוד כפי ש-Googlebot רואה אותו.
תוכל גם לבדוק אם יש בעיות בטעינת המשאבים או שגיאות ב-JavaScript.
מומלץ לאמת את הדומיין ב-Google Search Console כדי להשתמש בכלי לבדיקת כתובות URL כדי לקבל מידע נוסף על מצב הסריקה וההוספה לאינדקס של כתובת URL, לקבל הודעות כש-Search Console מזהה בעיות ולקבל פרטים נוספים על ביצועי האתר בחיפוש Google.
לקבלת טיפים כלליים והדרכה לגבי אופטימיזציה למנועי חיפוש, אפשר להשתמש בביקורות בנושא SEO ב-Lighthouse. כדי לשלב ביקורות של אופטימיזציה למנועי חיפוש (SEO) בחבילת הבדיקות, צריך להשתמש ב-Lighthouse CLI או ב-Lighthouse CI.
הכלים האלה עוזרים לך לזהות, לנפות באגים ולפתור בעיות בדפים בחיפוש Google והם צריכים להיות חלק משגרת הפיתוח שלך.
להתעדכן וליצור קשר
כדי להתעדכן בהודעות ובשינויים בחיפוש Google, מומלץ לעקוב אחרי הבלוג למנהלי אתרים, ערוץ YouTube למנהלי אתרים של Google וחשבון Twitter שלנו. כדי לקבל מידע נוסף על אופטימיזציה למנועי חיפוש (SEO) ו-JavaScript, מומלץ לעיין גם במדריך למפתחים של חיפוש Google ובסדרת הסרטונים בנושא JavaScript SEO.