10.3 Technical SEO הרצאה

SEO טכני - Technical SEO

בשיעור זה נתמקד בהיבטים הטכניים של SEO שמפתחי פרונטאנד אחראים עליהם. נלמד על מבנה אתר, sitemap, robots.txt, קישורים פנימיים, מהירות, ו-Core Web Vitals כגורמי דירוג.

---

ארכיטקטורת אתר ומבנה URL - Site Architecture

מבנה URL נכון

• URL צריך להיות קריא, תיאורי, וקצר
• להשתמש במקפים (-) להפרדת מילים, לא בקו תחתון (_)
• להימנע מפרמטרים מיותרים ב-URL
• לשמור על מבנה היררכי הגיוני

טוב:
https://store.com/products/laptops/dell-xps-15
https://blog.com/2026/react-hooks-guide
https://academy.com/courses/frontend/react-basics

רע:
https://store.com/product?id=12345&cat=3&ref=home
https://blog.com/p/a1b2c3
https://store.com/Products/LAPTOPS/Dell_XPS_15

היררכיה שטוחה

• כל דף באתר צריך להיות נגיש תוך 3 קליקים מדף הבית
• מבנה עמוק מדי מקשה על סריקה ופוגע ב-SEO

מבנה טוב (שטוח):
/
├── /products
│   ├── /products/laptops
│   └── /products/phones
├── /blog
│   ├── /blog/react-hooks
│   └── /blog/nextjs-guide
└── /about

מבנה רע (עמוק מדי):
/
└── /categories
    └── /categories/electronics
        └── /categories/electronics/computers
            └── /categories/electronics/computers/laptops
                └── /categories/electronics/computers/laptops/dell-xps-15

יישום ב-Next.js

app/
├── page.tsx                          # /
├── about/
│   └── page.tsx                      # /about
├── products/
│   ├── page.tsx                      # /products
│   └── [category]/
│       ├── page.tsx                  # /products/laptops
│       └── [slug]/
│           └── page.tsx              # /products/laptops/dell-xps-15
├── blog/
│   ├── page.tsx                      # /blog
│   └── [slug]/
│       └── page.tsx                  # /blog/react-hooks-guide
└── sitemap.ts                        # /sitemap.xml

---

יצירת Sitemap - sitemap.xml

• קובץ XML שמפרט את כל ה-URL-ים באתר שרוצים שמנועי חיפוש יאנדקסו
• עוזר למנועי חיפוש לגלות דפים חדשים ומעודכנים
• מומלץ לכלול priority ו-lastmod
• מוגבל ל-50,000 URL-ים לקובץ

מבנה sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-03-08</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <lastmod>2026-02-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

יצירת sitemap ב-Next.js

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://example.com';

  // דפים סטטיים
  const staticPages: MetadataRoute.Sitemap = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1.0,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.5,
    },
    {
      url: `${baseUrl}/products`,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.9,
    },
    {
      url: `${baseUrl}/blog`,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ];

  // דפים דינמיים - מוצרים
  const products = await fetch(`${baseUrl}/api/products`).then((r) => r.json());
  const productPages: MetadataRoute.Sitemap = products.map(
    (product: { slug: string; updatedAt: string }) => ({
      url: `${baseUrl}/products/${product.slug}`,
      lastModified: new Date(product.updatedAt),
      changeFrequency: 'weekly' as const,
      priority: 0.7,
    })
  );

  // דפים דינמיים - פוסטים
  const posts = await fetch(`${baseUrl}/api/posts`).then((r) => r.json());
  const postPages: MetadataRoute.Sitemap = posts.map(
    (post: { slug: string; updatedAt: string }) => ({
      url: `${baseUrl}/blog/${post.slug}`,
      lastModified: new Date(post.updatedAt),
      changeFrequency: 'monthly' as const,
      priority: 0.6,
    })
  );

  return [...staticPages, ...productPages, ...postPages];
}

Sitemap Index לאתרים גדולים

כשיש יותר מ-50,000 URL-ים, צריך לפצל ל-sitemap-ים מרובים:

// app/sitemap.ts
import { MetadataRoute } from 'next';

export async function generateSitemaps() {
  const totalProducts = await getProductCount();
  const sitemapCount = Math.ceil(totalProducts / 50000);

  return Array.from({ length: sitemapCount }, (_, i) => ({ id: i }));
}

export default async function sitemap({
  id,
}: {
  id: number;
}): Promise<MetadataRoute.Sitemap> {
  const start = id * 50000;
  const products = await getProducts(start, 50000);

  return products.map((product) => ({
    url: `https://example.com/products/${product.slug}`,
    lastModified: new Date(product.updatedAt),
  }));
}

---

הגדרת robots.txt

• קובץ שנמצא בשורש האתר ומכתיב לבוטים מה מותר ומה אסור לסרוק
• לא מונע אינדוקס - רק סריקה. להסרה מהאינדקס משתמשים ב-meta noindex
• חשוב: בוטים לא חייבים לציית ל-robots.txt (בוטים זדוניים מתעלמים)

תחביר robots.txt

# חסימת כל הבוטים מתיקייה
User-agent: *
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# חסימת בוט ספציפי
User-agent: GPTBot
Disallow: /

# אפשור סריקה של כל השאר
User-agent: *
Allow: /

# מיקום ה-Sitemap
Sitemap: https://example.com/sitemap.xml

יצירת robots.txt ב-Next.js

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin/', '/api/', '/private/', '/search'],
      },
      {
        userAgent: 'GPTBot',
        disallow: '/',
      },
    ],
    sitemap: 'https://example.com/sitemap.xml',
  };
}

---

אסטרטגיות קישור פנימי - Internal Linking

• קישורים פנימיים מחברים בין דפים באתר
• עוזרים למנועי חיפוש להבין את מבנה האתר ולגלות דפים חדשים
• מעבירים "כוח SEO" (link equity) בין דפים
• משפרים את חווית המשתמש ומפחיתים bounce rate

שיטות עבודה מומלצות

// קומפוננטת ניווט עם קישורים פנימיים
import Link from 'next/link';

function Navigation() {
  return (
    <nav aria-label="ניווט ראשי">
      <ul>
        <li><Link href="/">דף הבית</Link></li>
        <li><Link href="/products">מוצרים</Link></li>
        <li><Link href="/blog">בלוג</Link></li>
        <li><Link href="/about">אודות</Link></li>
        <li><Link href="/contact">צור קשר</Link></li>
      </ul>
    </nav>
  );
}

נתיב ניווט - Breadcrumbs

// components/Breadcrumbs.tsx
import Link from 'next/link';

interface BreadcrumbItem {
  label: string;
  href: string;
}

function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      item: `https://example.com${item.href}`,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <nav aria-label="נתיב ניווט">
        <ol>
          {items.map((item, index) => (
            <li key={item.href}>
              {index < items.length - 1 ? (
                <Link href={item.href}>{item.label}</Link>
              ) : (
                <span aria-current="page">{item.label}</span>
              )}
              {index < items.length - 1 && <span aria-hidden="true"> / </span>}
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
}

// שימוש
<Breadcrumbs
  items={[
    { label: 'דף הבית', href: '/' },
    { label: 'מוצרים', href: '/products' },
    { label: 'מחשבים', href: '/products/laptops' },
    { label: 'Dell XPS 15', href: '/products/laptops/dell-xps-15' },
  ]}
/>

קישורים רלוונטיים בתוכן

// בתוך מאמר - קישורים פנימיים רלוונטיים
function BlogPost({ post, relatedPosts }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* קישורים למאמרים קשורים */}
      <aside>
        <h2>מאמרים קשורים</h2>
        <ul>
          {relatedPosts.map((related) => (
            <li key={related.slug}>
              <Link href={`/blog/${related.slug}`}>
                {related.title}
              </Link>
            </li>
          ))}
        </ul>
      </aside>
    </article>
  );
}

---

מהירות דף כגורם דירוג - Page Speed

• Google מתייחס למהירות הטעינה כגורם דירוג מאז 2010
• מאז 2021, Core Web Vitals הם חלק רשמי מגורמי הדירוג
• אתרים איטיים מקבלים דירוג נמוך יותר
• גם חווית המשתמש נפגעת - 53% מהמשתמשים נוטשים אתר שלוקח יותר מ-3 שניות

גורמים שמשפיעים על מהירות

• גודל ה-JavaScript bundle
• תמונות לא אופטימיזיות
• פונטים חיצוניים
• קריאות API איטיות
• חוסר caching
• שרת איטי (TTFB גבוה)

// דוגמה: אופטימיזציה בסיסית ב-Next.js

// 1. תמונות - שימוש ב-next/image
import Image from 'next/image';
<Image
  src="/hero.jpg"
  alt="תמונת גיבור"
  width={1200}
  height={600}
  priority // לתמונות above the fold
/>

// 2. פונטים - שימוש ב-next/font
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

// 3. קוד דינמי - dynamic imports
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <p>טוען גרף...</p>,
});

---

אינדוקס מובייל ראשון - Mobile-First Indexing

• מאז 2019, Google משתמש בגרסת המובייל של האתר לאינדוקס ודירוג
• אם האתר לא נראה טוב במובייל, הדירוג ייפגע
• חובה: viewport meta tag, עיצוב responsive, טקסט קריא ללא זום

בדיקות mobile-friendliness

// layout.tsx - viewport חובה
export const metadata = {
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 5,
  },
};

/* עיצוב responsive בסיסי */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* תמונות responsive */
img {
  max-width: 100%;
  height: auto;
}

/* טיפוגרפיה קריאה */
body {
  font-size: 16px; /* מינימום מומלץ */
  line-height: 1.6;
}

/* כפתורים נגישים למגע */
button, a {
  min-height: 44px; /* מינימום לאזור מגע */
  min-width: 44px;
}

/* Media queries */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

---

מדדי Core Web Vitals כגורמי דירוג

• Google משתמש ב-Core Web Vitals כגורמי דירוג מאז יוני 2021
• שלושה מדדים עיקריים: LCP, INP, CLS
• נמדדים ממשתמשים אמיתיים (Real User Metrics - RUM)
• ניתן לראות את הנתונים ב-Google Search Console

ספי הציונים

מדד	טוב	צריך שיפור	גרוע
LCP	עד 2.5 שניות	2.5-4 שניות	מעל 4 שניות
INP	עד 200 מ"ש	200-500 מ"ש	מעל 500 מ"ש
CLS	עד 0.1	0.1-0.25	מעל 0.25

// מדידת Core Web Vitals באפליקציה
// app/components/WebVitals.tsx
'use client';

import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'LCP':
        console.log('LCP:', metric.value, 'ms');
        break;
      case 'INP':
        console.log('INP:', metric.value, 'ms');
        break;
      case 'CLS':
        console.log('CLS:', metric.value);
        break;
    }

    // שליחה לשירות אנליטיקס
    sendToAnalytics(metric);
  });

  return null;
}

function sendToAnalytics(metric: { name: string; value: number; id: string }) {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
    }),
  });
}

---

HTTPS ואבטחה

• HTTPS הוא גורם דירוג מאז 2014
• אתרים ללא HTTPS מסומנים כ"לא מאובטחים" בדפדפן
• Google מעדיף אתרי HTTPS בתוצאות

הגדרת אבטחה בסיסית

// next.config.js - כותרות אבטחה
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

---

רשימת בדיקות SEO טכני

רשימה שימושית לבדיקה לפני השקת אתר:

[ ] HTTPS מוגדר ותקין
[ ] viewport meta tag קיים
[ ] lang ו-dir מוגדרים ב-HTML
[ ] sitemap.xml קיים ומעודכן
[ ] robots.txt מוגדר נכון
[ ] canonical URLs מוגדרים בכל דף
[ ] כותרות (title) ייחודיות לכל דף
[ ] meta descriptions קיימים וייחודיים
[ ] H1 יחיד בכל דף
[ ] תמונות עם alt text
[ ] תמונות אופטימיזיות (גודל, פורמט)
[ ] ניווט נגיש ותקין
[ ] breadcrumbs עם structured data
[ ] קישורים פנימיים רלוונטיים
[ ] אין קישורים שבורים (404)
[ ] האתר responsive למובייל
[ ] Core Web Vitals בטווח הירוק
[ ] זמן טעינה מתחת ל-3 שניות
[ ] כותרות אבטחה מוגדרות
[ ] אין תוכן כפול
[ ] הפניות 301 מוגדרות לדפים שהועברו

---

סיכום

• מבנה URL צריך להיות קריא, שטוח, ותיאורי
• sitemap.xml עוזר למנועי חיפוש לגלות ולסרוק את כל הדפים באתר
• robots.txt מכתיב לבוטים מה מותר לסרוק
• קישורים פנימיים מחזקים את מבנה האתר ומעבירים link equity
• מהירות דף היא גורם דירוג - יש לאופטימז תמונות, קוד ו-caching
• Mobile-First Indexing מחייב עיצוב responsive ואתר mobile-friendly
• Core Web Vitals (LCP, INP, CLS) הם גורמי דירוג רשמיים
• HTTPS הוא חובה הן לאבטחה והן ל-SEO