مولد صورة بطاقة وسائل التواصل الاجتماعي
مرشد
مولد صورة بطاقة وسائل التواصل الاجتماعي
تصميم صور مثالية من حيث البكسل للنشر على وسائل التواصل الاجتماعي مثل Open Graph، Twitter Cards، LinkedIn، وFacebook مباشرة في متصفحك. اكتب عنوانك، ووصفك، واسم الموقع، اختر تخطيطًا وتصميمًا، ثم احفظ صورة بصيغة PNG أو JPG أو WebP بحجم دقيق يُتوقع من كل منصة - دون الحاجة إلى أدوات تصميم أو تحميل.
كيفية استخدام
- اختر تخطيطًا مسبقًا (1200×630 لـ Open Graph، 1024×512 لـ Twitter) أو اضبط العرض والارتفاع حسب الرغبة.
- أدخل العنوان، والوصف، واسم الموقع الذي ترغب في عرضه على الـ Card.
- اختر تخطيطًا (مركزي، مائل لليسار، أو بار على الأعلى) ونظامًا (أبيض، أسود، لون العلامة التجارية، أو تدرج لون).
- أعد تخصيص الخطوط - عائلة الخط، حجم العنوان، وحجم الوصف - لتتماشى مع علامة تجاريتك.
- انقر تحميل واحفظ الصورة بصيغة PNG أو JPG أو WebP لاستخدامها كـ
og:imageأوtwitter:image.
خصائص
- الإمكانيات الاجتماعية الدقيقة – تخطيطات مسبقة لـ Open Graph (1200×630)، Twitter Card (1024×512)، LinkedIn، وFacebook.
- تعدد التخطيطات – نماذج مركزة، مائلة لليسار، ونماذج بار على الأعلى لتظهر مظهرًا مختلفًا للعلامة التجارية.
- أبيض، أسود، علامة تجارية، ونماذج تدرج – تبديل الخلفية بضغطة زر أو استخدام لون علامة تجارية الخاصة بك.
- تقليل تلقائي للعنوان – تضمين عناوين طويلة تُختصر وتُعاد تشكيلها لضمان قابلية القراءة.
- عرض تجريبي على لوحة حية – كل تغيير يُعيد تطبيقه فورًا على لوحة HTML5 حقيقية - ما تراه هو ما ستحصل عليه عند التحميل.
- تصدير بصيغة PNG، JPG، وWebP – اختر الصيغة المناسبة لاستخدامها مع مضيفك ونظام توزيع المحتوى (CDN).
- يُشغل بالكامل في المتصفح الخاص بك – لا حاجة لرفع، ولا حساب، ولا علامة مائية.
التعليمات
-
ما هو بروتوكول Open Graph؟
Open Graph هو مجموعة من
<meta>العلامات التي أُدخلت من قبل فيسبوك تسمح لصفحة ويب بوصف نفسها للمنصات الاجتماعية. العلامات الأكثر شيوعًا هيog:title,og:descriptionو، وog:image. عندما يُشارك رابط، تقرأ المنصة هذه العلامات وتحوّل إلى صورة مُفصّلة بدلًا من رابط بسيط. -
ما حجم صورة og:image يجب أن يكون؟
توصي معايير Open Graph بنسبة عرض إلى ارتفاع 1.91:1 مع حد أدنى 600×315 بكسل. تُظهر معظم المنصات أفضل أداء عند 1200×630، حيث تبقى الصورة واضحة على أجهزة Retina، مع الاحتفاظ بحدود 8 ميغابايت من معايير فيسبوك. أما صور Twitter Cards فتستخدم عادةً 1024×512 للصورة الكبيرة المُلخصة.
-
لماذا تُخزن روابط صور og:image في منصات التواصل؟
تقوم منصات مثل فيسبوك، لينكدإن، وسلاك بتحميل صورة og:image مرة واحدة وتخزينها على شبكة CDN لتجنب تحميل الملفات من مصدرك كل مرة يُشار إليها. يمكن أن تبقى هذه المخزونات محفوظة لعدة أيام أو أسابيع. لتحديث الصورة، يمكنك تغيير رابط الملف أو استخدام مدقق المنصة (مثل مدقق مشاركة فيسبوك) لفحص الصفحة مرة أخرى.
-
ما الفرق بين og:image و twitter:image؟
og:imageهي جزء من بروتوكول Open Graph وتعمل على تصفحها من قبل فيسبوك، لينكدإن، سلاك، ديسكورد، وغالبًا تطبيقات الاتصال.twitter:imageهي جزء من صور Twitter Cards وتعمل على تصفحها من قبل X (تويتر). إذا وُجد فقطog:imageفسيقوم X بتحديثها تلقائيًا، لذا فإن صورة عالية الجودة تُستخدم عادةً للاستخدام على كلا المنصتين - ولكن توفير كلا الصور يسمح لك بتحسين الحجم حسب المنصة. -
لماذا تقلل العنوان تلقائيًا عند تجاوز طوله؟
لأن صور الشبكات الاجتماعية تمتلك مساحة محددة، لذا يظهر العنوان الطويل الذي يتجاوز الحد كمُفكك. لا يمكن لواجهة HTML5 Canvas أن تُعيد تشكيل النص تلقائيًا، لذا يقوم المولد بقياس كل كلمة باستخدام
ctx.measureText()، يقسم العنوان إلى صفوف، ويقلل حجم الخط خطوة بخطوة حتى يناسب الحدود الآمنة. هذا يضمن أن كل صورة مُصدرة قابلة للقراءة دون الحاجة إلى تعديل يدوي.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
