10.3 Technical SEO תרגול

תרגול - SEO טכני - Technical SEO

תרגיל 1 - מבנה URL ואדריכלות אתר

יש לכם אתר חדשות טכנולוגי עם הקטגוריות הבאות:
- חדשות (מתעדכן יומית)
- מדריכים (לפי נושא: React, Node.js, Python, DevOps)
- סקירות מוצרים
- פודקאסט (פרקים)
- אודות / צור קשר

תכננו:
1. מבנה URL מלא לכל סוג דף (לפחות 10 URL-ים לדוגמה)
2. מבנה תיקיות ב-Next.js App Router שתומך ב-URL-ים שהגדרתם
3. הסבירו את ההחלטות שלכם (למה בחרתם את המבנה הזה)

---

תרגיל 2 - sitemap.xml דינמי

בנו מערכת sitemap מלאה ב-Next.js עבור אתר חנות עם:
- 500 מוצרים בקטגוריות שונות
- 30 קטגוריות
- 50 מאמרי בלוג
- דפים סטטיים (בית, אודות, צור קשר, תנאי שימוש)

הדרישות:
- פיצול ל-sitemap index עם sitemaps נפרדים למוצרים, קטגוריות, בלוג, ודפים סטטיים
- priority שונה לכל סוג דף
- changeFrequency מתאים לכל סוג
- lastModified מעודכן

---

תרגיל 3 - robots.txt מתקדם

כתבו robots.txt לאתר SaaS שכולל:
- אזור שיווקי ציבורי (/, /features, /pricing, /blog)
- אזור אפליקציה (/app/*)
- אזור API (/api/*)
- אזור ניהול (/admin/*)
- דפי חיפוש (/search?q=...)
- דפי משתמש (/users/*)
- קבצי assets (/assets/*)

בנוסף:
- חסמו את GPTBot ו-CCBot (בוטים של AI)
- אפשרו ל-Googlebot גישה ל-assets
- הוסיפו crawl-delay לבוטים מסוימים

כתבו גם את הגרסה ב-Next.js (app/robots.ts).

---

תרגיל 4 - Breadcrumbs עם Structured Data

בנו קומפוננטת Breadcrumbs מלאה שכוללת:
- תצוגה ויזואלית עם CSS
- תמיכה ב-RTL
- סכמת JSON-LD מסוג BreadcrumbList
- נגישות (aria attributes)

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

בדקו אותה עם נתיבי ניווט שונים:
1. דף הבית > מוצרים > מחשבים > Dell XPS 15
2. דף הבית > בלוג > React > מדריך Hooks
3. דף הבית > קורסים > פיתוח פרונטאנד > שיעור 5

---

תרגיל 5 - בדיקת קישורים פנימיים

כתבו סקריפט (ב-TypeScript) שסורק אתר ובודק:
1. קישורים שבורים (404)
2. דפים "יתומים" (דפים שאין אליהם שום קישור פנימי)
3. שרשרת הפניות (redirect chains) - יותר מ-2 הפניות ברצף
4. קישורים עם anchor text ריק או גנרי ("לחצו כאן")

הסקריפט יקבל URL בסיסי ויחזיר דוח עם כל הבעיות.

רמז: השתמשו ב-fetch ו-DOMParser (או cheerio) לניתוח HTML.

---

תרגיל 6 - אופטימיזציה ל-Mobile-First

נתון דף מוצר שלא מותאם למובייל. תקנו אותו:

function ProductPage({ product }) {
  return (
    <div style={{ width: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'flex', gap: '40px' }}>
        <img
          src={product.image}
          style={{ width: '600px', height: '600px' }}
        />
        <div>
          <h1 style={{ fontSize: '14px' }}>{product.name}</h1>
          <p style={{ fontSize: '10px' }}>{product.description}</p>
          <span style={{ fontSize: '24px' }}>{product.price} ₪</span>
          <button
            style={{ padding: '5px 10px', fontSize: '10px' }}
            onClick={handleBuy}
          >
            קנה עכשיו
          </button>
          <div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
            {product.relatedProducts.map(p => (
              <a href={`/products/${p.id}`} style={{ fontSize: '8px' }}>
                {p.name}
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

תקנו את כל הבעיות:
- תמונה responsive
- טיפוגרפיה קריאה
- כפתורים נגישים למגע
- מעבר ל-layout של עמודה אחת במובייל
- שימוש ב-next/image
- תגיות סמנטיות

---

שאלות

1. מה ההבדל בין Disallow ב-robots.txt לבין meta noindex? מתי משתמשים בכל אחד?
2. מה זה crawl budget ולמה הוא חשוב? כיצד robots.txt משפיע עליו?
3. כיצד redirect chain פוגע ב-SEO? מה הפתרון?
4. מדוע breadcrumbs חשובים גם ל-SEO וגם ל-UX?
5. מה ההבדל בין sitemap.xml ל-sitemap index? מתי צריך sitemap index?