העלמת טקסט באתר אינטרנט וסכנותיו

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

אחת מהתגיות היותר שימושיות אך היותר מסוכנות שאנו מכירים ב CSS היא תגית ה display: none;

מתי משתמשים בתכונה display: none

display: none
היא תכונת CSS פופולרית שגורמת לאלמנט באתר אינטרנט להעלם. כאשר אני מצרף את התכונה הזו לאלמנט כלשהו (פסקה, div, רשימה וכו') הוא פשוט 'נעלם' מדף האינטרנטולא מופיע בו. זה שימושי במיוחד כאשר אני רוצה לחשוף את החלק הזה יותר מאוחר – כמו למשל הודעת שגיאה שתצוץ אך ורק אם המשתמש באתר האינטרנט מבצע פעולה מסוימת (כמו למשל לכתוב בעברית בשדה של שם משתמש ולחיצה על Submit).

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

הבעיה המרכזית בתכונה display: none

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

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

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

למה זה קורה?

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

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

מה עושים?

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

במקומות שבהם אי אפשר להשתמש בפתרון אחר (כמו למשל טקסט חלופי ל-flash שחייב להיות בקוד ולהראות למנוע החיפוש) אז אפשר להשתמש בdisplay: none – אך בזהירות מרובה.

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

חיבור מצלמה למיקרובקר

חיבור מצלמה למיקרו בקר ויצירה של מצלמת אבטחה מרחוק בעלות של 20 שקל.

תמונה של עציץ, רספברי פיי ורמקול
רספברי פיי

לגרום לעציץ שלכם לדבר

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

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

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד