אתר מובייל? רספונסיבי? מה נכון לעשות ועל מה אפשר לוותר

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

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

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

אז מה עושים?

פשוט מאוד, אתר רספונסיבי בלבד! לא אתר מובייל – אתר רספונסיבי. זוהי ההמלצה הבלעדית מצד הנהלת גוגל.

html ו- css באתר:
אז מהו בעצם עיצוב רספונסיבי? עיצוב רספונסיבי זוהי הגדרה שבו השרת תמיד ישלח את אותו קוד html לכל המכשירים. ה- css משמש כדי לשנות את העיבוד של הדף במכשיר באמצעות שאילתות מדיה.

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

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

הוספת תג http ב- header:

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

GET /page-1 HTTP/1.1
Host: www.example.com
(…rest of HTTP request headers…)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… rest of HTTP response headers…)

כתובת rel =

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

פעולה זו נתמכת ב- 2 אופנים. ב- html וב- sitemap

כך זה נראה ב- html:

מהאתר הרגיל:

מהאתר הנייד:

וכך זה נראה ב- 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>

לסיכום:

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