10.2 מטא תגיות ומידע מובנה תרגול

תרגול - מטא תגיות ומידע מובנה - Meta Tags and Structured Data¶

תרגיל 1 - מטא-תגיות מלאות לדף מוצר¶

צרו דף מוצר ב-Next.js App Router עבור חנות אלקטרוניקה. המוצר הוא "מחשב נייד Dell XPS 15".

הדף צריך לכלול:
- מטא-דאטה דינמית (generateMetadata) עם title, description
- תגיות Open Graph מלאות (כולל og:type, og:image, og:price:amount)
- תגיות Twitter Card
- כתובת canonical
- רמז למנועי חיפוש שהדף קיים גם באנגלית (hreflang)

תרגיל 2 - JSON-LD למוצר¶

כתבו קומפוננטת React שמקבלת אובייקט מוצר ומייצרת תגית JSON-LD מלאה עם סכמת Product של Schema.org.

הסכמה צריכה לכלול:
- שם, תיאור, תמונה
- מותג (Brand)
- הצעה (Offer) עם מחיר, מטבע, זמינות
- דירוג מצטבר (AggregateRating)
- לפחות 2 ביקורות (Review)

ממשק המוצר:

interface Product {
  name: string;
  description: string;
  image: string;
  brand: string;
  price: number;
  currency: string;
  inStock: boolean;
  rating: number;
  reviewCount: number;
  reviews: {
    author: string;
    rating: number;
    text: string;
    date: string;
  }[];
}

תרגיל 3 - מערכת מטא-דאטה לבלוג¶

בנו מערכת מטא-דאטה מלאה לבלוג טכנולוגי עם Next.js App Router:

קובץ layout.tsx ראשי עם:
תבנית כותרות (title template)
מטא-דאטה בסיסית שתשמש כברירת מחדל
הגדרות OG בסיסיות
דף רשימת מאמרים (/blog/page.tsx) עם:
מטא-דאטה סטטית
דף מאמר בודד (/blog/[slug]/page.tsx) עם:
מטא-דאטה דינמית שמתבססת על תוכן המאמר
JSON-LD מסוג Article

תרגיל 4 - Open Graph לרשתות חברתיות¶

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

הפרק צריך להיות ניתן לשיתוף ב:
- פייסבוק (Open Graph עם type: music.song)
- טוויטר (Twitter Card עם player)
- וואטסאפ (OG בסיסי)
- לינקדאין (OG בסיסי)

כתבו גם פונקציה שמייצרת את תמונת ה-OG דינמית (URL route שמחזיר תמונה).

רמז: ב-Next.js ניתן להשתמש ב-opengraph-image.tsx או ImageResponse.

תרגיל 5 - JSON-LD לדף שאלות נפוצות¶

צרו דף שאלות נפוצות (FAQ) עם:
- קומפוננטת אקורדיון שמציגה שאלות ותשובות
- סכמת JSON-LD מסוג FAQPage
- מטא-דאטה מתאימה

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

הסכמה צריכה להיות מסונכרנת עם התוכן בדף - כלומר, יש להשתמש באותו מערך נתונים גם ל-UI וגם ל-JSON-LD.

תרגיל 6 - ביקורת מטא-תגיות¶

כתבו פונקציית בדיקה (utility function) שמקבלת HTML כ-string ומחזירה דוח על מטא-תגיות:

הפונקציה תבדוק:
- האם יש title ומה האורך שלו
- האם יש meta description ומה האורך שלו
- האם יש תגיות OG (og:title, og:description, og:image)
- האם יש Twitter Card tags
- האם יש canonical URL
- האם יש viewport meta
- האם יש JSON-LD ואם כן, האם הוא תקין

הפונקציה תחזיר אובייקט עם ציון (0-100) ורשימת בעיות.

שאלות¶

מה ההבדל בין תגית title לבין og:title? האם הם תמיד צריכים להיות זהים?
מדוע חשוב להגדיר canonical URL? תנו שלוש דוגמאות לסיטואציות שבהן זה הכרחי.
מה הם Rich Results ואיך JSON-LD מאפשר אותם? תנו שתי דוגמאות.
מה היתרון של שימוש ב-Metadata API של Next.js לעומת הוספה ידנית של תגיות meta?
מה קורה כשמשתפים קישור בוואטסאפ שלא מכיל תגיות Open Graph?