אתגר הוספת האתר לאינדקס של גוגל
כשבנינו את אתר המשפחה שלנו, רצינו לאפשר הצצה קטנה גם למי שמחוץ למשפחה — קצת מידע כללי (שיתווסף בהמשך), בלוג שיספר מה קורה אצלנו וקישורים מועילים נוספים. כדי שיגיעו אלינו גם אנשים מחוץ לחברי האתר, היה חשוב להוסיף את האתר למנועי חיפוש (בעיקר גוגל).
זה נשמע פשוט, אבל הדרך לגרום לגוגל למצוא את האתר כללה כמה אתגרים מעניינים.
1. מימוש sitemap.xml
כדי שגוגל ידע אילו דפים הוא יכול לקרוא, הוספתי sitemap.xml. זהו קובץ שמספר למנועי חיפוש על הלינקים בתוך האתר.
2. פלט בצד שרת של nextjs
אחד היתרונות הגדולים של Next.js הוא היכולת לייצר תוכן כבר בצד השרת. אתר שנבנה ב-React בלבד שולח לדפדפן כמעט רק קוד JavaScript, והדפדפן הוא זה שמרנדר (מציג) את התוכן בפועל. מנועי חיפוש, לעומת זאת, לא תמיד מריצים את הקוד הזה – ולכן הם “לא רואים” את מה שמופיע על המסך למשתמש.
במימוש נכון של Next.js, כבר מהשליפה הראשונה מהשרת נשלח תוכן HTML מלא של הדף, וכך מנועי החיפוש יכולים לקרוא ולאנדקס אותו כמו כל עמוד סטטי אחר.
בגרסה הראשונה של האתר זה לא קרה: מנגנון התרגום חיכה שקוד ה-JavaScript ירוץ בצד הלקוח כדי לזהות את השפה,
ולכן בצד השרת לא הופק כלל תוכן קריא.
הפתרון היה פשוט אבל קריטי — הגדרת שפת ברירת מחדל, כדי שתמיד ייווצר פלט שרת מלא גם בלי תלות בהרצת הקוד בצד הלקוח.
3. הוספת json-ld
זהו מבנה נתונים שגוגל שואב ממנו מידע לגבי התוכן. למשל בדף הבלוג, האוביקט הזה יכיל את המידע על כל הפוסטים בעמוד. זהו בעצם רכיב מידע שהמבקרים האנושיים לא רואים אותו, אבל מנועי החיפוש מחפשים אותו כדי להבין מה יש בדף.
4. מבנה התוכן
מנועי חיפוש אוהבים שהיש מבנה ברור לדף ברמת ה HTML של הדף. למשל:
- שיהיה H1 יחיד בדף שמספר על התוכן.
- שיש התאמה בין lang בתחילת ה HTML לשפה של הדף.
- כותרות alternate שמפנות לדף בשפות אחרות.
היעד עוד לא הושג, אבל ישנה התקדמות במבנה של האתר, בתקווה שגוגל יכניס אותו לאינדקס בקרוב.
שינוי עיצובי משמעותי
שלום,
האפליקציה במובייל נראתה מגושמת למדי. החלפתי למראה מודרני יותר:
א. האפליקציה נפתחת בדף התמונות המשפחתי ומציגה את התמונות ברצף, עם סימון מי העלאה אותן, ומספר הלייקים.
ב. החלקה לצד מציגה חלקים אחרים של האתר: הבלוג והלוח המשפחתי.
התקדמויות קטנות
1. שיפצרתי את דף הבית מבחינת המצביעים לתכנים
2. הוספתי אווטר לסמל של המשתמש הפעיל.
תכונה של היום - תאריכי אזכרה עבריים
התכונה - לראות את תאריכי האזכרה של המשפחה בלוח השנה בתאריכים עתידיים.
תאריכים עבריים יכולים להיות בחודש גרגוריאני שונה. לכן חיפשתי דרך אלגנטית לבצע מינימום חישובים ולהציג את תאריך הזיכרון בכל שנה כפי שנדרש.
כדי לבצע את המינימום חישובים - השתמש במונח "שנת אופק". שנת האופק היא השנה המקסימלית שבה מישהו הסתכל לעתיד. בכל פעם שהאופק נדחף לעתיד - אנו עוברים על כל האירועים העבריים ומבצעים עבורם את החישוב בתאריך בשנה זו.
למשל: אם אני מסתכל על ספטמבר בשנה הבאה, ואם זו הפעם הראשונה שמישהו מסתכל בלוח שנה של 2026, שנת האופק תשתנה מ-2025 ל-2026 והחישוב יתבצע עבור כל האירועים באתר. החישוב יישמר באוסף ימי ההולדת.
שנת האופק תישמר באוסף "config", שבו לכל אתר יש את שנת האופק שלו.
יעקב
תרגומים באמצעות AI
שלום,
היום הוספתי תרגומים אוטומטיים לפוסטים. כאשר יש צורך בפוסט בשפה מסוימת, המערכת שולחת בקשת תרגום ל-GPT לשפה היעד.
כדי לעשות זאת, עליך לרכוש אשראי באינטרנט:
https://platform.openai.com/settings/organization/billing/overview
וליצור מפתח API חדש באותו אתר.
המערכת שהכנתי - מבצעת את התרגום האוטומטי ושומרת את התרגום על האחסון. כך אנו נהנים מ:
- תרגום רק פעם אחת - חיסכון במשאבי AI.
- המחבר יכול לערוך ולעשות התאמות לשפה.
בחרתי לעשות תרגום לפי דרישה מתוך מחשבה שהפלטפורמה הזו תורחב להרבה שפות, והמשתמשים יוכלו לקרוא פוסטים מסוימים רק בכמה שפות.
יעקב
תכונות אתמול
שלום,
נוסף הבלוג הציבורי ובלוג המשפחה.
הנתונים הציבוריים מוצגים באמצעות צד השרת, כך שניתן לאנדקס אותם על ידי מנועי חיפוש כמו גוגל. קובץ sitemap.xml הוא אמצעי של אתר לעדכן מנועי חיפוש אילו תכנים יש באתר.
במקרה שלנו, הקובץ sitemap.xml נוצר לפי בקשה ומחזיר רשימה של בלוגים. אחד עבור כל האתר, ואז רשימה של הבלוגים האישיים (ציבוריים).
עבור משתמשים שמחוברים, הבלוג מכיל יותר פוסטים, שהמחבר בחר לשמור פרטיים למשפחה.
כל חבר יכול להתחיל את הבלוג שלו. תכונות נוספות בדרך :)
יעקב.
הבלוג שלי מתחיל כאן
שלום,
אני רוצה לשתף אתכם בחוויה של יצירת האתר הזה.
מה שלמדתי עד כה, ואשתף עוד ככל שההליך יימשך.
יעקב