הדר באתר הוא האזור העליון שמופיע בכל עמוד: לוגו, תפריט, ולרוב גם כפתור פעולה וטלפון. זה הדבר הראשון שגולש רואה, והוא מחליט בתוך שניות אם הוא מבין איפה הוא נמצא ולאן הוא יכול ללכת. אחרי שבניתי עשרות אתרים, מאתרי תדמית קטנים ועד חנויות אונליין, אני יכול להגיד שהדר לא נכון הוא אחת הסיבות הנפוצות לאתר שנראה טוב ולא מביא פניות.
במדריך הזה אני עונה על השאלה מה צריך להיות בהדר: אילו אלמנטים חובה בכל אתר, מה משתנה בין אתר תדמית לחנות, איך בונים הדר נכון למובייל, ואיך ההדר משפיע על הקידום בגוגל.
מה זה הדר באתר (Header)?
הדר (Header) הוא החלק העליון והקבוע של אתר, שמופיע בכל העמודים ומכיל את הלוגו, תפריט הניווט הראשי ולרוב גם כפתור פעולה ופרטי קשר. התפקיד שלו הוא לעזור לגולש להבין מיד באיזה אתר הוא נמצא, מה האתר מציע ואיך מגיעים לכל חלק בו.
מבחינה טכנית, ההדר הוא תבנית אחת שחוזרת בכל עמוד. לכן כל קישור שתשימו בו הופך לקישור פנימי מכל עמוד באתר, וזה בדיוק מה שהופך אותו לחשוב גם לגולשים וגם לגוגל.
1. למה ההדר באתר כל כך חשוב
1.1 חוויית משתמש: הגולש מחליט מהר
גולש שנכנס לאתר לא קורא, הוא סורק. בשניות הראשונות הוא מחפש שלושה דברים: מי אתם, מה אתם מציעים, ואיך יוצרים קשר. אם ההדר עונה על שלושתם, הוא נשאר. אם לא, הוא חוזר לתוצאות החיפוש.
1.2 קידום: הקישורים שגוגל רואה בכל עמוד
גוגל מבין את מבנה האתר דרך הקישורים הפנימיים. קישור שמופיע בתפריט הראשי מקבל קישור מכל עמוד באתר, ולכן גוגל מבין שהוא חשוב. תפריט שמכיל עשרות קישורים לכל עמוד קטן מטשטש את המסר הזה. תפריט ממוקד מחזק את העמודים שבאמת חשובים לעסק. הסברתי את העיקרון הזה בהרחבה במאמר על היררכיה נכונה של אתר.
1.3 המרות: ההדר הוא הכפתור שתמיד זמין
באתר תדמית של עורך דין הוספתי להדר כפתור בולט "קבעו פגישה עכשיו". ההקלקות מהעמוד הראשי עלו ב-40%. לא שיניתי את התוכן, לא את העיצוב ולא את התנועה. רק נתתי לגולש דרך ברורה לפעול מכל מקום באתר.
2. מה צריך להיות בהדר של כל אתר
יש אלמנטים שלדעתי חייבים להופיע בהדר באתר מכל סוג, בלי קשר לתחום.
2.1 לוגו עם קישור לעמוד הבית
הלוגו מזהה את העסק ומחזיר את הגולש להתחלה. הוא צריך להיות קריא גם בגודל קטן במובייל, ובקובץ קל (SVG או WebP) כדי לא להאט את טעינת העמוד.
2.2 תפריט ניווט ממוקד
באתר תדמית אני ממליץ על חמישה עד שבעה פריטים בתפריט הראשי: שירותים, אודות, עבודות, בלוג ויצירת קשר. כל מה שמעבר לזה הולך לתתי תפריטים או לפוטר. שמות הפריטים צריכים להיות ברורים, לא יצירתיים. "שירותים" עדיף על "מה אנחנו עושים בשבילכם".
2.3 כפתור הנעה לפעולה אחד בולט
כפתור אחד בצבע שונה משאר ההדר, עם טקסט שאומר מה הגולש מקבל. לא "צור קשר" אלא "קבלו הצעת מחיר" או "דברו איתי בוואטסאפ". כתבתי על זה מדריך שלם עם נתונים מאתרים של לקוחות: איך כותבים הנעה לפעולה שמביאה פניות.
2.4 טלפון או וואטסאפ לחיץ
באתרים של עסקי שירות, מספר טלפון שאפשר ללחוץ עליו במובייל הוא לפעמים מקור הפניות המרכזי. אני מוודא שהוא מוגדר כקישור tel ושהלחיצה עליו נמדדת כהמרה.
| אלמנט | חובה? | למה |
|---|---|---|
| לוגו עם קישור לבית | כן | זיהוי וחזרה להתחלה |
| תפריט ראשי | כן | ניווט והיררכיה לגוגל |
| כפתור פעולה | כן | פנייה מכל עמוד |
| טלפון או וואטסאפ | בעסקי שירות | פנייה מהירה מהנייד |
| חיפוש | בחנויות ובאתרי תוכן גדולים | מציאת מוצר או מאמר |
| סל קניות וחשבון | בחנויות | חוויית קנייה |
| סרגל עליון (Top Bar) | לא | מבצעים, שעות פעילות |
| בחירת שפה | רק באתר רב לשוני | קהל בינלאומי |
3. הדר באתר תדמית: מה חשוב בו
באתר תדמית המטרה היא אמון ופנייה. ההדר צריך לשדר מקצועיות ולהוביל ליצירת קשר.
- לוגו ותפריט קצר שמציגים מיד את תחום העסק.
- כפתור פעולה אחד שמוביל לשיחה, לוואטסאפ או לטופס קצר.
- טלפון לחיץ, במיוחד בעסקים שהלקוחות שלהם מעדיפים לדבר.
- סרגל עליון רק אם יש בו מידע שימושי באמת, כמו שעות פעילות או אזור שירות.
4. הדר באתר מכירות: מה חייב להיות בחנות
בחנות אונליין ההדר הוא חלק מתהליך הקנייה עצמו.
- אייקון סל קניות שמראה כמה פריטים יש בסל, בכל עמוד.
- כניסה לחשבון אישי למעקב אחרי הזמנות.
- שדה חיפוש בולט, במיוחד בחנויות עם הרבה מוצרים.
- תפריט קטגוריות, לרוב Mega Menu שמחלק לתתי קטגוריות.
- פס מבצע קצר, כמו משלוח חינם מעל סכום מסוים.
בחנות תכשיטים שבניתי, הוספת אייקון לב קטן לצד הנעה לפעולה ממוקדת העלתה את הרכישות ב-22%. פרטים קטנים בהדר משפיעים על כל העמודים בבת אחת.
5. ההבדלים בין הדר באתר תדמית להדר בחנות
| נושא | אתר תדמית | אתר מכירות |
|---|---|---|
| מטרה | אמון ופנייה | מציאת מוצר וקנייה |
| כפתור מרכזי | שיחה, וואטסאפ, הצעת מחיר | סל קניות |
| תפריט | קצר, 5 עד 7 פריטים | קטגוריות, לרוב Mega Menu |
| חיפוש | לרוב לא נחוץ | חובה |
| חשבון אישי | לא | כן |
6. הדר באתר במובייל: איפה רוב האתרים נופלים
רוב הגולשים היום מגיעים מהטלפון, ושם ההדר הכי צפוף.
6.1 תפריט המבורגר, אבל עם כפתור בחוץ
מקובל להסתיר את התפריט מאחורי אייקון המבורגר, וזה בסדר. מה שלא בסדר הוא להסתיר גם את כפתור הפעולה. במובייל אני משאיר מחוץ לתפריט את הלוגו, את כפתור הטלפון או הוואטסאפ ואת אייקון התפריט. שלושה דברים, לא יותר.
6.2 הדר דביק, אבל לא גבוה מדי
הדר דביק (Sticky Header) שנשאר למעלה בזמן גלילה שומר על הכפתור זמין תמיד. אבל הדר גבוה שתופס רבע מהמסך פוגע בקריאה. במובייל אני מקטין את ההדר הדביק לגובה מינימלי.
6.3 כפתורים בגודל אצבע
כל אלמנט לחיץ בהדר צריך להיות גדול מספיק ללחיצה עם אגודל, עם מרווח מספיק מהאלמנט שלידו. לחיצה בטעות על הכפתור הלא נכון היא דרך מהירה לאבד גולש.
7. הדר באתר וביצועים: מה לבדוק
ההדר נטען בכל עמוד, ולכן כל בעיה בו מוכפלת בכל האתר.
- לוגו קל בפורמט SVG או WebP, עם רוחב וגובה מוגדרים כדי שהעמוד לא יקפוץ בזמן הטעינה.
- בלי סליידרים ואנימציות כבדות בתוך ההדר.
- Mega Menu שלא טוען תמונות כבדות עד שפותחים אותו.
- נגישות: ניווט במקלדת, קישור "דלג לתוכן" וטקסט ברור לכל אייקון.
קפיצות תוכן בזמן טעינה נמדדות ב-Core Web Vitals, ולוגו בלי מידות הוא אחד הגורמים הנפוצים לכך.
טעויות נפוצות בהדר באתר
- תפריט עם עשרים פריטים. הגולש לא מוצא כלום, וגוגל לא מבין מה חשוב.
- שלושה כפתורי פעולה בצבעים שונים. כשהכל בולט, שום דבר לא בולט.
- שמות תפריט יצירתיים. הגולש מחפש "שירותים", לא משחק מילים.
- כפתור הפעולה נעלם במובייל בתוך תפריט ההמבורגר.
- הדר דביק גבוה מדי שמסתיר חצי מהתוכן בטלפון.
- לוגו כבד בפורמט PNG ענק שמאט כל עמוד באתר.
סיכום: מה צריך להיות בהדר באתר שלכם
הדר טוב עונה לגולש על שלוש שאלות: איפה אני, מה יש כאן ואיך יוצרים קשר. בכל אתר הוא כולל לוגו, תפריט ממוקד וכפתור פעולה אחד בולט. באתר תדמית מוסיפים טלפון לחיץ, ובחנות מוסיפים סל, חשבון וחיפוש. במובייל משאירים בחוץ רק את מה שחייב, ובכל מקרה שומרים על הדר קל ומהיר.
אם אתם בונים אתר חדש, כדאי להחליט מה ייכנס להדר כבר בשלב תכנון המבנה. במאמר על טעויות בארכיטקטורת אתרים פירטתי איך המבנה הזה משפיע על כל השאר.
שאלות נפוצות על הדר באתר
מה צריך להיות בהדר של אתר?
בכל אתר: לוגו עם קישור לעמוד הבית, תפריט ניווט ממוקד וכפתור הנעה לפעולה אחד בולט. באתר של עסק שירות מוסיפים טלפון או וואטסאפ לחיץ, ובחנות אונליין מוסיפים סל קניות, חשבון אישי ושדה חיפוש.
כמה פריטים לשים בתפריט הראשי?
באתר תדמית חמישה עד שבעה פריטים זה טווח טוב. מעבר לזה הגולש מתקשה לבחור, ועמודים פחות חשובים יכולים לעבור לתתי תפריטים או לפוטר. בחנויות גדולות משתמשים בתפריט קטגוריות מורחב.
האם כדאי להשתמש בהדר דביק?
ברוב האתרים כן, כי הוא שומר על התפריט וכפתור הפעולה זמינים בזמן גלילה. במובייל חשוב שההדר הדביק יהיה נמוך, כדי שלא יסתיר חלק גדול מהמסך.
האם ההדר משפיע על הקידום בגוגל?
כן, בעקיפין. הקישורים בתפריט מופיעים בכל עמוד באתר, ולכן הם מסמנים לגוגל אילו עמודים הכי חשובים. בנוסף, הדר כבד יכול להאט את האתר ולפגוע במדדי Core Web Vitals.
מה ההבדל בין הדר באתר תדמית להדר בחנות?
באתר תדמית ההדר מכוון לאמון ופנייה: לוגו, תפריט קצר, טלפון וכפתור פעולה. בחנות ההדר מכוון לקנייה: סל קניות, חשבון אישי, חיפוש ותפריט קטגוריות.
מה לשים בהדר במובייל?
לוגו, כפתור טלפון או וואטסאפ ואייקון תפריט. את שאר הקישורים מסתירים בתוך התפריט. חשוב שכפתור הפעולה לא ייעלם בתוך תפריט ההמבורגר.
האם צריך סרגל עליון מעל ההדר?
לא חובה. סרגל עליון מתאים כשיש בו מידע שימושי באמת, כמו מבצע משלוח חינם, שעות פעילות או אזור שירות. אם אין בו ערך, הוא רק תופס מקום.
באיזה פורמט לשמור את הלוגו בהדר?
SVG הוא הפורמט המומלץ ללוגו, כי הוא חד בכל גודל ושוקל מעט. אם אין קובץ SVG, אפשר להשתמש ב-WebP. בכל מקרה כדאי להגדיר רוחב וגובה כדי שהעמוד לא יקפוץ בזמן הטעינה.
