כיצד להוסיף תגיות Open Graph לכל אתר אינטרנט

בין אם אתה משתמש ב-HTML גולמי, WordPress, Next.js או Webflow - הנה בדיוק איך להוסיף תגיות Open Graph לאתר שלך.

שיטה 1: HTML גולמי (כל אתר סטטי)

אם יש לך גישה ישירה לקבצי ה-HTML שלך, הוסף את התגים האלה בתוך הקטע של כל עמוד:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

ודא שכתובת האתר og:image היא מוחלטת (מתחיל ב-https://). נתיבים יחסיים כמו /images/preview.jpg לא יעבדו.

שיטה 2: WordPress (SEO של Yoast)

אם אתה משתמש ב-WordPress עם Yoast SEO, תגיות OG מטופלות באופן אוטומטי:

1. התקן והפעל את התוסף Yoast SEO
2. ערוך כל עמוד או פוסט
3. גלול מטה אל המטא-בוקס של Yoast SEO
4. לחץ על הכרטיסייה "חברתי".
5. הגדר את "Facebook כותרת", "Facebook תיאור" ו-"Facebook תמונה"
6. Yoast יוצר אוטומטית את התגים הנכונים og:

Yoast גם מוסיף Twitter Card תגיות באופן אוטומטי. אתה יכול להגדיר אותם תחת Yoast SEO → Social → Twitter.

שיטה 3: WordPress (RankMath)

RankMath עובד בדומה ל- Yoast אך עם הגדרות מעט שונות:

1. התקן והפעל RankMath SEO
2. ערוך כל עמוד או פוסט
3. מצא את המטא-בוקס של RankMath
4. עבור ללשונית "חברתי".
5. הגדר את התמונה החברתית, הכותרת והתיאור
6. RankMath מייצר אוטומטית תגיות OG ו-Twitter Card

שיטה 4: Next.js (נתב אפליקציות)

ב-Next.js 13+ (נתב אפליקציות), השתמש ב-Metadata API:

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

עבור דפים דינמיים (כמו פוסטים בבלוג), צור מטא נתונים ב-generateMetadata():

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

ראה את התגים Open Graph שלנו במדריך Next.js לצלילה עמוקה יותר.

שיטה 5: Webflow

Webflow כולל הגדרות Open Graph מובנות:

1. עבור להגדרות הפרויקט שלך
2. לחץ על "הגדרות SEO"
3. תחת "ברירת מחדל מטא תגיות", הגדר את התמונה, הכותרת והתיאור Facebook/OG
4. עבור דפים בודדים, עבור אל הגדרות העמוד ← הגדרות SEO ועקוף את ברירות המחדל
5. Webflow מייצר אוטומטית את תגיות OG נכונות

שיטה 6: הגדרה מותאמת אישית CMS או ללא ראש

אם אתה משתמש ב-CMS ללא ראש (Contentful, Sanity, Strapi וכו'), הוסף תגיות OG במסגרת החזית שלך. התהליך זהה ל-Next.js - צור את התגים באופן דינמי מנתוני CMS שלך והחדיר אותם לדף .

רשימת רשימת תיקון מהירה

שאלות נפוצות