דילוג לתוכן הראשי
THE FLOOD

ארכיטקטורת מידע

Information Architecture: הטכניקות שהופכות דף רגיל לדף שגוגל וגולש רואים בו עומק: היררכיה (איפה הדף בעץ ולאן הוא מוביל) ועומס (כמה תוכן הוא נושא בלי להיראות כבד). כל דף של THE FLOOD נבנה מהן, בסדר הזה.

#cp-hierarchy

1. היררכיה: איפה הדף בעץ, ולאן הוא מוביל

#הטכניקהמה היא עושה לדףבארסנל
1.1פירורי לחם בשלוש רמות, עם רשימה נפתחת של האחים (הפטרן של Google Drive)מראה איפה הדף בעץ, ומקפיץ לדף אח בלחיצה, בלי לחזור לאבא. שלוש רמות גורמות לאתר להיראות גדול.UkBreadcrumb עם siblings
1.2כתובת שטוחה לישות, תיקייה לקטגוריההחלטה (29.10, הפכה את זו מ-28.10): דף של ישות (שירות, תחום) יושב בכתובת שטוחה, /services/website-speed, וקטגוריה (אתרי AI, תגית) שומרת על התיקייה שלה. כך TripAdvisor: היררכיה רק לדפי קטגוריה, ולא למגדל אייפל, ולכן הכתובת לא משתנה כשהקיטלוג משתנה. האבא מופיע בפירורי הלחם ובפס הענף, לא בכתובת. כמו בבלוג. אם יופיעו בעיות בחיפוש, עוברים לתיקיות.UkBreadcrumb, ו-aiAreaHref ב-data/ai-areas-data.ts
1.3תפריט צד: האבא בראש, הילדים מתחתיועוד דרך להראות היררכיה: רשימה בצד הדף, האבא ראשון ומודגש, הילדים מוזחים מתחתיו והדף הנוכחי מסומן. מראה את כל הענף בבת אחת, גם כשהוא ארוך מדי לפס טאבים. בפועל אין לזה שימוש באתר, באף מקום (28.10).לא עכשיו: פס האחים (BranchNav) מראה את הענף כולו
1.4פס טאבים בין דפים אחיםמעבר בין אחים בלי לחזור לאבא.UkSiblingNav
1.5פס טאבים שמתחלף לפי המקום (TripAdvisor: ישראל, אילת)הטאב הראשון הוא המקום שבו אתה עומד, ואחריו אותם צירים (דברים לעשות, מלונות, מסעדות) בתוך המקום הזה. עוברים לאילת, והפס כולו עובר לאילת. מנגנון אחד: ישראל היא רשימה, אילת היא רשימה.UkSiblingNav, האבא כטאב ראשון (בענף הניסוי)
1.6בפס העליון מילה אחת, לא השם המלאהפס הוא חלק מהפולד: "עיצוב", "קידום", "נגישות", ולא "עיצוב אתרים עם AI" שמונה פעמים. השם המלא נשאר בכותרת הראשית וברשימה הנפתחת של פירורי הלחם. ההיררכיה בפס עצמו: המקום (האבא) ראשון, גדול ומודגש ועם אייקון, ואחריו המילים הקצרות. נגישות: המילים באפור נמדדו 6.5:1 על הרקע של הפס (המינימום 4.5:1), הנוכחי והאבא כמעט שחורים. הפס משותף לאבא ולילדים (28.10): גם בדף אתרי AI הוא במקום פס השירותים, והמעבר לשירותים האחרים עובר לתפריט ולפירורי הלחם.UkSiblingNav: lead לאבא, שדה tab קצר בנתונים
1.7פולד לפי רמה: דף ראשי מול דף עלהדף ראשי של ענף (TripAdvisor: "Jerusalem, Israel") פותח בסליידר תמונות רחב עם חצים ומונה תמונות, ומתחתיו כותרת גדולה מיושרת להתחלה ומבוא: נראה כמו עמוד של מקום, "ראשי" יותר. דף עלה (TripAdvisor: "Top 15 Things to Do in Banff") מפוצל: מצד אחד כותרת, שורה וכפתור, ומצד שני תמונה. Coursera באותו היגיון (ברפרנסים): דף האבא ("Data Analyst") מפוצל עם דמות חתוכה ובלי כפתור, כי הוא מוביל לילדים; דף הבן ("Generative AI Data Analyst") עם שני כפתורים וכרטיס עובדות. אף אחד מהם לא ממורכז. כל דף יכול להיות דף הכניסה מגוגל, ולכן כל רמה נושאת פולד שלם משלה: המנגנון זהה, רק הצורה מתחלפת לפי הרמה. בענף הניסוי הילדים כבר מפוצלים, עם תמונה שנמשכת לקצה (uk-expand-to-edge עם padding).אבא: האריחים של הילדים ראשונים (website-building, ענף ה-SEO). עלה: ראש מפוצל, ‏[area]/page.tsx
1.8מה ענף חולק, ומה חופשידפי ענף חולקים את הפס העליון, את פירורי הלחם ואת השאלות הנפוצות, וזה מה שהופך אותם לענף. הגוף של כל ילד חופשי: התבנית הקלה מעל קובץ הנתונים, או דף סינגל עשיר שנבנה ביד (כמו עיצוב אתרים). עם AI דף עשיר זול, ולכן יש גמישות (28.10).BranchNav (data/branches.ts), UkBreadcrumb, UkAccordion
1.9קטגוריות כאריחי תמונה (Walmart, באג, KSP)עוד דרך להציג קטגוריות, ויזואלית מאוד: במקום רשימת קישורים או טאבים, הילדים מוצגים בדף כשורת אריחים (או סליידר): תמונה על רקע אפור בהיר ושם קצר מתחת. היתרון: נקי מאוד לעין, גם עם הרבה קטגוריות. העיקרון: בכל תמונה אלמנט אחד בודד (מוצר, חפץ, אייקון), חתוך על רקע שקוף, בלי סצנה ובלי טקסט. הרקע של האריח בא מהעיצוב (אפור בהיר, צבע המותג, כל צבע), ולכן כל האריחים נראים כסדרה אחת. נפוץ גם ב-KSP. מעליהם אפשר שורת גלולות עם אייקון קטן לכל אחת.UkCategoryTiles (גריד או סליידר, גדול או קטן), דוגמה חיה למטה
1.10דף ישות שהתוכן שלו הוא גריד של הקטגוריות שלה, עם בורר במקום פירורי לחם (Legal500: משרד עורכי דין, "Spain")דרך טובה למלא דף ישות בתוכן אמיתי בלי לכתוב אותו: הדף של משרד מציג כרטיס לכל תחום שהוא מדורג בו (תחום, דירוג), ובורר אחד בראש (דרופדאון של מדינה) מחליף את כל הגריד. הבורר עושה את מה שפירורי לחם ותפריט צד עושים, בפחות מקום: הוא אומר איפה אתה בציר ומעביר לערך אחר שלו. לצידו תפריט צד קצר של חלקי הדף (דירוגים, אודות, צוות, צור קשר). אצלנו: דף עורך דין או משרד בדמו, כרטיס לכל תחום עיסוק, ובורר של עיר או ענף (29.10).לא עכשיו: מתאים לדמו של עורך דין, לא לאתר הסטודיו
1.11הילדים כרשימה או כגרידדף אבא הוא מבוא שמוביל לילדים שלו.LinkRows (בסטודיו, לקדם לארסנל), UkToggleList
1.12עץ הנתונים: אבא, ילד, נכד, ומי אח של מיהמנוע: כל הקישורים בדף נגזרים ממנו, ודף חדש הוא שורה בעץ. בנוי (29-30.10): הענפים והילדים שלהם, ומהם נבנים פירורי הלחם, פס האחים, האריחים, שורת השירותים, הפוטר, התפריט, החיפוש ומפת האתר.data/branches.ts (BRANCHES, branchEntities, branchOf)
1.13פריט אחד, הרבה רשימות (הטכניקה של TripAdvisor)פריט מחובר למקום אחד בעץ, וכל דף מעליו מציג אותו ברשימה שלו (מוזיאון בדנבר מופיע גם בקולורדו וגם בארצות הברית). קטגוריה היא תגית שמסננת את אותה רשימה בגלולות. השייכות עולה במעלה העץ: המצפה התת ימי מחובר לאילת, ולכן הוא גם ברשימה של ישראל, בלי שורה נוספת. כך יש דף "ישראל" ודף "אילת" מאותו תוכן, וזו טכניקת הקידום שמאחורי הקלעים. מקום כפול קטגוריה יכול להיות דף מלא, מתוכן שכבר קיים. הגבול הוא החלטה, לא חוק (גם TripAdvisor עצר: אין "קולורדו, מוזיאונים"): דף רק כשיש מספיק פריטים וגם נפח חיפוש. אחרת הפריט מופיע ברשימת האבא, מסונן בגלולה.בגרסה שלנו: דף מופיע ברשימת הענף שלו ובכל דף תגית שהוא נושא ("עמודים בנושא"). הגלגול כלפי מעלה (אילת → ישראל) לא נדרש ב-14 דפים
1.14"יעניין אותך גם": אחים ובני דודיםכל דף מוביל לעוד דפים, ואין דף ללא יציאה. בנוי: האחים הבאים באותו ענף, מסביב לסוף, ואחריהם דפים מענפים אחרים, כך שגם ענף קטן ממלא שלושה כרטיסים.entityNeighbours ב-data/branches.ts, בתחתית services/[area]
1.15רשת קישורים בטאבים (כמו GetYourGuide)בלוק בתחתית הדף, מעל הפוטר: שורת טאבים ("אטרקציות מובילות", "יעדים", "מדינות", "קטגוריות"), וכל טאב פותח גריד של 20 עד 30 קישורים לדפים באתר. עשרות קישורים פנימיים במקום קטן, ורק טאב אחד גלוי בכל רגע. אצלנו: טאבים כמו "שירותים", "תחומים", "טכנולוגיה", וגריד קישורים מתחת לכל אחדלא עכשיו: אין מספיק צירים לטאבים
1.16צירים של אותו היצע (הפוטר של Meta for Business, ברפרנסים למטה)אותו היצע נחתך לפי מה שהגולש מחפש: המוצר, הכלים, המטרה ("להביא לידים"), סוג העסק (עסק קטן, סוכנות) והתעשייה. כל ציר הוא רשימה, וכל פריט בו דף. אצלנו כבר יש תחומים (/build-website) וסוגי אתרים (/types). חסר ציר "מה כואב לך": נמדד ב-28.10, ויש נפח רק לשיפור מהירות אתר (210), תחזוקת אתר (140, ועוד 70 לוורדפרס) ושדרוג אתר (30). חידוש אתר, מעבר מוורדפרס ומעבר מוויקס בלי נפח.תחומים וסוגים קיימים; שני הכאבים עם נפח, מהירות ותחזוקה, הם דפים בעץ (30.10). שדרוג אתר (30) לא שווה דף
1.17דפי השוואה: X מול Y (Webflow: 23 ב-/vs, ‏Wix: 14 ב-/compare, ‏Lovable: bolt-vs-lovable)מי שמשווה בין שתי אפשרויות כבר קרוב להחלטה. כל אחד משלושת בוני האתרים מחזיק דף לכל מתחרה. אצלנו: "Webflow או Wix", "אתר בקוד או בפלטפורמה". נמדד לפני שנבנה.סוג תוכן ולא מבנה: רלוונטי לאתר שמוכר מוצר מול מתחרים (בוני האתרים), לא לכל אתר. רעיון לתוכן לקידום, כשיהיה לו נפח
1.18עמודת קישורים בפוטרעוד קישור פנימי לכל ענף, מכל עמוד באתר.הפוטר קורא מקובץ הנתונים

#cp-load

2. עומס: הרבה תוכן, בלי שהדף ייראה כבד

#הטכניקהמה היא עושה לדףבארסנל
2.1כותרת רשימה עם שנה ומספר תוצאות (Viator: "All USA Tours & Excursions in 2026", "1,000+ results")השנה בכותרת אומרת שהרשימה עדכנית, והמספר אומר כמה יש בה. שניהם נגזרים לבד: השנה מהתאריך, המספר מהעץ. אותו מנגנון של TripAdvisor, וגם Coursera עובדים כך.לא עכשיו: רשימות של 8 פריטים, לא של 1,000
2.2מבוא עם "קרא עוד"הרבה טקסט בדף בלי שהדף ייראה כבד.UkReadMore
2.3שורת פרטים עם מפרידיםאצל Coursera זה כרטיס עובדות שעולה על תחתית הראש (מספר קורסים, דירוג, רמה, זמן; ברפרנסים). עובדות קצרות ליד הכותרת (משך, מחיר, מיקום) במבט אחד.לא עכשיו: לשירות אין עובדות של משך ומחיר
2.4שורות סליידר של פריטים ("יעדים מובילים"), עם או בלי "הצג הכל"הרבה פריטים בשורה אחת, ושורה לכל קבוצה: הדף נראה מלא בלי להיות ארוך. "הצג הכל" מוביל לדף הרשימה המלא.ClassicGrid, עם moreSlide ל"הצג עוד"
2.5תפריט סקשנים שעוקב אחרי הגלילהבדף ארוך, קפיצה ישירה לחלק.SwiperSubMenu
2.6יותר מדי אחים לרוחב: "עוד ⌄" (GitHub, Google)עץ שגדל מוסיף אחים, ופס הטאבים נגמר לפני שהם נגמרים. בפס מוצגות רק הלשוניות שנכנסות, והשאר נכנסות לכפתור "עוד" בסוף השורה. כשהדף הנוכחי בתוך "עוד", הכפתור מקבל את השם שלו, כך שהפס תמיד אומר איפה אתה. החישוב רץ מחדש בכל שינוי רוחב. עד 30.10 הפס נגלל הצידה עם דהייה, ו-13 תחומים ב-1160 פיקסלים נחתכו, כי לעכבר אין גלילה הצידה. בטלפון הפס כולו הוא כפתור אחד עם רשימה.UkSiblingNav (moreLabel), בכל פס אחים בלי הגדרה
2.7נתיב ארוך בפירורי לחם: "…" בטלפוןעץ עמוק עושה נתיב של חמש רמות, וזה לא נכנס בשורה של טלפון. מ-4 פירורים, הפירורים שבאמצע מתקפלים ל-"…" ונשארים הבית, האבא והדף. לחיצה על "…" פותחת את הנתיב המלא, בלי JS. בדסקטופ הנתיב המלא תמיד מוצג. כל הפירורים נשארים ב-HTML, כך שהסכמה שומרת את הנתיב כולו (30.10).UkBreadcrumb (collapseFrom, ברירת מחדל 4)
2.8שאלות נפוצותעוד תוכן אמיתי שעונה על חיפושים.UkAccordion, ו-faq-data.ts
2.9מספור ליד כל קישור ("1320 סיורים ופעילויות")תחושת נפח: כל קישור מראה כמה יש מאחוריו. אצלנו נספר לבד מהעץ, כמה ילדים חיים יש לכל דף (30.10: "בניית אתרים (8)" באריחים של /services).UkCategoryTiles, השדה count
2.10רשימת קישורים ממוספרת תחת נושא (Klook: "Explore more")בתחתית דף עשיר, כמה כותרות ותחת כל אחת קישורים קטנים עם מספר: אטרקציות בעיר, כל מה שצריך לביקור, יעדים באזור (אחים, צירים, והאחים של האבא). עיצוב קומפקטי לקישורים נלווים מאפשר לשים מתחת לתוכן עשרות קישורים פנימיים, בלי שהדף ייראה כבד. המספר הוא דירוג.בגרסה שלנו: הפוטר הפתוח, כל הדפים בעמודות (30.10). בלי המספר
2.11תגיות: ציר שחוצה את העץקטגוריה היא מקום אחד בעץ (אבא וילדים). תגית חוצה אותו: כמה דפים מענפים שונים נושאים אותה, ולה דף משלה שמרכז אותם. אלה שתי הדרכים המרכזיות לארגן תוכן. בנוי (29-30.10): ‏/tags ועשר תגיות. לכל תגית רמה, ‏primary (דף מלא בתבנית של Lovable, בפוטר ובתפריט) או secondary (מה זה, האתר הרשמי, קישורים). ‏parent מושיב אותה תחת שירות (PageSpeed תחת שיפור מהירות), והדרופדאון בפירור האחרון מציג רק אחים מאותו מקום. מקבילה גדולה: ‏8,761 דפי התגית של Webflow.AI_TAGS ב-data/ai-areas-data.ts (level, parent), ‏tags/[tag]/page.tsx
2.12טופס בסוף הדףכל דף הוא גם נקודת יציאה לליד.טופס הצור קשר, עם trackLead

#cp-order

סדר לדוגמה, מלמעלה למטה

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

דוגמה לדף שירות, לא סדר חובה: כל דף לוקח את החלקים שמתאימים לו, ובסדר שמתאים לו.

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

#cp-not-duplicate

למה זה לא שכפול דפים

גוגל מעניש דפים בכמות שאין בהם ערך (Scaled content abuse): אותו דף עם מילה אחרת, בשביל החיפוש בלבד. תבנית חוזרת היא לא הבעיה, ולכן Duda מחזיקים 134 דפי מקצוע ו-Squarespace ‏60 נכדים. מה שהופך דף מתבנית לדף אמיתי, ומה ש-FLOOD בונה לתוך כל דף:

  1. חיפוש אחר לכל דף. מילה עם נפח, שאין לה דף אחר באתר. שני דפים על אותו חיפוש הם הקניבליזציה, לא התבנית.
  2. מקום משלו בעץ. אבא, אחים וילדים משלו, בפירורי הלחם, בפס האחים ובפוטר. דף שמחובר לעץ הוא חלק מאתר, לא דף שנשפך מבחוץ.
  3. תוכן שמגיע מהנתונים של הדף. הדמואים של התחום, התגיות שלו, השאלות שלו. אצל Duda זה התבנית המוכנה של המקצוע, אצל Webflow התבניות של הקטגוריה.
  4. כותרת, title ותיאור משלו. נבנים מה-H1, ולא מועתקים מדף אחר (check:seo בודק שאין כפולים).
  5. דרך לפעולה. פס ליד וטופס: הדף משרת את מי שהגיע, לא רק את גוגל.

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

#cp-trees

העצים של בוני האתרים

נספר ממפות האתר שלהם ב-30.10, אנגלית בלבד. רוב העץ הוא קטלוג שמתמלא לבד (תבניות, אתרים של משתמשים, אפליקציות). המספר שלו לא מעניין: 30 תבניות או 23 אלף, זה אותו collection list שמרנדר דף לכל פריט. מה שמעניין הוא הצירים: באילו דרכים חותכים את אותו מלאי. החלק של FLOOD, דף לכל סוג אתר, לכל קהל ולכל מתחרה, הוא עשרות עד מאות דפים. שני דפוסים חוזרים אצל כולם: דף לכל תחום עיסוק (Duda ‏136, ‏Squarespace ‏70 בשתי רמות, ‏Base44) ודפי השוואה למתחרים (Squarespace ‏24, ‏Webflow ‏23, ‏Framer ‏19, ‏Wix ‏14). אצלנו המקבילות: הדמואים הם הקטלוג, ‏/build-website הוא הדפים לפי תחום, וההשוואות חסרות. ל-Bolt אין עץ בכלל: שני דפים במפת האתר.

האתרדפיםרוב העץהחלק של FLOOD
Webflow124,600אתרים של משתמשים 95,110 · פרופילים של משתמשים 14,257 · דפי תגית של האתרים 8,761 (webflow-localization, web3js…) · תבניות 2,809 · בלוג 1,572 · אפליקציות 345אבא ‏/list → ‏750 ילדים, אחד לכל סוג אתר (about-us, accountant, agency…) · ‏/vs ‏23 השוואות · ‏/solutions ‏17 לפי קהל · דוגמה · מפת האתר
Wix10,724תבניות 3,400 · בלוג 1,854 · חנות אפליקציות 1,852 · ‏Studio ‏953 · דוגמאות של אתרים 438 · דומיינים 330דף לכל סוג בונה (website-builder, ai-website-builder, landing-page-builder, portfolio-website, restaurant/website…) · ‏/compare/hub ‏14 השוואות · מפת האתר
Squarespace6,365הצעות של שותפים (/offers) 4,044 · כתבות עליהם 1,052 · בלוג 869אבא ‏/solutions → ‏10 ילדים (beauty…) → ‏60 נכדים (makeup-artists, barbershops…) · ‏/compare ‏24 השוואות · דוגמה · מפת האתר
Framer3,305תיעוד למפתחים 1,910 · מילון מונחים 566 · מרכז עזרה 300 · אקדמיה 171‏/solutions ‏27 · ‏/compare ‏19 השוואות · מפת האתר
Base441,450תבניות 1,129 · בלוג 174אבא ‏/website-builder → ילד business-site → נכדים לכל תחום (roofing, fitness, restaurant, law-firm…) · ‏/use-cases ‏82 לפי קטגוריה · דוגמה · מפת האתר
Jimdo390בלוג 338. הבית שלהם בגרמנית: 2,981 דפים בכל השפותאבא ‏/website → ‏29 ילדים (wedding, restaurant, medical, coaching, real-estate, photography…). בלי השוואות. שחקן קטן: סוגי אתרים ובלוג, וזהו · דוגמה · מפת האתר
Duda982עדכוני מוצר 628 · וובינרים 173אבא ‏/website-builder → ‏134 ילדים, אחד לכל מקצוע (accounting, carpenter, dentist…), בלי נכדים: בדיוק ‏/build-website שלנו · דוגמה · מפת האתר
Lovable1,310מדריכים 294 · תבניות 251 · בלוג 174 · סרטונים של יוצרים ביוטיוב 182 · משרות 80‏/build: ‏15 דפים של "X builder" · דף לכל קהל (small-business, healthcare, agencies, marketers) · השוואות (bolt-vs-lovable) · מפת האתר

#cp-field-ideas-head

רעיונות לתחומים

כל התחומים שבוני האתרים בנו להם דף, כמאגר לרעיונות ל-/build-website. תחום נכנס אצלנו רק אחרי מדידת נפח בעברית.

דף לדוגמה: dentist

3d-printing-services · accounting · adventure-sports-equipment · adventure-tourism · alpaca-farm · antique-appraiser · antique-restoration · aquaponics-farm · architect · aromatherapy-products · art-gallery · art-therapy-services · automation · bagel-shop · bakery · ballroom-dance-lessons · bicycle-repair · bicycle-tours · bird-watching-tours · board-game-café · bookstore · brewery · carpenter · catering-service · childcare-service · chiropractic · church · cleaning-service · coffee-shop · consignment-store · construction-company · consulting · contractor · custom-furniture-design · dance-studio · daycare-center · dentist · diy-simple-editor · drone-photography · eco-friendly-products · electrician · escape-room-business · event-planning · exterminator · farmers-market · fitness-studio · florist · food-truck · glassblowing-studio · graphic-design-studio · green-energy-consultancy · hair · handmade-crafts-store · health-food-store · helicopter-tours · home-builder · home-staging-service · hvac · hydroponics-farm · indoor-playground · insurance · interior-design-consultancy · it-services · jewelry-store · knife-sharpening-service · landscaping · language-school · law-firm · life-coaching · local-craft-brewery · massage-therapy · mobile-app-development · mushroom-farming · music-school · non-profit-organization · online-retail-store · online-tutoring · organic-skincare-products · personal-training · personalization · pet-grooming · photography-studio · plastic-surgery · pottery-studio · pressure-washing · printing-shop · private-tutoring · property-management · real-estate · recording-studio · recycling-service · renewable-energy-solutions · restaurant · reviews · roofing · rv-park · salsa-dancing-classes · second-hand-store · security · skateboard-shop · smart-home-installation · social-media-management · software-development · spa · sports-equipment-store · sustainable-fashion · tailoring · tattoo-studio · taxidermy-service · tea-shop · tech-startup · thrift-shop · tourism · toy-store · tradie · translation-services · travel · tree-service · trucking · urban-farming · veterinary · video-production · vineyard · virtual-assistant-services · virtual-reality-arcade · voiceover-services · water-sports-equipment-rental · web-design-agency · wedding-planning · white-label · wildlife-photography-tours · woodworking-shop · yoga-studio · youth-mentoring-program

דף לדוגמה: beauty / makeup-artists

  • beauty: hair-salons · jewelry-makers · makeup-artists · tattoos-piercings · nail-studios · barbershops
  • professional-services: real-estate-agents · tech-it-services · marketing-agencies · legal-services · professional-coaches · consultants
  • sports: sports-coaches · sporting-goods · fitness-centers · sports-camps · personal-trainers · yoga-studios
  • personal: podcasts · creators · freelancers · weddings · portfolios · resumes-cvs
  • home-services: home-decor · landscapers · cleaning-services · pet-care · auto-repair · contractors
  • health: massage-therapists · acupuncturists · wellness-retreats · recovery-centers · nutritionists · medspas
  • events: restaurants-bars · concerts-shows · festivals · activities · camps · travel-agencies
  • education: vocational-training · language-schools · dance-schools · art-instruction · music-teachers · exam-prep-tutors
  • creative-services: fashion-apparel · interior-designers · architects · artists · graphic-designers · photographers
  • nonprofits: youth-education · arts-culture · environment-conservation · community-groups · philanthropy-advocacy · faith-communities

דף לדוגמה: restaurant

architects · artist · business · coaching · coupon · domain · fitness · free · freelance · hair-beauty · how-to-blog · how-to-create · lifestyle-blog · local-business · medical · music · online-store · personal-hobby · photography · portfolio · real-estate · restaurant · resume · teacher · travel-blog · vacation-rental · website-builder · wedding · writers-authors

#cp-atlassian-head

Case study: ‏Atlassian, מרכזי ידע סביב המוצר

לא בונה אתרים, אותה שיטה. ‏6,365 דפים באנגלית (‏מפת האתר). חוץ מהבלוג, רוב העץ הוא לא המוצר אלא התחום שלו: מה זה Agile, איך מנהלים פרויקט, איך עובדים עם Git. מי שמחפש את השאלה מגיע ל-Atlassian, ומשם ל-Jira.

אבא, ילד, נכד לכל נושא. ‏/agile הוא אבא, agile-at-scale ילד, lean-portfolio-management נכד. כל נושא הוא עץ שלם, לא מאמר אחד.

צירדפיםאיך נוצר
מרכזי ידע לפי נושא: ‏/agile, ‏/work-management, ‏/itsm, ‏/devops~600אבא לכל נושא → ילדים → נכדים. ‏/agile → agile-at-scale → lean-portfolio-management · דוגמה
מדריכים טכניים: ‏/git, ‏/data191שאלה אחת, דף אחד ("איך יוצרים משתמש ב-psql") · דוגמה
תבניות של המוצרים (Confluence, ‏Jira)294דף לכל תבנית · דוגמה
פלייבוק לצוותים (/team-playbook)88דף לכל תרגיל · דוגמה
השוואות (Jira מול Asana, ‏ClickUp, ‏GitHub…)11כתוב ביד · דוגמה
בלוג3,280כתוב ביד, לאורך שנים · דוגמה

מה לוקחים: המדריך לבניית אתר (‏/guides/build-a-website, ‏27 דפים) הוא ה-/agile שלנו: מרכז ידע על התחום, שמוביל לשירות. אצל Atlassian כל פרק הוא אבא עם ילדים ונכדים. היום אין לו כמעט כניסות, אז הוא לא בעדיפות, אבל זו הצורה שהוא יכול לגדול אליה.

#cp-webflow-head

Case study: ‏Webflow, ‏124,600 דפים שהמשתמשים ממלאים

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

הקטלוג חתוך בכל ציר אפשרי. אותן 1,178 תבניות מופיעות בעץ של אבא, ילד ונכד (קטגוריה, תת-קטגוריה), בדפי חיפוש (1,424, דף לכל מילה), וברשימות "8 התבניות הטובות לרואה חשבון" (750). שלושה צירים על אותו מלאי, וכל ציר תופס חיפושים אחרים.

תוצאת חיפוש שהפכה לדף. ‏/templates/search/3d-portfolio-template: חיפוש שמישהו עשה באתר הפך לדף עם כתובת קבועה. זה הדפוס הכי אגרסיבי פה.

החלק שנכתב ביד קטן: ‏18 פיצ׳רים, ‏23 השוואות, ‏17 פתרונות לפי קהל.

צירדפיםאיך נוצר
אתרים שמשתמשים פרסמו (Made in Webflow)95,110המשתמשים: כל אתר שמפורסם בקהילה הוא דף · דוגמה
פרופילים של משתמשים14,257המשתמשים: דף לכל מעצב או סוכנות · דוגמה
דפי תגית של האתרים8,761המשתמשים: כל תגית שמשתמש שם הופכת לדף שמרכז את האתרים שלה · דוגמה
תבניות: אבא ‏/templates → ‏28 ילדים (קטגוריה) → ‏108 נכדים (תת-קטגוריה) → ‏1,178 תבניות1,314עץ בשלוש רמות מעל הקטלוג · דוגמה
דפי חיפוש בתבניות (/templates/search)1,424דף לכל מילת חיפוש (3d, a-b-testing…): תוצאת חיפוש שהפכה לדף · דוגמה
"8 התבניות הטובות ל-X" (/list)750אבא ‏/list → ‏750 ילדים, אחד לכל סוג אתר: רשימה שנבנית מהקטלוג · דוגמה
אפליקציות ואינטגרציות528דף לכל חיבור · דוגמה
פיצ׳רים (/feature)18כתוב ביד: דף לכל פיצ׳ר (cms, seo, hosting, localize…) · דוגמה
השוואות (/vs)23כתוב ביד: מול Wix, ‏WordPress, ‏Framer, ‏Vercel… · דוגמה
רשימת נגישות (/accessibility/checklist)39דף לכל משימה ברשימה · דוגמה

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

#cp-squarespace-head

Case study: ‏Squarespace, עץ של 10 × 6

העץ הכי מסודר מכולם: אבא, ילד, נכד. האבא הוא ‏/solutions, הילדים עשר קטגוריות (יופי, שירותים מקצועיים, ספורט, בריאות, חינוך, אירועים, שירותים לבית, יצירה, אישי, עמותות), והנכדים שישה תחומים תחת כל ילד. ‏70 דפים בשלוש רמות, ולא 134 ילדים שטוחים תחת אבא אחד כמו Duda. זה ה-TripAdvisor של בוני האתרים: ישראל ואז אילת.

אותו תחום בשני צירים. מאפרת מופיעה גם ב-/solutions (למה אתר) וגם ב-/website-templates (התבניות). הדף מסביר, אוסף התבניות מוכיח. אצלנו: ‏/build-website והדמואים בתחום.

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

וגם זבל. ‏4,044 מתוך 6,365 הדפים הם קודי קופון, ועוד 1,052 כתבות עליהם. החלק שעובד הוא בערך 200 דפים.

צירדפיםאיך נוצר
תחום, בשתי רמות (/solutions): 10 קטגוריות, 6 תחומים בכל אחת70אבא ‏/solutions, ילד לכל קטגוריה (beauty), נכד לכל תחום (makeup-artists) · דוגמה
תבניות לפי תחום (/website-templates)68אותם תחומים בציר שני: האוסף של התבניות שלהם · דוגמה
השוואות (/compare)24דף לכל מתחרה, כולל Lovable ו-Figma Sites · דוגמה
כלים חינמיים (/tools)15מחולל שמות לכל סוג עסק (מסעדה, נדל״ן, ניקיון): כלי קטן שמביא חיפוש · דוגמה
קודי הנחה של שותפים (/offers)4,044דף לכל קוד קופון: מספר גדול, ערך אפס · דוגמה

מה לוקחים: כשהתחומים רבים, מוסיפים רמה: ילד לכל קטגוריה, והתחומים נכדים שלו. ב-/build-website יש היום אבא ו-12 ילדים, וזה מספיק. ב-30 תחומים זה העץ: אבא ‏/build-website, ילדים כמו בריאות, יופי ומקצועות חופשיים, והתחומים נכדים. ומחולל קטן, כמו "שם לעסק", הוא רעיון זול לדף שמביא חיפוש.

#cp-duda-head

Case study: ‏Duda, ‏134 תחומים מתבנית אחת

תבנית אחת, 134 דפים. ‏דף רופאי השיניים הוא תבנית שמשבצת את שם המקצוע. רואים את זה בכותרת, "dentist Website Design" באות קטנה: השם נכנס מהנתונים כמו שהוא. בערך שלושה רבעים מהמלל זהים בכל הדפים (היתרונות שלהם, המלצה, שלבים כלליים), ורבע ספציפי: פתיחה, אילו עמודים צריך, איך מעצבים למקצוע (כחול ולבן, מטופלים וצוות), וארבע שאלות.

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

כל דף מוביל לתבנית מוכנה. ‏"Preview Template" פותח אתר לדוגמה של המקצוע: הדף מסביר, הדמו מוכיח. אצלנו זה /build-website והדמואים.

הם כותבים לסוכנות, לא לבעל העסק ("Be the go-to expert for dentist clients"). אצלנו הפוך, וזה מתאים לסטודיו: הדף מדבר עם בעל העסק.

צירדפיםאיך נוצר
מקצוע הלקוח (/website-builder)134תבנית אחת, שם המקצוע מהנתונים · דוגמה
ענף, לפלטפורמות שמוכרות אתרים (/vsaas): מלונאות, נדל"ן, מוסכים7כתוב ביד · דוגמה
מי בונה (/solutions): סוכנויות, פלטפורמות, חברות אחסון, קופות5כתוב ביד · דוגמה
השוואות (/compare): מול Webflow, ‏Lovable, ‏WordPress3כתוב ביד · דוגמה
עדכוני מוצר ווובינרים801נוצר מהעבודה עצמה: כל פיצ׳ר וכל הרצאה · דוגמה

מה לוקחים: ציר שחוזר על עצמו (מקצוע, עיר) הוא תבנית ונתונים, ויכול להגיע למאות. ציר של קהל או השוואה נכתב ביד, ונשאר קטן. ‏/build-website כבר עובד בשיטה שלהם, ‏12 תחומים על תבנית אחת. מה שמגביל אותנו הוא נפח החיפוש בעברית, לא העבודה. היתרון שלנו: דמו אמיתי ומלל שנכתב לבעל העסק, ולא שם בתוך תבנית.

#cp-tiles

דוגמה חיה: קטגוריות כאריחי תמונה

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

גדול, בסליידר (חלק מהאריח הבא מוסתר)

גדול, בגריד

קטן (כמו שורת הקטגוריות של וולמארט מעל רשימה)

#cp-refs

רפרנסים מהאתרים הגדולים

TripAdvisor: האבא של אילת ("Israel")
TripAdvisor: האבא של אילת ("Israel"). אותו מבנה בדיוק כמו אילת: פס טאבים שהטאב הראשון בו הוא המקום, פירורי לחם, סליידר וכותרת. ההבדל הוא רק כמה הדף נראה ראשי: פירורי הלחם קצרים יותר (שתי רמות), אין פס אזהרה מעל, והכותרת היא שם המדינה לבד. האבא והבן הם אותה תבנית.
TripAdvisor: דף ראשי של מקום ("Eilat, Israel")
TripAdvisor: דף ראשי של מקום ("Eilat, Israel"). פס טאבים שמתחלף לפי המקום: הטאב הראשון הוא אילת, עם אייקון ומודגש, ואחריו Things to Do, Hotels, Restaurants. מתחת פירורי לחם בארבע רמות (Middle East, Israel, Southern District, Eilat) עם רשימה נפתחת של האחים, ואז סליידר תמונות לכל הרוחב והכותרת. כך נראה דף ראשי של ענף: התמונה קודם.
TripAdvisor: דף עלה (סיור בירושלים)
TripAdvisor: דף עלה (סיור בירושלים). הרמה הכי נמוכה. הפס העליון עדיין של המקום (Jerusalem), והטאב Things to Do מסומן כנוכחי. פירורי לחם בשש רמות, וקישור חזרה לרשימה ("See all Things to Do in Jerusalem"). הכותרת והדירוג באים לפני התמונות, ובמקום סליידר לכל הרוחב יש גלריה: תמונה גדולה ושתיים לידה. דף עלה נראה כמו פריט, לא כמו דף ראשי.
Walmart: הרבה קטגוריות בשתי שכבות
Walmart: הרבה קטגוריות בשתי שכבות. למעלה שורת כפתורי גלולה, לכל אחד אייקון קטן משלו. הראשונים (Departments, Services) מודגשים ונפתחים לרשימה המלאה, והשאר קיצורים לקטגוריות הכי חשובות. מתחת, בתוך הדף, הילדים של הקטגוריה הנוכחית כאריחים: תמונה גדולה על רקע אפור בהיר ושם קצר מתחת. כך מציגים הרבה ילדים בלי לדחוס אותם לפס טאבים. העיקרון: בכל תמונה אלמנט אחד בודד, חתוך על רקע שקוף, והרקע בא מהאריח. לכן השורה נקייה לעין.
Walmart: האלמנט יוצא מהאריח
Walmart: האלמנט יוצא מהאריח. התלת מימד: המוצר גבוה מהאריח ויוצא מעל הקצה העליון שלו (השקית, שק האוכל לכלבים), והאריח עצמו קטן עם הרבה אוויר בין אחד לשני. כותרת קצרה מעל השורה ("Your weekly essentials").
Sears: כותרת קטנה מעל האריחים
Sears: כותרת קטנה מעל האריחים. מעל שורת האריחים כותרת קטנה ("Clothing"), בגודל של תווית ולא של כותרת ראשית. השורה עצמה היא העיקר, והכותרת רק אומרת מה יש בה. כמו "Your weekly essentials" של Walmart. הכותרת הראשית של הדף יורדת למטה.
באג: אותו עיקרון, בסליידר
באג: אותו עיקרון, בסליידר. אריח אפור לכל קטגוריה, שם הקטגוריה למעלה, מוצר אחד חתוך על רקע שקוף באמצע וכפתור "מוצרים נוספים" למטה. הסליידר מכניס הרבה קטגוריות לשורה אחת. גם כאן התמונה היא אלמנט בודד, והרקע בא מהאריח.
Meta for Business: הפוטר
Meta for Business: הפוטר. אותו היצע בשבעה צירים: טכנולוגיות, כלים, מטרות, סוגי עסקים, תעשיות, השראה והדרכה. כל שורה היא דף.
Viator: פירורי לחם בשבע רמות
Viator: פירורי לחם בשבע רמות. יבשת, מדינה, אזור, מחוז, עיר, דברים לעשות בעיר, סיורים בעיר. כל רמה היא רשימה של אותם פריטים.
Coursera: דף אבא ("Data Analyst")
Coursera: דף אבא ("Data Analyst"). מפוצל: מצד אחד כותרת, שורה מודגשת שאומרת למי זה מתאים, פסקה ושורת "Skills you'll need" עם רשימת נושאים. מצד שני דמות חתוכה על צורה בצבע. אין כפתור: הדף מוביל לילדים שלו.
Coursera: דף בן ("Generative AI Data Analyst")
Coursera: דף בן ("Generative AI Data Analyst"). כותרת, שורה מובילה ושני כפתורים על רקע צבעוני, ומתחת כרטיס עובדות שעולה על תחתית הראש: מספר קורסים, דירוג וכמות ביקורות, רמה וזמן. שורת הפרטים כרכיב.