10.1 יסודות SEO תרגול

תרגול - יסודות SEO - SEO Fundamentals¶

תרגיל 1 - ניתוח On-Page SEO¶

קיבלתם את דף ה-HTML הבא של חנות אונליין. זהו את כל בעיות ה-SEO בדף ותקנו אותן:

<!DOCTYPE html>
<html>
<head>
  <title>דף מוצר</title>
</head>
<body>
  <div class="header">
    <div class="logo">החנות שלנו</div>
  </div>
  <div class="content">
    <div class="product-title">אוזניות אלחוטיות Sony WH-1000XM5</div>
    <img src="headphones.jpg" />
    <div class="price">₪1,299</div>
    <div class="description">
      אוזניות אלחוטיות מעולות. קנו עכשיו. אוזניות. אוזניות sony. אוזניות אלחוטיות.
      אוזניות bluetooth. הכי טוב. מחיר משתלם. אוזניות אלחוטיות sony.
    </div>
    <div onclick="addToCart()">הוסף לסל</div>
  </div>
</body>
</html>

עליכם:
- לזהות לפחות 8 בעיות SEO
- לכתוב את ה-HTML המתוקן עם כל השיפורים

תרגיל 2 - מטא-תגיות בסיסיות ב-Next.js¶

צרו קומפוננטת דף ב-Next.js App Router עבור דף "אודות" של חברת פיתוח תוכנה. הדף צריך לכלול:
- כותרת מתאימה
- תיאור meta
- תגית robots שמאפשרת אינדוקס
- כתובת canonical
- תגית שפה (עברית)

השתמשו ב-Metadata API של Next.js (פונקציית metadata סטטית).

תרגיל 3 - robots.txt ו-sitemap¶

כתבו קובץ robots.txt לאתר חדשות שכולל:
- אזור ציבורי (/articles/, /categories/)
- אזור מנוי בתשלום (/premium/)
- אזור ניהול (/admin/, /api/)
- דפי חיפוש פנימיים (/search)

בנוסף, כתבו פונקציה ב-Next.js שמייצרת sitemap.xml דינמי עבור כל המאמרים הציבוריים. השתמשו ב-Route Handler.

תרגיל 4 - SPA מול SSR¶

נתון הקוד הבא של אפליקציית React רגילה (CSR) שמציגה רשימת מוצרים:

// App.tsx - אפליקציית SPA רגילה
import { useState, useEffect } from 'react';

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  image: string;
}

function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>טוען...</div>;

  return (
    <div>
      <h1>המוצרים שלנו</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <img src={product.image} />
          <p>{product.description}</p>
          <span>{product.price} ₪</span>
        </div>
      ))}
    </div>
  );
}

המירו את הקוד ל-Next.js App Router עם:
- רינדור בצד השרת (Server Component)
- מטא-דאטה דינמית
- תמונות מותאמות עם next/image
- מבנה HTML סמנטי

תרגיל 5 - מחקר מילות מפתח ומבנה תוכן¶

אתם בונים בלוג טכנולוגי בנושא פיתוח ווב. תכננו את מבנה התוכן עבור 5 מאמרים:

עבור כל מאמר, הגדירו:
- כותרת (title tag) - עד 60 תווים
- תיאור (meta description) - עד 155 תווים
- מילת מפתח ראשית
- 3 מילות מפתח משניות
- מבנה כותרות (H1, H2, H3)

הנושאים:
1. מדריך ל-TypeScript למתחילים
2. השוואה בין React ל-Vue ב-2026
3. בניית REST API עם Node.js ו-Express
4. מה זה Docker ולמה כדאי להשתמש בו
5. אבטחת אפליקציות ווב - המדריך המלא

תרגיל 6 - ביקורת SEO¶

קיבלתם אתר תיק עבודות (portfolio) שנבנה כ-SPA עם React ו-Vite. הנה הבעיות שזוהו:

אין meta tags כלל
כל הדפים יש להם אותו title: "My Portfolio"
תמונות ללא alt text
אין sitemap.xml
אין robots.txt
ה-URL-ים נראים כך: /#/projects/1
זמן טעינה של 8 שניות
לא responsive למובייל

כתבו תוכנית פעולה מפורטת לתיקון כל בעיה. עבור כל בעיה:
- הסבירו למה היא פוגעת ב-SEO
- הציעו פתרון קונקרטי עם קוד לדוגמה (כשרלוונטי)
- ציינו את רמת העדיפות (גבוהה / בינונית / נמוכה)

שאלות¶

מהם שלושת השלבים שמנוע חיפוש עובר כדי להציג תוצאות? הסבירו כל שלב בקצרה.
מה ההבדל בין On-Page SEO ל-Technical SEO? תנו שתי דוגמאות לכל אחד.
מדוע אפליקציות SPA בעייתיות ל-SEO? כיצד SSR פותר את הבעיה?
מה זה keyword stuffing ולמה זה פוגע בדירוג?
מהם שלושת הדברים הראשונים שהייתם בודקים ב-Google Search Console לאחר השקת אתר חדש?