אתגר הוספת האתר לאינדקס של גוגל
כשבנינו את אתר המשפחה שלנו, רצינו לאפשר הצצה קטנה גם למי שמחוץ למשפחה — קצת מידע כללי (שיתווסף בהמשך), בלוג שיספר מה קורה אצלנו וקישורים מועילים נוספים. כדי שיגיעו אלינו גם אנשים מחוץ לחברי האתר, היה חשוב להוסיף את האתר למנועי חיפוש (בעיקר גוגל).
זה נשמע פשוט, אבל הדרך לגרום לגוגל למצוא את האתר כללה כמה אתגרים מעניינים.
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 Çevirileri
Merhaba,
Bugün gönderilere otomatik çeviriler ekledim. Bir gönderi bir dilde gerektiğinde, arka uç hedef dile GPT çeviri isteği gönderiyor.
Bunu yapmak için çevrimiçi kredi edinmeniz gerekiyor:
https://platform.openai.com/settings/organization/billing/overview
Aynı zamanda yeni bir API anahtarı oluşturmalısınız.
Yaptığım sistem - otomatik çeviri yapar ve çeviriyi depolama alanına kaydeder. Bu şekilde şunlardan yararlanıyoruz:
- çeviri sadece bir kez - AI kaynaklarını tasarruflu kullanma.
- yazar, düzenleme yapabilir ve dil ayarlamaları yapabilir.
Bu platformun birçok dile genişleyeceğini hayal ederek talep üzerine çeviri yapmayı seçtim ve kullanıcılar belirli gönderileri yalnızca birkaç dilde okuyabilir.
Yaakov
İlerleme Dün
Merhaba,
Halka açık blog ve aile blogu eklendi.
Açık veriler sunucu tarafı aracılığıyla görüntülenir, böylece Google gibi arama motorları tarafından dizine eklenebilir. sitemap.xml dosyası talep üzerine (barındırma motoru tarafından) oluşturulur ve blogların bir listesini döndürür. Her site için bir tane, ardından kişisel (açık) blogların listesi.
Bağlı kullanıcılar için blog, yazarın aile için özel tutmayı seçtiği daha fazla gönderi içerir.
Her üye kendi blogunu başlatabilir. Ek özellikler yolda :)
Yakup.
Blogum burada başlıyor
Merhaba,
Bu siteyi oluşturma deneyimimi sizinle paylaşmak istiyorum.
Şu ana kadar öğrendiklerimi ve süreç devam ettikçe daha fazlasını paylaşacağım.
Yaakov