בניית אתר בעברית7 שגיאות שכולם עושים

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

למה תרגום טוב לא מספיק לאתר עברי

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

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

שגיאות כיווניות: הבסיס שנשבר ראשון

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

1. הגדרת כיוון חלקית או חסרה

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

2. אייקונים וחצים שלא התהפכו

חץ "המשך" שמצביע ימינה באתר אנגלי צריך להצביע שמאלה בעברית, כי קדימה אצלנו זה שמאלה. אותו כלל חל על חצים בקרוסלה, אייקון חזרה ומחווני התקדמות בתהליך הזמנה. כשהחצים נשארים הפוכים, הגולש לוחץ "הבא" ומרגיש שהוא חוזר אחורה. ב-CSS מודרני יש לזה פתרון מסודר: מאפיינים לוגיים כמו margin-inline-start במקום ימין ושמאל קשיחים, כך שהפריסה מתהפכת מעצמה לפי כיוון הדף.

3. שורות מעורבות של עברית ולועזית

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

טיפוגרפיה ופריסה שנשארו בתבנית לועזית

4. פונט שלא תוכנן לעברית

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

5. יישור ורווחים שהועתקו כמו שהם

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

טפסים ומובייל: המקום שבו מאבדים לקוחות

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

6. טפסים שמתנהגים הפוך

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

7. מובייל שנבדק רק באנגלית

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

מה כל זה עושה לקידום האורגני

גוגל לא מדרג לפי יופי. הוא מדרג לפי התנהגות משתמשים ואיכות טכנית, ואתר עברי שבור פוגע בשניהם:

• גולשים נוטשים מהר, וזמן שהייה קצר מאותת לגוגל שהדף לא עונה על כוונת החיפוש
• טפסים שבורים מורידים המרות, וקמפיין PPC ממשיך לשלם על קליקים שלא הופכים ללקוחות
• פונטים כבדים שלא הותאמו פוגעים במהירות הטעינה ובמדדי Core Web Vitals
• מבנה כותרות לא תקין וטקסט שנשבר מקשים על גוגל להבין במה הדף עוסק
• חוויית מובייל חלשה פוגעת ישירות בדירוג, כי האינדוקס של גוגל הוא mobile-first

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

טבלה מסכמת: זיהוי ותיקון מהיר

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

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

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