دليل المعاينة الاجتماعية
صور Open Graph: اختبر الرابط قبل نشره
صور Open Graph تحدد كيف تبدو صفحتك عند مشاركة الرابط. هذا الدليل يوضح الحجم العملي، العلامات، فحوصات التصميم، إصلاحات التخزين المؤقت، وقائمة التحقق للنشر التي تحافظ على فاعلية المعاينات.
إجابة سريعة
اختر صورة Open Graph واحدة واختبر الرابط قبل المشاركة
لأغلب الصفحات، ابدأ بصورة 1200 × 630، وابتعد بالنصوص والشعارات المهمة عن الحواف، واستخدم روابط صور HTTPS مطلقة، واختبر الرابط النهائي بأدوات تصحيح المنصة. هذا سير العمل البسيط يكتشف معظم المعاينات المعطلة.
دور المعاينة
عامل صورة Open Graph كأصل للصفحة
صورة Open Graph ليست مجرد زخرفة، بل تمثل الصفحة عند إنشاء بطاقة رابط في الشبكات الاجتماعية، تطبيقات الدردشة، وأدوات العمل. يجب أن تتطابق مع العنوان، الوصف، الموضوع الظاهر، وصورة البيانات المنظمة.
تبيع النقر
تشكل الصورة، العنوان، والوصف الانطباع الأول قبل وصول الزائر إلى صفحتك.
يجب أن تتطابق مع المحتوى
صورة المعاينة الجيدة تتوافق مع عنوان الصفحة والموضوع الظاهر والوعد الرئيسي للمستخدم بدلاً من استخدام شعار عام للعلامة التجارية.
ينتمي إلى بيانات تحسين محركات البحث
يجب أن تصف صور 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 | يشير إلى الصورة التي يجب أن تمثل الصفحة للزواحف. | استخدام مسار نسبي أو صورة محجوبة بتسجيل الدخول، إعادة التوجيه، أو قواعد الروبوتات. |
| 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 بعد تحديد حجم الصورة، اسم الملف، والدور. يمكنه المساعدة في تحويل الملفات النهائية محليًا مع الحفاظ على النسخ الأصلية دون تغيير. الصفحة لا تزال بحاجة إلى بيانات تعريف صحيحة واختبار المعاينة بعد ذلك.