كيفية إضافة Open Graph العلامات إلى أي موقع ويب

سواء كنت تستخدم HTML الخام أو WordPress أو Next.js أو Webflow — فإليك بالضبط كيفية إضافة علامات Open Graph إلى موقعك.

الطريقة الأولى: 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" />

تأكد من أن عنوان URL og:image مطلق (يبدأ بـ https://). لن تعمل المسارات النسبية مثل /images/preview.jpg.

الطريقة الثانية: WordPress (Yoast SEO)

إذا كنت تستخدم WordPress مع Yoast SEO، فسيتم التعامل مع علامات OG تلقائيًا:

1. تثبيت وتفعيل إضافة Yoast SEO
2. تحرير أي صفحة أو مشاركة
3. قم بالتمرير لأسفل إلى Yoast SEO metabox
4. انقر فوق علامة التبويب "التواصل الاجتماعي".
5. قم بتعيين "Facebook العنوان" و"Facebook الوصف" و"Facebook الصورة"
6. يقوم Yoast تلقائيًا بإنشاء علامات og: الصحيحة

يضيف Yoast أيضًا علامات Twitter Card تلقائيًا. يمكنك تهيئتها ضمن Yoast SEO → Social → Twitter.

الطريقة الثالثة: WordPress (RankMath)

يعمل RankMath بشكل مشابه لـ Yoast ولكن مع إعدادات مختلفة قليلاً:

1. تثبيت وتفعيل RankMath SEO
2. تحرير أي صفحة أو مشاركة
3. ابحث عن Metabox RankMath
4. انتقل إلى علامة التبويب "التواصل الاجتماعي".
5. قم بتعيين الصورة الاجتماعية والعنوان والوصف
6. يقوم RankMath بإنشاء علامات OG وTwitter Card تلقائيًا

الطريقة الرابعة: Next.js (جهاز توجيه التطبيق)

في Next.js 13+ (جهاز توجيه التطبيقات)، استخدم واجهة برمجة التطبيقات للبيانات الوصفية:

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 دليل للتعمق أكثر.

الطريقة الخامسة: Webflow

Webflow يحتوي على إعدادات Open Graph مدمجة:

1. انتقل إلى إعدادات المشروع الخاص بك
2. انقر فوق "إعدادات تحسين محركات البحث"
3. ضمن "العلامات التعريفية الافتراضية"، قم بتعيين الصورة والعنوان والوصف Facebook/OG
4. بالنسبة للصفحات الفردية، انتقل إلى إعدادات الصفحة → إعدادات SEO وتجاوز الإعدادات الافتراضية
5. Webflow يقوم تلقائيًا بإنشاء علامات OG الصحيحة

الطريقة السادسة: إعداد مخصص CMS أو مقطوعة الرأس

إذا كنت تستخدم CMS بدون رأس (Contentful، Sanity، Strapi، وما إلى ذلك)، فأضف علامات OG في إطار عمل الواجهة الأمامية لديك. العملية هي نفسها Next.js — أنشئ العلامات ديناميكيًا من بيانات CMS الخاصة بك وأدخلها في الصفحة .

قائمة مراجعة الإصلاح السريع

الأسئلة المتداولة