בניית אתרים מותאמים למובייל

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

סוגי קונפיגורציות הנתמכות ע”י גוגל

גוגל תומך בשלש טכניקות שונות לבניית אתרים לסמארטפון :

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

בניית אתר דינמי המשרת כל מכשיר אם זה מחשב שולחני טאבלט או סמארטפון עם תוכן HTML ועיצוב CSS שונה. כל דף באתר מותאם דינמית על פי זיהוי סוג המכשיר לפי הפרמטר “user agent” שמתקבל באופן שונה מכל מכשיר ומכל דפדפן בתקשורת האינטרנטית.

אתרים שלהם כתובת אינטרנט (URLs) שונה. אחד למובייל ואחד למחשב שולחני, כביכול שני אתרים שונים.

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

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

בתכנון אתר אינטרנט רספונסיבי, שרת האחסון שולח תמיד את אותו קובץ HTML לכל המכשירים והדפדפנים ובאמצעות קוד CSS מתאים דואג לפרישת דף מתאימה לכל מכשיר בהתאם לתכונותיו. ההתאמה נעשית באמצעות שאילתת מדיה ב-CSS @media לפי הדוגמא להלן. בצורה זאת גם הזחלן של גוגל (Googlebot) יודע לקבל את האינפורמציה הנכונה ולהתייחס אליה בהתאם.

(למנהלי קידום אתרים – טכניקה זאת היא המומלצת על ידי גוגל).

גוגל ממליצה להשתמש בשאילתא CSS הבאה לסמארטפון:

@media only screen and (max-width: 640px) {...}

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

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

יתרונות השימוש בתכנון רספונסיבי

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

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

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

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

בניית אתרים דינמית – HTML מותאם לכל גולש

בשיטה של בניית אתרים דינמית, שרת האינטרנט מגיש דפים שונים של HTML ו- CSS בפנייה לאותה כתובת אינטרנט. הדפים השונים מוגשים בתלות בפרמטר “user agent” המתקבל מגולש ומכיל נתונים על סוג המכשיר וסוג הדפדפן שבשמוש.

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

שדה Vary בכותרת HTTP

לשליחת שדה Vary בכותרת HTTP יש שתי השפעות עקריות:

מסמנת לשרתי הקש (caching servers) הממוקמים בין הגולש לשרת האחסון (כמו שרתי הקש של ספק האינטרנט) שיש להתחשב בפרמטר “user agent” כאשר הם משרתים דפי תוכן מהקש. ללא שליחת Vary ב-HTTP header, יתכן שהסמארטפון יקבל תוכן המותאם למחשב שולחני במקום את התוכן המותאם לנייד ולהיפך.

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

כותרת ה- Vary בתשובת השרת לבקשה נראית כך:

GET / HTTP/1.1
Host: www.intervision.co.il
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 3210
(... rest of HTTP response headers...)

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

כתובות אינטרנט שונות למחשב שולחני ולסמארטפון

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

כתובת מחשב שולחני: www.intervision.co.il
כתובת לסמארטפון: m.www.intervision.co.il

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

הסימונים הנדרשים לגוגל

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

בדף המיועד למחשב השולחני, הוסף בכותרת ה-HTML את התג: link rel=”alternate” המצביע על כתובת האלטרנטיבית למובייל. כך גוגל ידע עבור כל כתובת שולחנית מה הכתובת המובייל המקבילה.
בדף המיועד לסמארטפון הוסף את שדה הכותרת: link rel=”canonical” המצביע לכתובת האינטרנט למחשב שולחני.

דוגמאות לתיוג אתרים

בדפי HTML של מחשב שולחני סמן:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.www.intervision.co.il/" >

ובדפי HTML המיועדים למובייל חייבים (בכדי לא להפגע מסימון שלילי של תוכן כפול על ידי גוגל) לסמן:

<link rel="canonical" href="https://www.intervision.co.il/" >

ואם אתם מתחזקים קובץ Sitemap עבור גוגל, המבנה יראה כך:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>
</urlset>