אינדקס מובייל: גוגל קורא את האתר מהטלפון.

בקצרה: אינדקס מובייל (mobile-first indexing) אומר שגוגל סורק ומדרג את האתר לפי הגרסה שמוצגת בטלפון, ולא לפי גרסת המחשב. לכן כל תוכן, כותרת, קישור ונתון מובנה צריכים להופיע גם בטלפון, והאתר צריך להיטען מהר ולהיות נוח ללחיצה במסך קטן. אתר רספונסיבי שמציג את אותו תוכן בכל המסכים הוא הבסיס.

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

מה זה אומר בפועל

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

אתר רספונסיבי הוא הבסיס

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

• אתר רספונסיבי: אותה כתובת, אותו קוד, אותו תוכן. רק הפריסה משתנה לפי רוחב המסך. זה מה שגוגל ממליץ עליו, וזה מה שאני בונה.
• הגשה דינמית: אותה כתובת, אבל השרת שולח קוד אחר לטלפון. מסובך לתחזוקה ומועד לטעויות.
• אתר מובייל נפרד: כתובת אחרת, כמו m.example.co.il. כמעט לא בשימוש היום, וקל לשכוח לעדכן בו תוכן.

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

הטעויות הנפוצות באתרים קטנים

תוכן שהוסתר כדי "לנקות" את הטלפון

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

טקסט בתוך תמונה

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

כפתורים קטנים וצפופים

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

חלונות קופצים שמכסים את כל המסך

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

גלילה לרוחב

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

דוגמה: מה הלקוח רואה בטלפון

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

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

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

איך בודקים בלי להיות מתכנתים

• בטלפון שלכם: פותחים את האתר ברשת סלולרית, בחלון גלישה בסתר. עוברים על כל עמוד חשוב. האם רואים את אותו תוכן כמו במחשב? האם יש גלילה לרוחב? האם כל כפתור נלחץ בקלות?
• בטלפון של מישהו אחר: מכשיר ישן או קטן יותר חושף בעיות שבטלפון חדש לא רואים.
• ב-Search Console: בכלי בדיקת הכתובות אפשר לראות איך גוגל סרק את העמוד, ובדוחות החוויה רואים בעיות שחוזרות על עצמן. מדריך: Google Search Console למתחילים.
• ב-PageSpeed Insights: הלשונית "נייד" מראה את המהירות כפי שגוגל רואה אותה בטלפון.
• בדפדפן במחשב: בכרום לוחצים F12, ואז על סמל הטלפון. אפשר לבחור רוחב של מכשיר ולעבור על העמוד.

מהירות בטלפון

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

בונים קודם לטלפון

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

צ'קליסט: האתר מוכן לטלפון?

עברו על הרשימה הזו בכל עמוד חשוב, עם הטלפון ביד:

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

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

לסיום

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