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

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

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

1. שימוש חכם בדיבים נפתחים (Expendable Divs)

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

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

2. תמונות גדולות – איך להפוך את החסרונות ליתרונות

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

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

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

• אל תעלו לאתר תמונה הגדולה מהגודל המוצג. במקום זאת, התאימו את התמונה מראש למימדים הדרושים באתר ורק אז תעלו אותה.


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

3. הגבילו אזורים הסגורים בסיסמה

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

4. אזנו בין תכנים ארוכים וקצרים באתר

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

מה היתרונות של תכנים קצרים?

• הם מפשטים רעיונות מורכבים והופכים אותם לנגישים לכולם


• ניתן לעבור עליהם ברפרוף ולא חייבים להתעמק בקריאה


• קל יותר לקרוא אותם "על הדרך" (בנסיעה באוטובוס, למשל)

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

• הם מעמיקים ויסודיים יותר, ומעניקים לגולש יותר מידע


• לעתים קרובות הם מרתקים (חשבו על תכנים מגזיניים, טורי דעה או ניתוחים של סרטים וסדרות)


• מכיוון שכותבים משקיעים הרבה זמן ומחשבה ביצירתם, הם נוטים להיות מקוריים ולהציג רעיונות חדשים


• הם מקבלים יותר אנגייג'מנט (לייקים, שיתופים ותגובות) מתכנים קצרים


• הם מספקים הזדמנויות רבות יותר להכנסת קישורים


• הם עוקפים תכנים קצרים בדירוגים של גוגל

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

כותב המאמר הזה ב-copyhackers מגיע למסקנה שהאורך האידיאלי לתוכן שאנשים גם ירצו לקרוא וגם יצרו אתו אנגייג'מנט, נופל בטווח שבין 1,600 ל-2,450 מילים. 1,600 מילים ניתן לקרוא ב-7 דקות, הזמן אחריו הריכוז מתחיל לצנוח; ו-2,450 מילים תופסות את תשומת לבם של מנועי החיפוש.

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

5. השתמשו בגלילה אינסופית אך בצעו לה אופטימיזציה

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

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

6. נצלו את יתרונותיהם של מגה-תפריטים

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

מאידך, תפריטי drop-down מקשים לעתים על מנועי חיפוש לסרוק את האתר. בנוסף, תפריטים שעושים שימוש בכפתורים במקום בקישורים, פוגעים ב-SEO מאחר שמנועי החיפוש אינם "רואים" טקסט שנמצא בכפתורים. כפתורים נטענים לאט יותר מקישורים והם נגישים פחות ללקויי ראייה.

הנה כמה דברים שניתן לעשות כדי להפוך מגה-תפריטים לידידותיים ל-SEO (בהנחה שיש לכם פרופיל קישורים חזק):

• בקוד ה-HTML של האתר, מקמו את הניווט אחרי גוף התוכן העיקרי של האתר כדי שגוגל תוכל לסרוק טוב יותר את הטקסטים שמהווים קישורים לעמודים השונים באתר (anchor texts)


• צמצמו את מספר תתי-הקטגוריות בכל קטגוריה כדי שיהיה ניתן לשנותi בקלות לפי צרכים משתנים של SEO (למשל, בהתאם לעונות השנה או לקראת מבצעים)


• השתמשו באמצעים ויזואליים כדי להבדיל בין קטגוריות (למשל, סכמת צבעים שונה לכל קטגוריה, כאשר צבען של תתי-הקטגוריות מתקשר לצבע של הקטגוריה הראשית)

7. הימנעו משימוש בסליידרים

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

אז למה בכל זאת כדאי להימנע מהם? כי מתברר שהם פוגעים גם בחוויית המשתמש וגם ב-SEO, בכמה היבטים:

• סליידרים לוקחים את השליטה מהגולש ולא מאפשרים לו להחליט מה הוא רוצה לראות באתר


• מאחר שכל התמונות בסליידר נטענות בו זמנית, הן עלולות להאט את מהירות הטעינה של האתר


• איטיות האתר גורמת לגולשים רבים לעזוב אותו מהר, מה שפוגע בדירוגיו במנועי החיפוש


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


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


• סליידרים מציגים לגולשים יותר מדי מסרים והם לא קולטים אף אחד מהם.


• סליידרים נראים כמו באנרים פרסומיים, ולכן גולשים רבים מדלגים עליהם באופן אוטומטי.

כדי להבין טוב יותר למה לא מומלץ להשתמש בסליידרים, תוכלו לצפות בסרטון הבא.

הנה כמה אפשרויות חלופיות לסליידרים:

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


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


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


• Hero image שמכיל גם טופס הרשמה.


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

אתר subhub, לדוגמא, מציג שילוב של hero image עם קריאה לפעולה, וסרטון וידאו:

8. בעיצוב למובייל, העדיפו אתרים רספונסיביים

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

היתרונות של עיצוב רספונסיבי כוללים:

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


• למנועי החיפוש קל יותר יותר לאנדקס את התכנים באתר רספונסיבי


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


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

סיכום

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