עיצוב דף 404 (שגיאה) לאתר

מדוע עיצוב עמוד 404 מאבד תנועה ופניות

קישור מניוזלטר ישן, מבלוג של מישהו אחר או מתוצאות חיפוש מוביל למדור שהועבר — והמבקר רואה מסך ברירת מחדל אפור: «404 Not Found» בשורה במרכז, בלי כותרת עליונה, תפריט וחיפוש. מה קרה — שגיאת הקלדה בכתובת, העמוד נמחק או האתר נשבר — הוא לא מבין ולא מנסה לברר.

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

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

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

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

מה נותן מסך שגיאה מושקע: האפקט במדדים

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

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

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

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

אפשרויות מימוש של מסך השגיאה והמגבלות שלהן

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

השוואה בין האפשרויות

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

שלבי העבודה: מביקורת הפניות ועד מסירת הקבצים

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

1. ביקורת הפניות. מייצאים כתובות, קודי תגובה ומקורות לתקופה, מפרידים בין מעברים חיים לבוטים ולקישורים חיצוניים שבורים. בפלט — החלטה לכל כתובת: הפניה או עמוד שגיאה.
2. אב טיפוס. שלד בלי גרפיקה: היררכיית בלוקים, יציאות למשתמש — חיפוש, קטגוריות, חומרים פופולריים, התנהגות במסכים צרים. את הלוגיקה מתאמים לפני הציור.
3. אישור המקאפ. שפה חזותית, מצבים (חיפוש ריק, כתובת שגויה), טקסטים וטון. המקאפ מתקבל יחד עם ההתנהגות, ולא כתמונה.
4. חיתוך והטמעה. העמוד מחזיר קוד שגיאה, ולא תגובת הצלחה, — אחרת מנועי החיפוש מתייחסים אליו כרגיל ומחזיקים באינדקס כתובות ריקות. סטטי מוחזר בלי פניות מיותרות לשרת.
5. בדיקה בסביבת בדיקה. מתאר בדיקה: מעבר על קישורים שבורים, תרחישי הפניות, התנהגות בחיבור איטי ובמטמון נקי.
6. מסירת הקבצים. קבצי מקור ורכיבים, כללי הפניות, תזכורת קצרה למקרה של שינוי במבנה האתר.

מה אנחנו מוסרים: מקאפים, טקסטים, מצבים ותקנונים

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

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

מקרה בוחן: כיצד גדל החזר המבקרים לאחר העיבוד מחדש

לפני: תבנית אחת לכל הכתובות השבורות

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

לפי הדוחות של Yandex Metrica שיעור היציאות ממנו נשמר מעל 80%, ולעמוד הבית עברו פחות מ-12% מהסשנים — המבקר שהגיע מסימנייה או מאתר אחר אבד לגמרי.

אחרי: רמזים לפי הכתובת ויומן 404

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

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

שלושה שבועות לאחר ההשקה שיעור המעברים הלאה באתר גדל מ-12% ל-38%, היציאות מהמסך ירדו מ-81% ל-44%, וביקורים חוזרים בקטלוג הוסיפו 9 נקודות אחוז. לפי היומן נמצאו ונסגרו יותר משישים קישורים פנימיים שבורים — שגיאות ה-404 עצמן החלו להתרחש בשליש פחות. את התוצאה מדדו לפי אותם דוחות כניסה שלפיהם נספר ה«לפני», ולכן ההשוואה תקינה.

במה שונה 404 מ-410 ומה לעשות עם הפניות

שני הקודים אומרים «הדף אינו קיים», אבל ההבדל במשמעות: 404 — «לא נמצא» ניטרלי, 410 — «נמחק לתמיד ולא יחזור». עבור מנוע החיפוש אלה אותות שונים: לאחר קבלת 410 הוא מסיר את הכתובת מהאינדוקס בסריקה הקרובה, ואילו ב-404 הוא ממשיך לבקר בה חודשים, ובודק אותה מחדש מעת לעת.

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

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

הפספוס השני בשכיחותו — עמוד «404» עם קוד תגובה 200. הוא נראה מסודר, אבל עבור הבוט זה עמוד רגיל, והוא נכנס לאינדקס. כדי לבדוק שהשרת מחזיר בדיוק 404, עוזר סרוק האתר באמצעות בוט — Google Search Central מתאר תרחיש כזה כטיפוסי.

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

ספקות טכניים נפוצים ותשובות בנוגע למסך השגיאה

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

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

איך נבדקת גרסת המובייל?

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

האם תתמכו בריבוי שפות?

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

ההפניות האוטומטיות לא יישברו?

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

נדון במשימה: איך נתחיל את העבודה

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

מה יעזור לנו בהתחלה:

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

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