إرشادات بطاقات الروابط الاجتماعية
صور Open Graph: افحص الرابط قبل أن تنشره
صور Open Graph تحدد شكل صفحتك عند مشاركة الرابط. يوضح هذا الدليل الحجم العملي، الوسوم، فحوصات التصميم، إصلاحات التخزين المؤقت، وقائمة التحقق للنشر التي تحافظ على فاعلية المعاينات.
إجابة سريعة
حدّد صورة Open Graph واحدة وافحص الرابط قبل مشاركته
لأغلب الصفحات، ابدأ بصورة 1200 × 630، وابتعد بالنصوص والشعارات عن الحواف، واستخدم روابط صور HTTPS مطلقة، واختبر الرابط النهائي بأدوات تصحيح المنصة. هذا الإجراء البسيط يكتشف معظم المعاينات المعطلة.
دور بطاقة الرابط
تعامل مع صورة Open Graph كجزء من صفحة الويب
صورة Open Graph ليست مجرد زخرفة، بل تمثل الصفحة عند إنشاء بطاقة الرابط في الشبكات الاجتماعية وتطبيقات الدردشة وأدوات العمل. يجب أن تتطابق مع العنوان والوصف والموضوع الظاهر وصورة البيانات المنظمة.
تجذب النقرات
تشكل الصورة والعنوان والوصف الانطباع الأول قبل وصول الزائر إلى صفحتك.
ينبغي أن يطابق المحتوى
صورة العرض المسبق الجيدة تتوافق مع عنوان صفحة الويب والموضوع الظاهر والوعد الرئيسي للمستخدم بدلاً من استخدام شعار عام للعلامة التجارية.
ينتمي إلى بيانات SEO
يجب أن تصف صور Open Graph، بطاقات تويتر، عناوين URL الأساسية، وصور JSON-LD نفس الصفحة.
يحتاج إلى قاعدة تسمية واضحة
اسم ملف واضح وقاعدة تحديث تمنع ظهور ذاكرات التخزين المؤقت القديمة وصور الحملات السابقة.
خطة المقاسات
اختر أبعادًا تناسب المعاينات الحقيقية
تقص وتخزن الجهات المختلفة المعاينات بطرق مختلفة قليلاً. ملف 1200 × 630 هو الإعداد الافتراضي القوي لمعانات Open Graph، لكن القاعدة الآمنة هي التصميم بمنطقة آمنة مركزية واختبار عنوان الرابط النهائي على الجهات المهمة للصفحة.
| الجهة أو الاستخدام | خطة عملية للصورة | انتبه إلى | فحص ما قبل النشر |
|---|---|---|---|
| إعدادات Open Graph العامة | استعمل 1200 × 630 كإعداد افتراضي عملي لصورة مشاركة كبيرة. | قد تبدو الصور الصغيرة ضبابية أو تظهر كصور مصغرة أصغر من المطلوب. | عاين عنوان الرابط النهائي في أداة تصحيح الجهة قبل المشاركة. |
| فيسبوك مع لينكدإن | استعمل نفس صورة النمط 1.91:1 ما لم تكن صفحة الويب بحاجة إلى أصل خاص بالجهة. | قد يتم قص الحواف بشكل مختلف عبر تخطيطات التغذية والأجهزة. | ضع النصوص المهمة والشعارات داخل المنطقة الآمنة في الوسط. |
| بطاقة X الكبيرة | استعمل summary_large_image واحتفظ بالعنصر البصري في المركز؛ X يدعم صورة بطاقة كبيرة عريضة. | النصوص الصغيرة وتفاصيل الحواف قد تختفي عند قص البطاقة أو تغيير مقاسها. | عيّن twitter:image واختبر باستخدام أدوات بطاقات X. |
| تطبيقات المحادثة وأدوات العمل | حافظ على صغر مقاس الملف وبساطة التصميم لأن المعاينات غالبًا ما تظهر في نوافذ صغيرة. | لقطات الشاشة المزدحمة والعناوين الطويلة والتباين الضعيف تصبح صعبة القراءة بسرعة. | ألصق عنوان الرابط النهائي في الأدوات التي يستخدمها جمهورك فعليًا. |
احتفظ بالرسالة الرئيسية في مركز الصورة. الحواف مناطق خطرة لأن بطاقات التغذية، معاينات الدردشة، وتخطيطات الجوال قد تقصها بشكل مختلف.
HTML
حدد الوسوم التي يحتاجها الزواحف قبل نشر الصفحة
توجد وسوم Open Graph في رأس HTML. استخدم روابط صور مطلقة، حدد العرض والارتفاع، أضف نصًا بديلاً مفيدًا، وحافظ على تناسق عنوان URL الأساسي مع الصفحة التي يشاركها المستخدمون فعليًا.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| وسم | لماذا هذا مهم | خطأ يتكرر كثيرًا |
|---|---|---|
| og:image | يشير إلى الصورة التي يجب أن تمثل صفحة الويب للزواحف. | استخدام مسار نسبي أو صورة يمنعها تسجيل الدخول أو التحويلات أو قواعد robots. |
| og:image:width / og:image:height | يخبر المنصات بحجم الصورة قبل تحميلها وفحص الملف. | ترك المقاسات وعدم تحديدها يجعل كل زاحف يخمن كيفية عرض العرض المسبق. |
| og:image:alt | يصف صورة المعاينة لتسهيل الوصول ويعطي الزواحف مزيدًا من السياق. | تكرار عنوان صفحة الويب بدلاً من وصف ما يظهر في الصورة. |
| og:url | يربط العرض المسبق بعنوان URL الأساسي للصفحة الذي يجب مشاركته. | استخدام رابط تتبع أو بيئة اختبار أو لغة غير صحيحة كهوية دائمة للصفحة. |
| twitter:card / twitter:image | يمنح X تعليمات واضحة لبطاقة كبيرة وصورة اختيارية خاصة بالمنصة. | افتراض أن X سيعرض صورة Open Graph تمامًا كما في الجهات الأخرى. |
إذا كنت تستخدم Blazor، فإن مكون بيانات التعريف لتحسين SEO في Blazor يجمع وسوم Open Graph، بطاقات تويتر، عناوين URL الأساسية، وبيانات JSON-LD معًا.
ضوابط التصميم
ابدأ بالتصميم لبطاقة صغيرة في الخلاصة
معظم الناس لا يرون الصورة كاملة، بل بطاقة مضغوطة في التغذية أو الرسائل أو المعاينة. التصميمات البسيطة تفوز: موضوع واضح، تباين مقروء، ولا نص صغير لا يظهر إلا في ملف التصميم.
سير العمل
خطوات بسيطة لكل صفحة مهمة
- 1
اكتب وعد بطاقة الرابط
حدد ما يجب أن تعبر عنه البطاقة بنظرة واحدة: الموضوع، الفائدة، المنتج، أو زاوية المقال.
- 2
أنشئ الصورة بالنسبة المتفق عليها
استعمل 1200 × 630 للملف الافتراضي واحتفظ بالمحتوى المهم في المركز.
- 3
حسّن الملف
استخدم JPG أو PNG للصورة الاجتماعية، حافظ على حجم الملف صغيرًا معقولًا، وتجنب تلف الضغط المرئي.
- 4
اضبط البيانات الوصفية والمخطط
حدّث وسوم Open Graph، بطاقات تويتر، عنوان URL الأساسي، ومراجع صورة JSON-LD معًا.
- 5
انشر الملف باسم ثابت وواضح
استخدم اسم ملف ذو معنى وغيّره عند استبدال الصورة إذا كان من المحتمل أن تحتفظ المنصة بالإصدار القديم في التخزين المؤقت.
- 6
افحص الرابط النهائي
شغّل رابط صفحة الويب العامة عبر أدوات التصحيح وتحقق من العرض المسبق الحقيقية، وليس فقط شفرة المصدر.
ملاحظة للأداة
استعمل PixelPress بعد تحديد مقاس العرض المسبق
بعد أن تحدد خطة الصور أسماء الملفات النهائية، يمكن أن يساعدك PixelPress في تحويل WebP أو AVIF محليًا. أبقِ النسخ الأصلية كما هي، وراجع الناتج، ثم حدّث رابط Open Graph.
استكشاف الأخطاء
حدث ذاكرات التخزين المؤقت للمنصة قبل الاعتماد على العرض المسبق
تخزن المنصات الاجتماعية بيانات المعاينة مؤقتًا. إذا استبدلت صورة مع الاحتفاظ بنفس الرابط، قد تستمر المنصة في عرض المعاينة القديمة. استخدم الأدوات الرسمية وعند الحاجة غيّر اسم الملف أو أضف رابطًا محدثًا.
قائمة الفحص
قائمة الفحص من صورة Open Graph قبل النشر
استعمل هذه القائمة قبل نشر مقال، صفحة منتج، صفحة أداة، أو صفحة هبوط. تكتشف مشاكل العرض المسبق التي يصعب ملاحظتها بعد مشاركة عنوان الرابط.
الأسئلة الشائعة
ما المقاس المناسب لصورة Open Graph؟
استخدم 1200 × 630 كإعداد افتراضي عملي لمعظم معاينات Open Graph. الحجم مناسب للشاشات عالية الدقة وقريب من نسبة العرض إلى الارتفاع 1.91:1 الشائعة. اختبر الرابط النهائي لأن كل منصة قد تقص أو تخزن المعاينات بشكل مختلف.
هل أستطيع استخدام صورة Open Graph نفسها لكل صفحة؟
يمكنك ذلك، لكنه عادةً أقل تأثيرًا. صورة علامة تجارية عامة أفضل من عدم وجود صورة، لكن المقالات المهمة وصفحات المنتجات والأدوات يجب أن تحتوي على صورة معاينة تتناسب مع الصفحة المحددة.
لماذا تظهر صورة Open Graph القديمة حتى الآن؟
السبب الأكثر شيوعًا هو تخزين الجهة المؤقت. استعمل أدوات تصحيح المشاركة في فيسبوك، فاحص منشورات لينكدإن، أو أدوات بطاقات X لتحديث عنوان الرابط. إذا استمر ظهور الملف القديم، انشر الصورة الجديدة باسم ملف جديد أو رابط محدث.
ما الاختلاف بين og:image و twitter:image؟
og:image هي صورة Open Graph القياسية المستخدمة في العديد من الجهات. twitter:image مخصصة لبطاقات X. إذا قدمت twitter:image، يمكن لـ X استخدامها بدلاً من الرجوع إلى og:image.
هل يجب أن تتوافق صورة JSON-LD مع صورة Open Graph؟
لا يجب أن تكون متطابقة، لكنها يجب أن تروي نفس قصة الصفحة. يجب ألا تشير بيانات البحث، وسوم Open Graph، بطاقات تويتر، وJSON-LD إلى صور غير ذات صلة أو قديمة.
ما دور PixelPress في صور Open Graph؟
يعمل PixelPress بعد تحديد حجم الصورة واسم الملف والدور. يمكنه تحويل الملفات النهائية محليًا مع الحفاظ على النسخ الأصلية دون تغيير. الصفحة لا تزال تحتاج إلى بيانات تعريف صحيحة واختبار المعاينة بعد ذلك.