גיא והמטאדאטה ב-Next.js: המדריך הקליל לשדרוג ה-SEO שלך

גיא והמטאדאטה (נו הפעם יש לכם מילה עברית לתועבה הזו?) - סדרת Next.js. 😁 דרגת קושי: 2/10. ⚠☢☣ כפי שהבחנתם Next ממש מנסה לעזור לנו לשפר את הSeo שלנו, כדי שמנועי החיפוש יחבבו את האתר, כדי שנהיה עשירים, כדי שנוכל להצטלם בחופים של קובה מדי פעם, כדי שנוכל להוציא לחברים שלנו את העיניים (איזה אנשים נחמדים אנחנו). 🤔 אחד מהנושאים החשובים בהקשר הזה הוא Metadata. מה זו הקללה הזו? אז בהפשטה קלה: כמו שלכל עוגה מפנקת יש תגית שעליה יש את הרכיבים, הוראות הגשה, מידע לאלרגנים וכו'. ולמרות שהתוית היא לא חלק מהעוגה (וכן, לא אמורים לאכול את זה למי שלא ידע). 🎂 היא חשובה שנדע איך להתייחס ולתקשר עם העוגה - לדוגמא אם יש 3 מדבקות בצורת עיגולים אדומים, יש לנו מנצח! העוגה שלכם טעימה בקיצון! יש עיגול ירוק? טפייייייי על החיים שלכם! יהיה לעוגה טעם של לפת אורגנית. 🥕 גם לאתר שלכם יש תוויות שמספקות מידע חיוני לאיך מנועי החיפוש, המשתמשים והדפדפנים יתייחסו לאתר שלכם. 🚀 מהנפוצים שבהם: 😍 1. כותרת - Title: מה לכתוב על הלשונית של הדפדפן, חשוב גם למנועי החיפוש. 2. אייקון -Favicon: התמונונת הקטנטנה על הלשונית, חשובה לזיהוי מהיר של האתר על ידי המשתמש הממוצע שפותח 67 טאבים במקביל. 3. תיאור - Description: שמנוע החיפוש ידע על מה האתר מדבר, מופיע גם בתוצאות החיפוש. 4. אין לי מילה לזה בעברית -Open Graph Protocol: מידע שעוזר בשיתוף ברשתות החברתיות כמו להוסיף כותרת ותמונה שיוצגו כאשר שתשתפו קישור לאתר בוואטסאפ, או איך שלא קוראים לטוויטר מתי שאתם קוראים את השורות האלו. ועוד ועוד... ובNext יש דרך קלה להוסיף Metadata לכל האתר, לחלק ממנו או אפילו לדף בודד בקלות יחסית בעזרת ייצוא של אובייקט פשוט שנקרא בשם metadata (כמה מפתיע) שבו תוכלו להגדיר מה שתרצו. 😎 ובתמונות ישנה אפילו קונבנציה שנוכל לעקוב אחריה. לדוגמא favicon.ico בתוך תיקיית app יהפך אוטומטית לאייקון הקטנטן בלשונית, מנחשים מה opengraph-image.png יעשה? * שימו לב שיש אופציות לקיסטום יותר מורכבות ונהדרות, כמו metadata דינמית וטמפלטים. אז כדאי לחטט בתוך הדוקומנטציה בעצמכם. 🐗 שבוע מבורך ובשורות טובות 💙🤍💙