הקשר בין העיצוב של האתר שלך לקידום אתרים והביצועים שלו בגוגל

image 27-2

תוכן עניינים

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

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

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

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

 

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

אנימציות ואפקטים ויזואליים

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

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

1.הפחתת כמות האפקטים עבור חיבורים איטיים (ראו את הדוגמה של ג'ימייל)

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

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

 

תמונות

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

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

AMP

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

One Page Layout

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

1.מעמיסים מאוד על הדפדפן, במיוחד אם מדובר בדפדפן סלולרי

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

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

שילוב של כמה שיותר תוכן

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

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

במה אתם מתעניינים?


מענה טלפוני: ימים א-ה 10:30-15:00

במה אתם מתעניינים?


מענה טלפוני: ימים א-ה 10:30-15:00