الإجابة المباشرة
عدّل صور معاينة الروابط إلى اللوحة الافتراضية 1200×630 أو البديل 1200×628. اقتصّ الصورة أو أضف هوامش محلياً، ثم تحقق من المعاينة على منصة النشر. استخدم القص لتغطية كامل إطار 1.91:1 بدون حواف، أو الملاءمة مع إضافة هوامش بيضاء أو مخصصة أو شفافة.
كيفية استخدام هذه الأداة
إدراج صورة المعاينة أو ترويسة المدونة
اختر ما يصل إلى 20 صورة JPG أو PNG أو WebP. يبدأ العمل بلوحة 1200×630.
1200×630 / 1200×628
عدّل صور معاينة الروابط إلى اللوحة الافتراضية 1200×630 أو البديل 1200×628. اقتصّ الصورة أو أضف هوامش محلياً، ثم تحقق من المعاينة على منصة النشر.
اختيار القص للملء أو الملاءمة مع الهوامش
استخدم القص لتغطية كامل إطار 1.91:1 بدون حواف، أو الملاءمة مع إضافة هوامش بيضاء أو مخصصة أو شفافة.
التنزيل وإضافة وسوم og:image لصفحتك
حمّل الصورة المحسنة وأضف وسوم og:image وog:image:width وog:image:height داخل ترويسة HTML في موقعك.
مقاسات صور Open Graph وتأطيرها
تتيح هذه الأداة إطارين بمقاسي 1200×630 و1200×628 لصور معاينة الروابط. النسبة في كليهما نحو 1.91:1. يحدد Open Graph البيانات الوصفية للصورة، ولا يفرض مقاساً موحداً على جميع المنصات. راجع طريقة العرض في المنصة التي ستشارك فيها الرابط.
أمثلة عملية
قص بنر عريض 16:9 (1920×1080) لبطاقة Open Graph 1200×630
المدخل: بنر أفقي JPEG بدقة 1920×1080 (نسبة 16:9، بحجم 2.1 ميغابايت)
المخرج: صورة JPEG بدقة 1200×630
يقوم وضع القص بملاءمة العرض واقتطاع الهوامش العلوية والسفلية الدقيقة لتكوين إطار 1200×630.
ملاءمة شعار مربع (1000×1000) داخل إطار 1200×630 مع هوامش
المدخل: شعار PNG بدقة 1000×1000 (نسبة 1:1)
المخرج: صورة PNG بدقة 1200×630 مع شعار متوسط 630×630 وهوامش جانبية متناسقة
يحافظ وضع الهوامش على الشعار كاملاً دون اقتطاع مع ملء الجانبين باللون الأبيض أو بلون علامتك التجارية.
إنشاء بطاقة رابط 1200×628 للمشاركة الاجتماعية
المدخل: رسم PNG بدقة 2400×1256 (نسبة 1.91:1)
المخرج: ملف PNG أو WebP بدقة 1200×628 محسن للمشاركة
يقلل أبعاد التصميم عالي الدقة لسرعة التحميل مع الحفاظ على وضوح التفاصيل.
القيود
- تحتفظ منصات التواصل بالصور في الذاكرة المؤقتة؛ يتطلب التحديث استخدام أدوات تصحيح الروابط الخاصة بالمنصات لتحديث المعاينة.
- تتطلب الهوامش الشفافة استخدام صيغ PNG أو WebP؛ تتطلب صيغة JPEG لون خلفية مصمتاً.
- عند تعطيل التكبير، يحتفظ وضع الملاءمة مع الهوامش بحجم الصور الصغيرة الأصلي داخل اللوحة. يُمنع الاقتصاص لملء الإطار إذا كانت الصورة أو منطقة الاقتصاص صغيرة جداً. اسمح بالتكبير صراحةً عند الحاجة؛ فهو لا يستعيد التفاصيل المفقودة.
الأسئلة الشائعة
ما هو المقاس الموصى به لصور Open Graph؟
عدّل صور معاينة الروابط إلى اللوحة الافتراضية 1200×630 أو البديل 1200×628. اقتصّ الصورة أو أضف هوامش محلياً، ثم تحقق من المعاينة على منصة النشر.
لماذا ينبغي إضافة وسوم og:image:width وog:image:height؟
تصف og:image:width وog:image:height أبعاد الصورة بالبكسل. تقدم هذه الوسوم معلومات للمنصة التي تقرأ البيانات الوصفية، لكنها لا تضمن ظهور المعاينة عند المشاركة الأولى.
هل ستظهر صورتي متطابقة في جميع شبكات التواصل الاجتماعي؟
لا. 1200×630 إعداد مسبق توفره هذه الأداة. تتحكم كل منصة في معاينتها وقد تقتصّ الصورة بشكل مختلف؛ تحقق من النتيجة بعد النشر.
هل تُرفع صوري إلى أي خادم خارجي؟
كلا؛ جميع عمليات تعديل المقاس والقص وتعبئة الهوامش تتم محلياً في متصفحك عبر واجهة HTML5 Canvas.
المراجع والمعايير المعتمدة
- The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.