זמן קריאה: 8 דקות

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

למה זה מעניין אותי?

  • התחזיות צופות שעד סוף 2011 יהיו יותר מ-73 מיליון משתמשי סמארטפון בארה"ב בלבד, המהווים כ-31% מכל אוכלוסיית משתמשי הסלולר (eMarketer), ושעד שנת 2013, כמחצית מגולשי האינטרנט יגלשו באמצעות מכשירי סמארטפון (Gartner).
  • הסטטיסטיקות הרשמיות שפרסמו פייסבוק מעידות על יותר מ-250 מיליון גולשים אקטיביים אשר גולשים בפייסבוק ממכשירי סמארטפון ופעילים פי שניים מהגולשים הקלאסיים (Facebook Official Statistics).
  • וגם בישראל, באתר זאפ הצהירו שחמישה מתוך עשרת המוצרים הפופולאריים שנמכרו ביותר בשנת 2010 היו סמארטפונים (דה מרקר).

התאמה של אתרי אינטרנט לטלפונים חכמים

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

[youtube style="text-align:center"]pJ_UP_1JERc[/youtube]

הצג לי את ה-User Agent שלך ואגיש לך את התוכן הרלוונטי

מכשירים סלולריים שונים מזוהים עם User Agent שונה (לקריאה מקדימה אודות מהו User Agent באתר וויקיפדיה לחץ כאן). למכשירי iPhone, Samsung או BlackBerry לדוגמא, יש User Agent ייחודי עם סימון המותאם לאותו יצרן ודגם.

לגוגל יש זחלן נפרד אשר מיועד לסריקה של תוכן המיועד למכשירים ניידים, שמו Googlebot-Mobile ואלה פרטיו המלאים (שמשתנים לעתים):

Nokia6820/2.0 (4.83) Profile/MIDP-1.0 Configuration/CLDC-1.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

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

תוצאות חיפוש מותאמות לנייד

גוגל מציעים ממשק חיפוש ייעודי המותאם למכשירים ניידים, Google Mobile Search, הזמין בכתובת http://www.google.com/m/ – דפים שתומכים בגרסת סלולר, מוצגים לרוב עם סימן של טלפון נייד לצד כתובת התצוגה של האתר (לא בהכרח מסמל תאימות מלאה של האתר):

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

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

  • לוקאליות – תוצאות לוקאליות עשויות להופיע גבוה יותר בתוצאות החיפוש, בהתאם להיסטורית החיפושים של הגולש ומיקומו הגיאוגרפי.
  • תאימות – אתרים אשר מציעים גרסה סלולרית, או אשר קל יותר להמיר את התצוגה שלהם לגרסה סלולרית, יופיעו לעתים במיקומים גבוהים יותר (תשוו לדוגמא שאילתות שונות בין התוצאות של Google.com לבין Google.com/m). האלגוריתם של גוגל מנסה לנבא כיצד יפוענח דף של אתר אינטרנט, כשייקרא בסוג המכשיר הנייד של אותו גולש (לקריאה נוספת: פטנט שהוגש על-ידי גוגל לזיהוי תוכן אשר מתאים לפורמט של טלפון נייד).
  • מכשיר הנייד ממנו בוצע החיפוש – אתרים אשר אינם מותאמים בצורה מלאה לאותו מכשיר נייד ממנו בוצע החיפוש, עשויים להופיע במיקום נמוך יותר מאשר אתרים אשר עברו התאמה מלאה לדוגמא.

היכן להקים את גרסת הסמארטפון?

ניתן להקים את גרסת הסלולר של האתר על גבי Sub-Domain, ספרייה פנימית באתר (Sub-Directory), Domain נפרד, כתובות שונות בדומיין הראשי (למשל, אותן כתובות רק עם פרמטר ייחודי לגרסת סלולר), או אפילו בכתובות זהות, ללא כל שינוי.

גוגל לא מציינים העדפה כלשהי בצורה רשמית. מרבית האתרים מפנים את הגולשים ל-Subdomain הבא: http://m.domain.com אך אין כל מניעה להפנות את הגולשים לכתובת בשם אחר. אם בחרתם להגדיר את גרסת הסלולר על כתובת שונה מאשר http://m.domain.com, אני מציע בכל זאת לבצע הפניה מ-Subdomain זה לכתובת שבחרתם (כי ישנם גולשים אשר התרגלו כבר לגלוש לכתובות אתרים בתוספת "m" וחבל לפספס אותם).

בנוסף, ניתן להכין אתרים ייעודיים אשר עבור מכשירי סמארטפון שונים. לדוגמא, ניתן להגדיר גרסה ייעודית למכשירי iPhone שתופיע ב-Subdomain הבא: iphone.domain.com, לעומת גרסה שמיועדת למכשירי BlackBerry שתופיע בכתובת bb.domain.com.

מבחינת מבנה כתובות ה-URL, אין חשיבות לשמירה על אותן כתובות URL כמו באתר הראשי בגרסת ה-Desktop, אך מומלץ לעשות זאת בכל זאת (במידה וניתן), על מנת לשמור על אחידות במבנה הכתובות של שתי הגרסאות (לנוחיות הגולשים).

מפת XML עבור Google Mobile

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

  • מפה ייעודית לסלולר תציג רק דפים שמגישים מידע בפורמט המותאם למכשירים ניידים.
  • התג חייב להופיע במפת האתר.
  • פורמטים נתמכים: non-mobile (this includes most content), XHTML mobile profile WML, cHTML (iMode).

דוגמא לפורמט תקין של מפת XML for Mobile Content:

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
<url>
<loc>http://mobile.example.com/article100.html</loc>
<mobile:mobile/>
</url>
</urlset>

וולידציה של הקוד

יש לשלב DocType מתאים בתחילת הקוד של דפי גרסת ה-Mobile ומומלץ שתוכן הדפים יעבור וולידציה לפי התקנים המקובלים:

  • וולידציה לפי תקן W3C לדפים מסוג XHTML.
  • בדיקת תאימות באמצעות W3C MobileOK Checker: http://validator.w3.org/mobile/ (מומלץ להשיג לפחות 25% תאימות).

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

הפניות

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

  • כשגולש מגיע לאתר ממכשיר נייד או דפדפן נייד תתבצע הפנית 302 מהגרסה הקלאסית של אותו דף, לגרסת הסלולר שלו. במידה וקיימות כמה גרסאות סלולר (למשל, גרסת iPhone נפרדת מאשר גרסת mobile רחבה), המערכת תבצע הפנית 302 לגרסה הרלוונטית, בהתאם ל-User Agent ממנו הגיעה התנועה. רשימת User Agent של טלפונים ניידים פופולאריים.
  • כשזחלן נייד (כגון: Googlebot-Mobile) סורק את הדף, תתבצע הפנית 302 מהגרסה הקלאסית של אותו דף, לגרסת ה-Mobile שלו.

הרשאות גישה

מומלץ לעדכן קובץ Robots.txt ב-Root של הדומיין או האתר של גרסת הסלולר, כך שיחסום את Googlebot מלסרוק את תכני הדפים המיועדים למכשירי הסלולר, ויאפשר רק ל-Googlebot-Mobile גישה לתכנים אילו. בצורה דומה, מומלץ להגדיר בקובץ ה-Robots.txt של האתר הקלאסי הראשי, חסימה ל-Googlebot-Mobile, מאחר ואיננו רוצים להסתכן בסריקה של תוכן כפול.

לדוגמא, במידה וגרסת ה-Mobile תותקן על SubDomain נפרד (כפי שנעשה לדוגמא באתר YouTube.com באמצעות הכתובת http://m.youtube.com/), יש לעדכן בקובץ Robots.txt של גרסת הסלולר את התוכן הבא:

User-agent: Googlebot
Disallow: /
User-agent: Googlebot-Mobile
Allow: /

אופטימיזציה לדף

בכלליות, דרישות האופטימיזציה לתוכן דפי ה-Mobile זהות לדרישות ה-SEO הרגילות (H1 בראש כל עמוד, תגיות Title ו-Meta Descriptions ייחודיים ורלוונטיים, Alt לכל תמונה וכדומה). ניתן להשתמש באותם תכנים מגרסת ה-Desktop עבור תגיות ה-Meta Description וה-Title.

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

לסיכום

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

כלים ועזרים מומלצים

  • W3C MobileOK Checker – בדיקת וולידציה לתוכן שמיועד למכשירים ניידים http://validator.w3.org/mobile/
  • User Agent Switcher – תוסף Firefox לצפייה בדפים ממכשירים ניידים https://addons.mozilla.org/en-US/firefox/addon/59/
  • בדיקת תגובות HTTP – כלי שבאמצעות ניתן לבחון את תגובות השרת מ-Clients שונים, כולל מ-iPhone (שימושי במיוחד לבדיקת תקינות ההפניות) http://www.web-sniffer.net/
  • כלי מנהלי האתרים של גוגל – מציג מידע בנפרד עבור מכשירים ניידים. למשל: סטטיסטיקות של שאילתות חיפוש שבוצעו במכשירים ניידים וסמארטפונים, מידע על שגיאות סריקה בדפים עם תוכן לסלולר מסוג WML/XHTM ו-CHTML, אפשרות לאחזר במדויק דף באתר בתור Googlebot-Mobile וכדומה http://www.google.com/webmasters/tools

מקורות נוספים מומלצים