אתר מותאם לנייד: מה זה אומר ואיך בודקים

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

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

מה זה אתר מותאם לנייד?

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

מה ההבדל בין רספונסיבי לאתר נייד נפרד?

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

האם אתר שנראה קטן בטלפון נחשב מותאם?

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

למה גוגל מתייחס לגרסה הניידת?

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

האם חובה שתהיה גרסה ניידת?

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

האם זה נוגע גם לאתר קטן?

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

מה חייב להיות זהה בנייד ובמחשב?

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

האם אפשר לשים טקסט באקורדיון בטלפון?

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

ומה עם הנתונים המובנים?

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

מה עם תוכן שנטען רק אחרי לחיצה?

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

מה עם תמונות שנטענות בגלילה?

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

איך יודעים מה גוגל רואה?

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

מה הופך עמוד לנוח בטלפון?

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

מה גורם לגלילה הצידה?

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

ומה עם טבלאות?

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

מה זה תג viewport ולמה צריך אותו?

תג viewport הוא שורה בראש הקוד של העמוד שאומרת לדפדפן איך להתאים את העמוד למסך. לפי web.dev, הערך width=device-width אומר לעמוד להתאים את עצמו לרוחב המסך, וכך התוכן מסתדר מחדש לפי גדלים שונים של מסכים. בלי התג הזה, ההתאמה לטלפון לא עובדת כמו שצריך.

מה עוד כתוב בתג?

בדרך כלל גם initial-scale=1. לפי web.dev, הערך הזה קובע יחס של אחד לאחד בין פיקסלים של CSS לפיקסלים שאינם תלויים במכשיר, בלי קשר לכיוון המכשיר.

איך בודקים אם התג קיים?

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

איך כפתורי פנייה צריכים לעבוד בטלפון?

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

איך מוסיפים כפתור וואטסאפ נכון?

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

מה עם כפתורים צפים?

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

איך בונים טופס שעובד בטלפון?

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

מה עוד חשוב בטופס?

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

האם לבקש מייל?

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

למה מהירות חשובה יותר בטלפון?

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

מה לתקן קודם?

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

האם אתר מהיר במחשב מהיר גם בטלפון?

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

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

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

מה בודקים בכל עמוד?

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

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

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

אילו טעויות חוזרות באתרים של עסקים קטנים?

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

מה עם חלון קופץ?

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

ומה עם הכותרת והתיאור?

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

איך מציגים תפריט באתר מותאם לנייד?

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

האם תפריט מקופל פוגע בגוגל?

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

מה שמים בראש התפריט?

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

מה עם תמונות ווידאו בטלפון?

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

מה עם טקסט על גבי תמונה?

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

האם הטקסט החלופי צריך להיות זהה בשתי הגרסאות?

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

מתי לתקן ומתי לבנות מחדש?

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

איך מחליטים?

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

מה עם דף נחיתה לקמפיין?

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

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

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

שאלות נפוצות על אתר מותאם לנייד