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

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

בשיעור זה נצלול לעולם של מטא-תגיות ומידע מובנה. נלמד כיצד לספק למנועי חיפוש ולרשתות חברתיות מידע מדויק על התוכן שלנו, וכיצד ליישם את כל זה עם Next.js.

מטא-תגיות חיוניות - Essential Meta Tags¶

מטא-תגיות הן אלמנטי HTML שנמצאים בתוך ה-<head> ומספקים מידע על הדף למנועי חיפוש ולדפדפנים.

כותרת - title¶

התגית החשובה ביותר ל-SEO
מופיעה בכרטיסיית הדפדפן ובתוצאות החיפוש
אורך מומלץ: 50-60 תווים
צריכה לכלול את מילת המפתח הראשית
כל דף חייב כותרת ייחודית

<!-- טוב -->
<title>מדריך React Hooks למתחילים | DevAcademy</title>

<!-- רע - כללי מדי -->
<title>דף הבית</title>

<!-- רע - ארוך מדי -->
<title>מדריך מלא ומקיף ללימוד React Hooks כולל useState, useEffect, useContext, useReducer ועוד הרבה Hooks שימושיים למתחילים ומתקדמים</title>

תיאור - description¶

מופיע מתחת לכותרת בתוצאות החיפוש
אורך מומלץ: 120-155 תווים
צריך לתאר את התוכן ולעודד את המשתמש ללחוץ
לא משפיע ישירות על דירוג, אבל משפיע על CTR (שיעור הקליקים)

<meta
  name="description"
  content="למדו React Hooks מאפס. מדריך מעשי עם דוגמאות קוד ל-useState, useEffect ו-useContext. כולל תרגילים."
/>

תגית viewport¶

חיונית לתצוגה תקינה במובייל
ללא תגית זו, האתר לא ייחשב mobile-friendly

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

קידוד תווים - charset¶

מגדיר את קידוד התווים של הדף
כמעט תמיד UTF-8

<meta charset="UTF-8" />

תגית robots¶

מכתיבה למנועי חיפוש האם לאנדקס את הדף ולעקוב אחרי קישורים

<!-- לאפשר אינדוקס ומעקב אחרי קישורים (ברירת מחדל) -->
<meta name="robots" content="index, follow" />

<!-- למנוע אינדוקס -->
<meta name="robots" content="noindex, nofollow" />

<!-- לאנדקס אבל לא לעקוב אחרי קישורים -->
<meta name="robots" content="index, nofollow" />

<!-- למנוע הצגה בקאש של Google -->
<meta name="robots" content="noarchive" />

פרוטוקול Open Graph¶

פרוטוקול שפיתח Facebook לשליטה באופן שבו תוכן מוצג כשמשתפים קישור ברשתות חברתיות
מאפשר להגדיר כותרת, תיאור, תמונה וסוג תוכן
משמש גם אפליקציות מסרים כמו WhatsApp, Telegram, Slack ועוד

תגיות Open Graph בסיסיות¶

<meta property="og:title" content="מדריך React Hooks למתחילים" />
<meta property="og:description" content="למדו React Hooks מאפס עם דוגמאות קוד מעשיות" />
<meta property="og:image" content="https://devacademy.co.il/images/react-hooks-guide.jpg" />
<meta property="og:url" content="https://devacademy.co.il/blog/react-hooks-guide" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="he_IL" />
<meta property="og:site_name" content="DevAcademy" />

סוגי תוכן - og:type¶

website - ברירת מחדל לדף רגיל
article - מאמר או פוסט בבלוג
product - מוצר
profile - פרופיל אישי
video.movie - סרט

תגיות Open Graph למאמר¶

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-01T10:00:00Z" />
<meta property="article:modified_time" content="2026-03-05T14:30:00Z" />
<meta property="article:author" content="https://devacademy.co.il/authors/dana" />
<meta property="article:section" content="פיתוח ווב" />
<meta property="article:tag" content="React" />
<meta property="article:tag" content="Hooks" />

דרישות לתמונת Open Graph¶

גודל מומלץ: 1200x630 פיקסלים
גודל מינימלי: 600x315 פיקסלים
פורמט: JPG או PNG
גודל קובץ: עד 5MB (מומלץ פחות מ-1MB)
התמונה חייבת להיות נגישה מ-URL ציבורי

כרטיסי טוויטר - Twitter Cards¶

בדומה ל-Open Graph, אבל ספציפי לטוויטר (X)
טוויטר משתמש גם בתגיות OG כ-fallback

<!-- כרטיס גדול עם תמונה -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@devacademy" />
<meta name="twitter:creator" content="@dana_dev" />
<meta name="twitter:title" content="מדריך React Hooks למתחילים" />
<meta name="twitter:description" content="למדו React Hooks מאפס עם דוגמאות קוד מעשיות" />
<meta name="twitter:image" content="https://devacademy.co.il/images/react-hooks-guide.jpg" />

סוגי כרטיסים¶

summary - כרטיס קטן עם תמונה מרובעת
summary_large_image - כרטיס גדול עם תמונה רחבה (הכי נפוץ)
player - לתוכן וידאו
app - לאפליקציות

כתובות קנוניות - Canonical URLs¶

מגדירות את הגרסה המועדפת של דף כשיש כמה URL-ים שמובילים לאותו תוכן
מונעות בעיות של תוכן כפול (duplicate content)
חיוני כשיש פרמטרים של חיפוש, מיון, או pagination

<!-- הדף הקנוני -->
<link rel="canonical" href="https://store.com/products/laptop" />

מתי צריך canonical¶

<!-- כל אלה צריכים להצביע על אותו canonical -->
<!-- https://store.com/products/laptop -->
<!-- https://store.com/products/laptop?color=silver -->
<!-- https://store.com/products/laptop?ref=homepage -->
<!-- https://www.store.com/products/laptop -->
<!-- http://store.com/products/laptop -->

<link rel="canonical" href="https://store.com/products/laptop" />

דוגמה לדף pagination¶

<!-- דף 1 - הוא הקנוני -->
<link rel="canonical" href="https://blog.com/articles" />

<!-- דף 2 - קנוני של עצמו -->
<link rel="canonical" href="https://blog.com/articles?page=2" />

מידע מובנה עם JSON-LD - Structured Data¶

מידע מובנה מאפשר למנועי חיפוש להבין בדיוק מה התוכן של הדף
משתמש בסכמה של Schema.org
JSON-LD הוא הפורמט המומלץ על ידי Google
מאפשר הצגת Rich Results בתוצאות החיפוש (כוכבי דירוג, מחיר, מתכון, שעות פתיחה, ועוד)

מבנה בסיסי¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "מדריך React Hooks",
  "description": "מדריך מקיף ל-React Hooks למתחילים"
}
</script>

סכמה למאמר - Article¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "מדריך React Hooks למתחילים",
  "description": "למדו React Hooks מאפס עם דוגמאות קוד מעשיות",
  "image": "https://devacademy.co.il/images/react-hooks-guide.jpg",
  "datePublished": "2026-03-01T10:00:00Z",
  "dateModified": "2026-03-05T14:30:00Z",
  "author": {
    "@type": "Person",
    "name": "דנה כהן",
    "url": "https://devacademy.co.il/authors/dana"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DevAcademy",
    "logo": {
      "@type": "ImageObject",
      "url": "https://devacademy.co.il/logo.png"
    }
  }
}
</script>

סכמה למוצר - Product¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "אוזניות Sony WH-1000XM5",
  "image": "https://store.com/images/sony-xm5.jpg",
  "description": "אוזניות אלחוטיות עם ביטול רעשים מתקדם",
  "brand": {
    "@type": "Brand",
    "name": "Sony"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://store.com/products/sony-xm5",
    "priceCurrency": "ILS",
    "price": "1299",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "234"
  }
}
</script>

סכמה לשאלות נפוצות - FAQ¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "מה זה React Hooks?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "React Hooks הם פונקציות שמאפשרות שימוש ב-state ו-lifecycle בקומפוננטות פונקציונליות."
      }
    },
    {
      "@type": "Question",
      "name": "מתי להשתמש ב-useEffect?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "useEffect משמש לביצוע side effects כמו קריאות API, מנויים, ושינוי ה-DOM."
      }
    }
  ]
}
</script>

סכמה לארגון - Organization¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "DevAcademy",
  "url": "https://devacademy.co.il",
  "logo": "https://devacademy.co.il/logo.png",
  "sameAs": [
    "https://twitter.com/devacademy",
    "https://github.com/devacademy",
    "https://linkedin.com/company/devacademy"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+972-3-1234567",
    "contactType": "customer service",
    "availableLanguage": ["Hebrew", "English"]
  }
}
</script>

סכמה לנתיב ניווט - BreadcrumbList¶

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "דף הבית",
      "item": "https://devacademy.co.il"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "בלוג",
      "item": "https://devacademy.co.il/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "מדריך React Hooks",
      "item": "https://devacademy.co.il/blog/react-hooks-guide"
    }
  ]
}
</script>

ממשק Metadata של Next.js - Next.js Metadata API¶

Next.js App Router מספק API מובנה לניהול מטא-דאטה בצורה פשוטה ויעילה.

מטא-דאטה סטטית¶

// app/about/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'אודות | DevAcademy',
  description: 'למדו על DevAcademy - פלטפורמת לימוד פיתוח ווב בעברית',
  keywords: ['פיתוח ווב', 'קורסים', 'React', 'Next.js'],
  authors: [{ name: 'DevAcademy' }],
  openGraph: {
    title: 'אודות DevAcademy',
    description: 'פלטפורמת לימוד פיתוח ווב בעברית',
    url: 'https://devacademy.co.il/about',
    siteName: 'DevAcademy',
    images: [
      {
        url: 'https://devacademy.co.il/og/about.jpg',
        width: 1200,
        height: 630,
        alt: 'אודות DevAcademy',
      },
    ],
    locale: 'he_IL',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'אודות DevAcademy',
    description: 'פלטפורמת לימוד פיתוח ווב בעברית',
    images: ['https://devacademy.co.il/og/about.jpg'],
  },
  alternates: {
    canonical: 'https://devacademy.co.il/about',
  },
  robots: {
    index: true,
    follow: true,
  },
};

מטא-דאטה דינמית¶

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

interface BlogPost {
  title: string;
  excerpt: string;
  coverImage: string;
  author: string;
  publishedAt: string;
  slug: string;
}

async function getPost(slug: string): Promise<BlogPost> {
  const res = await fetch(`https://api.devacademy.co.il/posts/${slug}`);
  return res.json();
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: `${post.title} | DevAcademy Blog`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author],
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    alternates: {
      canonical: `https://devacademy.co.il/blog/${post.slug}`,
    },
  };
}

export default async function BlogPostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.excerpt}</p>
    </article>
  );
}

מטא-דאטה ב-layout עם תבנית¶

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://devacademy.co.il'),
  title: {
    default: 'DevAcademy - לימוד פיתוח ווב',
    template: '%s | DevAcademy',
  },
  description: 'פלטפורמת לימוד פיתוח ווב בעברית',
  openGraph: {
    siteName: 'DevAcademy',
    locale: 'he_IL',
    type: 'website',
  },
  robots: {
    index: true,
    follow: true,
  },
  verification: {
    google: 'google-site-verification-code',
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="he" dir="rtl">
      <body>{children}</body>
    </html>
  );
}

כשדף ילד מגדיר title: 'אודות', התוצאה תהיה "אודות | DevAcademy" (הודות ל-template)

הוספת JSON-LD ב-Next.js¶

// app/blog/[slug]/page.tsx
export default async function BlogPostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
      </article>
    </>
  );
}

בדיקת מטא-תגיות ומידע מובנה¶

כלים לבדיקה¶

Google Rich Results Test - בדיקת structured data
Facebook Sharing Debugger - בדיקת Open Graph
Twitter Card Validator - בדיקת Twitter Cards
Schema Markup Validator - בדיקה מול Schema.org

# בדיקת structured data מ-CLI
npx structured-data-testing-tool --url https://devacademy.co.il/blog/react-hooks

בדיקה ב-DevTools¶

פתחו את ה-DevTools ועברו לכרטיסיית Elements
חפשו בתוך ה-<head> את כל תגיות ה-meta
וודאו שכל דף מכיל: title, description, og:title, og:description, og:image, canonical

סיכום¶

מטא-תגיות הן אלמנטים ב-<head> שמספקים מידע למנועי חיפוש ולדפדפנים
התגיות החיוניות: title, description, viewport, charset, robots
פרוטוקול Open Graph שולט בהצגת קישורים ברשתות חברתיות
Twitter Cards מאפשרים שליטה בהצגת תוכן בטוויטר
כתובות קנוניות מונעות בעיות של תוכן כפול
מידע מובנה (JSON-LD) מאפשר Rich Results בתוצאות החיפוש
סוגי סכמות נפוצים: Article, Product, FAQ, Organization, BreadcrumbList
Next.js Metadata API מפשט את ניהול המטא-דאטה באפליקציה