גוגל תעניש אתרים לא ידידותיים למכשירים ניידים

גוגל תעניש אתרים לא ידידותיים למכשירים ניידים

  • פרסומת

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

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

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

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

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

איך לדעת אם האתר שלכם ידידותי למכשירים ניידים?

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

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

Screen Shot 2015-05-10 at 8.02.33 PM

העיצוב הישן של האתר נכשל בבדיקה של גוגל

איך להפוך את האתר לרספונסיבי?

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

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

Screen Shot 2015-05-20 at 9.19.07 PM

העיצוב החדש והרספונסיבי של האתר עבר בהצלחה את הבדיקה של גוגל

הדבר הראשון שצריך לעשות הוא להוסיף את תגית המטה הבאה בשביל להגדיר לדפדפן של המכשיר הנייד לא לבצע תקריב או תרחיק של האתר. המאפיין initial-scale=1 מגדיר לדפדפן להציג את האתר ביחס של 1:1 ולא לבצע שינוי ביחס לאחר שהאתר נטען. למידע נוסף אפשר לבקר בעמוד של מוזילה בנושא זה.

<meta name="viewport" content="width=device-width, initial-scale=1">

השלב הבא הוא להשתמש בשאילתות מבוססות מדיה (media-queries) בשביל להגדיר איך המבנה של האתר ישתנה בהתאם לגודל של המכשיר שבו הוא נצפה. Media Queries הם כלי שהוצג לראשונה ב- CSS3 ומאפשר לבנות אתר שמתאים לצפיה מכל מכשיר, מבלי לבנות אתר נפרד בשביל זה (כמו שהיה נהוג בעבר, ועדיין נהוג במספר אתרים).

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

@media (max-width: 600px) {
  #sidebar {
    display: none;
  }
}

גם כאן, למוזילה יש הרבה מידע מעניין.

עם זאת, היום נהוג להשתמש ב- Front-End Frameworks שמקלות מאד את הבנייה של אתרים רספונסיביים ומטפלות יפה בבעיות הקיימות בעניין הזה. המוכרים בינהם הם Bootstrap ו- Foundation. אנחנו בחרנו להשתמש ב- Bootstrap בשל העובדה שיש לו קהילת משתמשים גדולה מאד ושניתן למצוא בקלות מידע ולפתור בעיות. אחד הכלים השימושיים ביותר של ה- frameworks האלו הם הגריד (Grid) שמאפשר חלוקה נוחה של האתר לשורות וטורים על בסיס של רוחב המכשיר. כך ניתן לפתח אתרים רספונסיביים בצורה מהירה וקלה.

לסיכום

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

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