2026-03-28

حجم صورة بطاقة تويتر وقائمة مراجعة المعاينة

اختر الحجم المناسب لصورة بطاقة Twitter، والبيانات التعريفية، وتصدير WebP، وعمليات التحقق من استكشاف الأخطاء وإصلاحها حتى يتم عرض الروابط المشتركة بشكل واضح على X والخلاصات الاجتماعية الأخرى.

حجم صورة بطاقة تويتر وقائمة مراجعة المعاينة

آخر تحديث: 28 يونيو 2026

صورة بطاقة Twitter هي صورة المعاينة التي تظهر عندما يقوم شخص ما بمشاركة عنوان URL على X. ويجب أن تكون كبيرة بما يكفي لتبدو واضحة، وصغيرة بما يكفي لجلبها برامج الزحف بسرعة، ويتم الإعلان عنها ببيانات وصفية تعمل حتى عندما يعود النظام الأساسي إلى علامات Open Graph.

يمنحك هذا الدليل قائمة مرجعية عملية للنشر: الأبعاد، والعلامات، وتنسيق الملف، وفحوصات CDN، وإصلاحات البطاقات التي ترفض التحديث.

إجابة سريعة: ما هي صورة بطاقة تويتر التي يجب عليك استخدامها؟

استخدم 1200 × 630 بكسل WebP أو JPEG لمعظم الروابط المشتركة، خاصة عندما تريد بطاقة صور كبيرة. احتفظ بالموضوع المهم بعيدًا عن الحواف، واجعل النص قابلاً للقراءة بحجم الصورة المصغرة، واستخدم عنوان URL HTTPS مطلقًا في كل منtwitter:imageوog:image.

بالنسبة إلى X، قم بتعيينtwitter:cardعلىsummary_large_imageعندما تكون الصورة هي الرسم الرئيسي. احتفظ بالملف بشكل مريح أقل من حدود صورة البطاقة الموثقة وتأكد من أن عنوان URL النهائي لـ CDN يُرجع HTTP 200 قبل النشر.

الإعداد الموثوق به بسيط:

  • تصدير صورة بحجم 1200 × 630 للمعاينة.
  • استخدم عنوان URL النهائي لـ CDN، وليس المسار النسبي.
  • إضافةtwitter:titleوtwitter:descriptionوtwitter:image.
  • أضف المطابقةog:titleوog:descriptionوog:imageكبديل.
  • اختبر عنوان URL المباشر بعد النشر، ثم قم بتحديث ذاكرة التخزين المؤقت للنظام الأساسي إذا استمرت الصورة القديمة في الظهور.

ما هي صورة بطاقة تويتر؟

صورة بطاقة Twitter هي عنوان URL للصورة المُعلن عنه في البيانات التعريفية للصفحة حتى يتمكن X من إنشاء معاينة غنية. إنها ليست نفس الصورة الأولى في مقالتك. يقرأ الزاحف رأس HTML، ويبحث عن علامات البطاقة، ويجلب الصورة، ويخزن معاينة مخبأة لعنوان URL المشترك.

لا تزال أمثلة ترميز البطاقة الخاصة بـ X تصف أنواع بطاقاتsummaryوsummary_large_imageفي وثائق وأمثلة المطورين الخاصة بها. الفرق العملي هو حجم المعاينة:summary_large_imageيمنح الصورة مساحة كافية لحمل مدونة أو منتج أو أداة أو رابط حملة.

يعد Open Graph مهمًا لأن العديد من الأنظمة الأساسية الاجتماعية وتطبيقات الدردشة وأنظمة معاينة الارتباط تقرأog:image. يعرّف بروتوكول Open Graphog:titleوog:typeوog:imageوog:urlكبيانات وصفية أساسية. استخدم علامات Twitter/X وعلامات Open Graph حتى لا يؤدي وجود محلل واحد مفقود إلى كسر كل معاينة.

حقل البيانات الوصفية استخدامه ل ملاحظة عملية
twitter:card يختار تخطيط ملخص أو صورة كبيرة استخدمsummary_large_imageلمعظم مشاركات المقالات والصفحات المقصودة
twitter:image صورة معاينة X الأساسية استخدم عنوان URL المطلق لصورة HTTPS
og:image صورة المعاينة الاحتياطية لتطبيقات التواصل الاجتماعي والمراسلة عادةً ما تتطابق معtwitter:imageما لم تكن المنصة بحاجة إلى اقتصاص مختلف
og:url عنوان URL الأساسي للصفحة المشتركة مطابقة عنوان URL للصفحة الأساسية العامة
العلاماتtitleوdescription المتصفح وسياق البحث اجعلها متسقة مع البيانات الوصفية الاجتماعية

بالنسبة إلى عمل البيانات الوصفية للصور ذات الصلة، قم بإقران ذلك بدليل Image Optimization for SEO وقائمة التحقق الكاملة لتحسين الصورة.

ما الحجم الذي يجب أن تكون عليه صورة بطاقة تويتر؟

ابدأ بـ 1200 × 630 بكسل. وهو يطابق اقتصاص المعاينة الاجتماعية الشائع بنسبة 1.91:1، ويمنح الأنظمة الأساسية وحدات بكسل كافية لتقليص حجمها بشكل واضح، ويعمل بشكل جيد عند إعادة استخدام نفس الصورة مثلog:image.

تجنب تصميم بطاقة تعمل بالحجم الكامل فقط. تقوم الخلاصات بقص النص وتغيير حجمه ووضعه حول الصورة. غالبًا ما تبدو التسميات الصغيرة ولقطات الشاشة الرفيعة لواجهة المستخدم والخلفيات المزدحمة جيدة في أداة التصميم ولكنها تصبح غير قابلة للقراءة في بطاقة المشاركة الفعلية.

رسم يوضح صورة بطاقة Twitter مقاس 1200 × 630 مع WebP وحجم الملف وHTTPS وملاحظات التصميم الآمنة على الحافة

حالة الاستخدام الصورة الموصى بها لماذا يعمل انتبه ل
مشاركة مدونة أو دليل 1200 × 630 ويب اقتصاص معاينة كبير، وتوافق واسع مع النظام الأساسي نص عنوان صغير
إطلاق المنتج 1200 × 630 WebP أو JPEG يظل المنتج مرئيًا بعد تصغير الحجم قص حافة المنتج
صفحة الأداة رسم يعتمد على لقطة شاشة مقاس 1200 × 630 يوضح ما تفعله الأداة قبل النقر نص واجهة المستخدم صغير جدًا بحيث لا يمكن قراءته
صفحة الشعار فقط 1200 × 630 مع حشوة كبيرة يحافظ على الشعار من الشعور بالضيق معاينة فارغة المظهر
حملة صديقة للمربع متغير 1200 × 1200 منفصل عند الحاجة مفيد للمنصات ذات المحاصيل المربعة لا تعيد استخدامها بشكل أعمى كبطاقة X

استخدم مقالة Best Image Resizer for Social Media عندما تحتاج إلى اقتصاصات متعددة للنظام الأساسي، واستخدم Facebook Ad Image Sizes عندما يغذي نفس التصميم أيضًا وسائل التواصل الاجتماعي المدفوعة.

كيف تكتب البيانات الوصفية؟

ضع العلامات في ملف HTML المقدم من الخادم، داخل الصفحة<head>. لا تعتمد على JavaScript من جانب العميل لإدخال العلامات الاجتماعية بعد التحميل. قد لا تقوم برامج زحف معاينة الارتباط بتنفيذ تطبيقك بنفس الطريقة التي يعمل بها المتصفح.

مخطط بيانات وصفية مكون من ثلاثة صفوف يعرض بطاقة twitter، وصورة twitter، وعلامات صور الرسم البياني المفتوحة للمعاينات الاجتماعية

استخدم هذا النمط لمقال عادي أو صفحة أداة:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

احتفظ بهذه الشيكات في مراجعة الكود:

  1. عنوان URL للصورة مطلق ويبدأ بـ https://.
  2. عنوان URL للصورة هو عنوان URL النهائي لـ CDN، وليس مسار إنشاء محلي.
  3. يصف عنوان الصفحة والعنوان الاجتماعي نفس الصفحة.
  4. الوصف الاجتماعي قصير بما يكفي لمسحه ضوئيًا في المعاينة.
  5. يشير عنوان URL الأساسي وog:urlإلى نفس الصفحة العامة.
  6. لا يتم حظر صورة البطاقة بواسطة قواعدrobots.txtأو المصادقة أو الارتباط السريع.
  7. تتضمن استجابة الخادم نوع محتوى الصورة الصحيح.

توصي إرشادات تحسين محركات البحث للصور من Google أيضًا بسياق وصفي للصور وعناوين URL للصور القابلة للزحف والتنسيقات المدعومة في أفضل ممارسات صور Google. هذه النصيحة ليست خاصة بتويتر، ولكنها نفس نظام النشر: اجعل الصورة المهمة سهلة على برامج الزحف لاكتشافها وجلبها وفهمها.

هل يجب عليك استخدام WebP أو JPEG أو PNG لصورة بطاقة Twitter؟

استخدم WebP عندما يدعمه نظامك الأساسي وأهداف المعاينة، خاصة بالنسبة لرسومات المقالات ومعاينات المنتج ولقطات الشاشة ذات الألوان المختلطة. استخدم JPEG للتوافق الواسع أو البطاقات المثقلة بالصور. استخدم PNG فقط عندما تكون الشفافية أو الحواف غير المفقودة مهمة بدرجة كافية لتبرير الملف الأكبر حجمًا.

يوضح دليل نوع ملف الصورة الخاص بشركة MDN أن WebP يدعم الضغط بدون فقد أو بدون فقدان. تعتبر هذه المرونة مفيدة للبطاقات الاجتماعية لأن الصورة الواحدة يمكن أن تحتوي على نسيج الصورة ولون العلامة التجارية المسطح ونوعها.

بالنسبة لهذه المقالة، قمت بتشفير واختبار أربعة رسومات WebP مقاس 1200 × 630 محليًا باستخدام ImageMagick وفحصت أحجام المخرجات قبل النشر. لقد هبطت ما بين 14 كيلو بايت و 28 كيلو بايت لأنها عبارة عن رسومات نظيفة ذات نسيج محدود. عادةً ما تكون صور المنتج الحقيقية ولقطات الشاشة التفصيلية أكبر.

شكل مناسبا جيدا خطر نموذجي نقطة انطلاق عملية
ويب بي معظم رسومات المعاينة الاجتماعية وبطاقات الصور المختلطة قد لا تتمكن بعض الأدوات القديمة من معاينة المسودات المحلية تصدير WebP المفقود بجودة تتراوح بين 80 و85
جبيغ معاينات كثيفة الصور واحتياجات التوافق المحافظة لا توجد شفافية، من الممكن وجود رنين حول النص تصدير حول الجودة 82-88
PNG الشعارات والشفافية والرسومات المسطحة الحادة حجم ملف كبير استخدم فقط عندما يكون من الضروري عدم فقدانها
AVIF صور حديثة صغيرة جدا يمكن أن تكون معاينة النظام البيئي أقل قابلية للتنبؤ بها اختبرها بعناية قبل استخدامها كصورة البطاقة الوحيدة

إذا كانت صورة البطاقة هي أيضًا بطل الصفحة، فاتبع دليل Image Compression Ratio حتى تبدو المعاينة نظيفة دون جعل الصفحة ثقيلة. إذا كنت تقارن التنسيقات الحديثة، فاقرأ مقارنة AVIF vs WebP.

كيف تجعل الصورة قابلة للقراءة في الخلاصة؟

صمم البطاقة لأصغر مكان يمكن رؤيته فيه، وليس اللوحة الفنية في المحرر الخاص بك. يمكن أن تكون معاينة الموجز أضيق من الأصلية، وتتنافس واجهة المستخدم المحيطة على جذب الانتباه.

استخدم قواعد التصميم هذه:

  • ضع الموضوع الرئيسي أو العنوان الرئيسي في المنطقة الآمنة بالمركز.
  • اترك الحشو حول الوجوه والمنتجات والشعارات والنص.
  • استخدم رسالة قصيرة واحدة، وليس عنوانًا كاملاً للمقال بالإضافة إلى عنوان فرعي وشارة.
  • التحقق من الصورة بعرض 600 بكسل قبل الموافقة عليها.
  • تجنب لقطات الشاشة التي تحتوي على تسميات صغيرة ما لم تكن واجهة المستخدم نفسها هي القصة.
  • حافظ على التباين عاليًا بما يكفي لإلقاء نظرة سريعة.
  • لا تستخدم صورة مخزنة عامة عندما تكون الصفحة حول أداة أو منتج أو سير عمل فني.

يجب أن تجيب صورة البطاقة المفيدة على "ما موضوع هذا الرابط؟" قبل أن يدرس القارئ العنوان. بالنسبة لمنشور مدونة، قد يكون ذلك رسمًا تخطيطيًا بسيطًا. بالنسبة لدليل التجارة الإلكترونية، قد يكون مثالاً لصورة المنتج. بالنسبة للمحول أو أداة تغيير الحجم، قد تكون هذه لقطة شاشة لأداة تم اقتصاصها.

لماذا لا تظهر صورة بطاقة تويتر الخاصة بي؟

تأتي معظم صور البطاقات المعطلة نتيجة لواحد من أربعة أسباب: عدم تمكن الزاحف من جلب عنوان URL، أو أن البيانات التعريفية تشير إلى صورة خاطئة، أو أن النظام الأساسي قد قام بتخزين نسخة قديمة مؤقتًا، أو أن الصورة صالحة من الناحية الفنية ولكن مرشح المعاينة ضعيف.

استكشاف الأخطاء وإصلاحها في رسم قائمة التحقق الذي يعرض عناوين URL للصور النسبية، وكتل الزاحف، والبطاقات المخزنة مؤقتًا التي لا معنى لها، والملفات كبيرة الحجم

قم بتشغيل هذا التسلسل قبل تغيير التصميم:

  1. افتح مصدر الصفحة النهائية وتأكد من وجود علامةtwitter:image.
  2. انسخ عنوان URL الدقيق للصورة من ملف HTML المعروض.
  3. قم بتشغيلcurl -Iعلى عنوان URL للصورة وقم بتأكيد HTTP 200.
  4. تأكد من أن نوع محتوى الاستجابة هو نوع صورة.
  5. تأكد من عدم إعادة توجيه عنوان URL للصورة عبر جدار المصادقة.
  6. تأكد من أن ملف الصورة ليس كبيرًا.
  7. تأكد من أنrobots.txtلا يحجب الصورة أو الصفحة.
  8. قم بتغيير اسم ملف الصورة عندما تحتاج إلى فرض ذاكرة تخزين مؤقت جديدة.
  9. أعد اختبار الصفحة المنشورة، وليس عنوان URL للمعاينة المحلية.
  10. تحقق من علامات Open Graph إذا كانت البطاقة تعمل في تطبيق واحد دون آخر.
أعراض السبب المحتمل يصلح
لا تظهر أي صورة twitter:imageمفقود أو نسبي استخدم عنوان URL الكامل لـ HTTPS CDN
تظهر الصورة القديمة معاينة مخبأة انشر اسم ملف جديدًا وقم بتحديث عنوان URL المشترك
تظهر الصورة مقصوصة بشكل سيء تركيبة غير آمنة إعادة التصدير بمزيد من الحشو وموضوع مركزي
عنوان المعاينة خاطئ عدم تطابق البيانات التعريفية قم بمحاذاةtwitter:titleوog:titleوعنوان الصفحة
يعمل محليا ولكن لا يعيش المسار المحلي أو المصادقة أو CDN المحظور اختبر عنوان URL للإنتاج باستخدامcurl -I

يكون دليل اقتصاص الصورة عبر الإنترنت مفيدًا عندما يحتاج الموضوع إلى اقتصاص أكثر أمانًا، ويغطي مغير نسبة أبعاد الصورة تغيير التصميم الإبداعي من مربع أو عمودي إلى إطار معاينة اجتماعية.

قائمة مرجعية للنشر المسبق

قبل أن تقوم بشحن صفحة تعتمد على المشاركة الاجتماعية، قم بمراجعة الصورة والبيانات التعريفية معًا. سيستمر فشل ملف WebP المثالي إذا كانت العلامة تشير إلى عنوان URL الخاص بالأمس. ستظل البيانات الوصفية المثالية مخيبة للآمال إذا كانت الصورة غير قابلة للقراءة في الخلاصة.

استخدم قائمة المراجعة النهائية هذه:

  • الصورة الأمامية أو صورة CMS هي نفس الصورة المستخدمة للبيانات الوصفية الاجتماعية.
  • الصورة فريدة للصفحة أو ذات صلة واضحة بالصفحة.
  • عنوان URL للصورة هو HTTPS وعام.
  • يتطابق امتداد الملف مع تنسيق الاستجابة الفعلي.
  • تقوم الصورة بإرجاع HTTP 200 من CDN.
  • العنوان والوصف غير محشوين بالكلمات الرئيسية.
  • تحتوي صورة المعاينة على نص بديل وصفي حيث تظهر في نص المقالة.
  • يتم فحص الصورة بصريًا بأحجام معاينة سطح المكتب والجوال.
  • تحتوي الصفحة على عنوان URL أساسي ثابت.
  • يتم إعادة اختبار البطاقة بعد النشر.

صورة بطاقة Twitter الجيدة هي نظام نشر صغير: بيانات تعريفية واضحة ومستقرة وعنوان URL سريع لـ CDN وفحص الجلب النهائي. بمجرد وضع هذه الأجزاء في مكانها الصحيح، تقل احتمالية توقف المعاينة أثناء الإطلاق أو تحديث المحتوى.

استخدم الأدوات المجانية أثناء متابعة الدليل.

ضغط صورةإزالة خلفية

تابع القراءة

صورة غلاف كيفية تغيير حجم الصور دفعة واحدة: مقارنة بين الأدوات والسكريبتات المجانية

Tue Mar 03 2026 19:00:00 GMT-0500 (北美东部标准时间)

كيفية تغيير حجم الصور دفعة واحدة: مقارنة بين الأدوات والسكريبتات المجانية

قم بتغيير حجم مئات الصور دفعة واحدة باستخدام الأدوات المجانية عبر الإنترنت، و ImageMagick، و XnConvert، وسكريبتات Python. يتضمن الدليل أوامر للنسخ واللصق، وأحجامًا محددة مسبقًا، وعملية عمل عملية ومفصلة.