אתר מותאם | קידום במובייל

קידום אתרים מותאמים/ סלולאריים

קיימות מספר אופציות לבניית אתר מותאם כאשר לכל אחת מהן יתרונות וחסרונות:

אתר "מגיב" (responsive website) – היא האופציה העדיפה באופן רשמי על בינג וגם על גוגל (באופן לא רשמי). המשמעות של אתר מגיב היא בעצם הפניית כל גולש לקובץ CSS המתאים למכשיר/ דפדפן שלו להצגת עיצוב מותאם לאותו קוד HTML. למעשה מדובר באתר בודד המשנה את צורתו מבחינת עיצוב על מנת להתאים ויזואלית לסוגי המסכים השונים.

מתי כדאי להשתמש באתר מגיב:

א. כאשר יש לך את היכולת הטכנית לכך

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

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

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

יתרונות אתר מגיב

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

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

ג. אין צורך בביצוע re-directing באתר – לכך שלושה יתרונות:

a. ניהול טכני פשוט יותר המונע בעיות פוטנציאליות הקשורות בהפניות
b. מאפשר טעינה מהירה יותר של הדפים לגולשים
c. אפשרות לאינדוקס מהיר יותר (ושל דפים רבים יותר מהאתר) בגוגל

דגשים לקידום אתר מגיב

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

a. עבור טלפונים מסורתיים:

i. SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +https://www.google.com/bot.html)

ii. DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +https://www.google.com/bot.html)

b. עבור טלפונים חכמים (סמארטפונים):

i. Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +https://www.google.com/bot.html)

יש לשים לב כי גוגל עשויה לשנות user-agent בעתיד אבל בכל מקרה היא תציג את עצמה עם Googlebot-Mobile. לכן מומלץ להקפיד לאפשר גישה לכל רובוט המציג את עצמו כ- Googlebot-Mobile. פרקטיקה טובה תהיה לאפשר גישה גם לאתר הרגיל וגם לאתר המובייל לכל רובוט מטעם גוגל בין אם מדובר ב- Googlebot-Mobile או ב- Googlebot הרגיל – גוגל תחליט בעצמה מה היא שולחת לכל אחת מהגרסאות של האתר שלכם, אל תחסמו אותה (באמצעות קובץ robots.txt או בכל דרך אחרת)!

שתי טעויות פופולריות שכדאי לשים לב אליהן בזיהוי ה- agent:

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

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

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

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

ד. הוסיפו שאילתות מדיה בקובץ ה- CSS עבור מכשירי מובייל – דוגמא מומלצת לשימוש עבור סמארטפונים:

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

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

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

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

אתר דינאמי לסלולר

אתר דינאמי (dynamic website) – היא אופציה נוספת המתאימה למקרים בהם אין אפשרות שקוד HTML אחד ישרת את כל סוגי המכשירים. במקרה זה, ה- URL-ים של האתר נשארים זהים עבור כל סוגי המכשירים בין אם מדובר בגולש אייפון (ולא רק, גם ניידים ישנים, סמארטפונים אחרים) או גולש אינטרנטי רגיל. כל סוג גולש יזוהה לפי ה- agent שלו כאשר הוא נכנס לאתר ויופנה לגרסת ה- HTML המתאימה לו ביותר.

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

מתי כדאי להשתמש באתר דינאמי

א. כאשר יש לך את היכולת הטכנית לכך – המורכבות של אתר דינאמי היא אף גדולה יותר מאשר אתר מגיב והיא אינה מתאימה לכל מתכנת.

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

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

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

יתרונות אתר דינאמי

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

ב. התאמת התכנים באופן מיטבי לכל הקהלים של האתר

ג. חוויית גלישה לכל סוגי הגולשים באתר

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

א. כל הדגשים של אתר מגיב; ובנוסף:

ב. שימוש ב- Vary HTTP header – מאחר ואותו URL משמש להצגת תכנים שונים לפי סוג המשתמש (user agent), מומלץ לעזור לגוגל להגיע לתכנים המותאמים למובייל מהר יותר באמצעות השימוש ב- Vary HTTP header, המרמז למנוע החיפוש כי האתר עושה שימוש בתכנים שונים על אותן כתובות URL וכי עליו לשלוח גם את Googlebot-Mobile לסריקה של האתר ולא רק את Googlebot.

אתר מותאם לסלולר (סט כתובות URL נפרד)

אתר מותאם על כתובת שונה (נפרד) – היא באופן לא מפתיע האופציה הפופולרית ביותר באתרים היום (כ- 80%
מבעלי האתרים משתמשים בה). מאחר ותחום בניית אתרי הסלולר לא היה מפותח דיו, רוב בעלי האתרים החליטו לפתוח סאב דומיין דוגמת m.mysite.co.il או ספריה באתר, שאליהם הופנו הגולשים הנכנסים לאתר של העסק באמצעות מכשירי מובייל.למרות שגוגל יודע לטפל במקרים אילו, מבחינת קידום זוהי האופציה הגרועה ביותר. מאחר ומדובר בכתובות URL-ים שונות לחלוטין יש צורך לקדם כתובות חדשות מאפס, גם במקרים בהם האתר הרגיל מקודם בתוצאות החיפוש של גוגל ומופיע גבוה עבור כל הביטויים החשובים לו.כבר היום על מנת לשרת את כל סוגי המכשירים בשוק צריך 3 אתרים שונים:1. האתר הרגיל mysite.co.il2. אתר מותאם לסמארטפונים, לדוגמא m.mysite.co.il

3. אתר מותאם לטלפונים ישנים, לדוגמא phone.mysite.co.il *

* ניתן להגדיר תחת m.mysite.co.il אתר שישרת את כלל סוגי המובייל – גם סמארטפונים וגם טלפונים מסורתיים.

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

כאשר גולש חוזר לבקר באתר אותו הוא מכיר, רצוי שלמעט העברתו לסאב דומיין (או לאתר הרגיל במידה והוא גולש מהמחשב) שאר ה- URL יהיה משהו אותו הוא מזהה מגלישה קודמת. לדוגמא אם באתר הרגיל מופיעה הכתובת הבאה: Mysite.co.il/my-inner-page.html רצוי שבאתר המותאם הכתובת תהיה: m.Mysite.co.il/my-inner-page.html ולא כתובת חדשה לגמרי.

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

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

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

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

ד. כאשר כבר יש לך אתר מובייל פעיל ומוכר בכתובת נפרדת

יתרונות אתר מותאם נפרד

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

ב. התאמת התכנים באופן מיטבי לכל הקהלים של האתר

ג. חוויית גלישה לכל סוגי הגולשים באתר

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

דגשים לקידום אתר מותאם נפרד

א. כל הדגשים של אתר מגיב; ובנוסף:

ב. השתמשו באותן כתובות URL של האתר הרגיל שיופיעו תחת סאב דומיין "m" – כפי שציינתי קודם.

ג. הוסיפו בקוד של האתר הרגיל קישור באמצעות תגית rel="alternate" – אל הכתובות המקבילות באתר המובייל (כל דף יעביר את הכתובת של הדף המקביל לו באתר הסלולרי).

אם יש לכם שני סאב דומיינים (אחד לסמארטפונים ואחד לטלפוניים מסורתיים) יש להוסיף שתי תגיות alternate בדף של האתר הרגיל, אחת לכל סאב דומיין באופן הבא:

אם יש לכם סאב דומיין אחד המשרת את כל משתמשי המובייל על אותה כתובת עדיין יש להוסיף שתי תגיות alternate בדף של האתר הרגיל אך באופן הבא:

בקוד של אתר המובייל עצמו הוסיפו תגית קנוניקל (rel="canonical") אל הכתובות המקבילות באתר הרגיל (כל דף יעביר את הכתובת לדף המקביל לו באתר הרגיל), לדוגמא:

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

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

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

יש לשים לב כי ההפניה שאנו עושים תתבצע לכתובת זהה לכתובת המופיעה בתגית ה- alternate בדף ולא לכתובת אחרת!

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

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

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

השארת תגובה