مُنشئ صور OG — صانع صور المشاركة الاجتماعية
أنشئ صورة مشاركة اجتماعية 1200×630 ببروتوكول Open Graph مع عنوان وعنوان فرعي وخلفية وشعار، تُنشأ مباشرةً على لوحة رسم حقيقية — ثم عاين كيف تبدو داخل بطاقات رابط Twitter/X وFacebook وLinkedIn وDiscord قبل تنزيل صورة PNG النقية.
🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.
النتيجة
صورة Open Graph هي الصورة التي تظهر عند لصق رابط في محادثة أو تغريدة أو قناة Slack — وجميع المنصات التي تعرضها تتوقع لوحة بحجم 1200×630 بكسل تقريبًا، وهو الحجم الذي صُممت حوله بطاقات og:image من Facebook وبطاقات summary_large_image من Twitter. إذا أخطأت في الحجم، فستظهر الصورة مقصوصة أو ضبابية أو مضغوطة؛ وإذا أخطأت في التنسيق، فسيبدو العنوان كشريحة غير مقروءة على صورة مزدحمة. هذه الأداة تُنشئ الصورة بدقة الهدف الفعلية باستخدام Canvas 2D API، لذا فما تراه في المعاينة هو بالضبط شبكة البكسلات التي ستُصدَّر في ملف PNG.
اختر خلفية — لونًا صلبًا، أو تدرجًا خطيًا ثنائي اللونين تختارهما، أو صورة مرفوعة تُقص لتملأ الإطار 1200×630 كاملًا بنفس طريقة background-size: cover في CSS، دون أن تتمدد بشكل غير متناسب. اكتب عنوانًا وعنوانًا فرعيًا اختياريًا: كلاهما يُقاس حرفًا بحرف وفقًا لمقاييس الخط الخاصة باللوحة، لذا فإن العنوان الطويل جدًا ليتسع لسطر واحد يلتف إلى سطر ثانٍ أو ثالث عند حد كلمة حقيقي بدلاً من أن يفيض عن الحافة أو يُقتطع بشكل غير مرئي. اختر محاذاة للوسط أو لليسار، واختر لون نص واضح مقابل خلفيتك، وأسقط شعارًا اختياريًا في الزاوية بحجم ثابت ومقروء.
أسفل اللوحة، أربع بطاقات صغيرة تُقرّب كيف تبدو الصورة النهائية بعد أن تُغلّفها كل منصة بإطارها الخاص: بطاقة Twitter/X تُظهر فقط النطاق وعنوانًا عريضًا تحت الصورة دون سطر وصف، Facebook تضيف شريط نطاق بأحرف كبيرة فوق كتلة عنوان ووصف، LinkedIn تضع النطاق تحت العنوان دون أي وصف على الإطلاق، ومُضمّن Discord يضع النطاق والعنوان والوصف فوق الصورة بسمته الداكن الخاص. هذه محاكاة تصميمية لأغراض التخطيط فقط — مُوضّحة بوضوح على أنها توضيحية، مع سطر نطاق تكتبه بنفسك — وليست جلبًا حيًا أو لقطة شاشة للمنصات الفعلية، لأن مشاركة الرابط والسماح لمستكشف كل منصة بقراءة وسوم og:image و og:title الحقيقية في صفحتك هو ما يُنتج البطاقة الحية فعليًا.
كل شيء يُنشأ محليًا على عنصر HTML canvas في متصفحك: العنوان، والعنوان الفرعي، والخلفية المرفوعة، والشعار لا تغادر جهازك أبدًا، والملف المُصدَّر هو PNG نظيف باستخدام canvas.toBlob() يحتوي فقط على ما صممته — لا حدود محاكاة، ولا أشرطة متصفح وهمية، ولا شعارات منصات تُدمج في الصورة المُنزَّلة. إذا احتجت لاحقًا إلى تغيير حجم صورة PNG المُصدَّرة أو تحويلها، فإن أداتَيْ تغيير حجم الصور وتحويل الصور في هذا الموقع تُكمِلان ما تبدأ به هذه الأداة.