إنشاء وسوم Twitter Card لمعاينات المشاركة
اكتب عنوانًا مثل Build & Ship لتحصل على وسوم Twitter Card جاهزة للصق في قسم head من صفحتك، مع كتابة علامة & بالشكل الآمن &. اختر البطاقة الملخصة الصغيرة أو ذات الصورة الكبيرة، ولا تُضاف وسوم فارغة. مجاني في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
تعمل هذه الأداة داخل متصفحك — مجانًا، ولا تُرسل بياناتك إلى أي خادم
أنشئ مجموعة كاملة من وسوم ميتا Twitter Card من دون حفظ أسماء الخصائص أو القلق من المحارف غير الآمنة داخل سمات HTML. اختر نوع بطاقة مدعومًا، وأدخل عنوان المعاينة، وأضف وصفًا ورابطًا مطلقًا للصورة عند الحاجة. يعيد المولد سجلات منظمة للوسوم وكتلة HTML جاهزة للصق. تعمل الخوارزمية بصورة حتمية ومن دون طلبات شبكية، لذلك تنتج المدخلات نفسها الترميز نفسه دائمًا، ولا تُرسل بياناتك إلى أي خدمة خارجية لمعاينة المشاركات.
اختر التنسيق الملائم لشكل المعاينة
ابدأ بتحديد المظهر الذي تريده عند مشاركة الرابط. بطاقة summary هي الخيار المدمج، وتناسب المقالات والوثائق وصفحات المنتجات وغيرها من الروابط التي ينبغي أن يظل فيها العنوان والوصف في الصدارة، بينما تؤدي الصورة دور صورة مصغرة مساندة. يدعم هذا المولد هذين التنسيقين العامين عن قصد لأن نوع البطاقة والعنوان والوصف والصورة تكفي لوصفهما وصفًا كاملًا.
تحتاج أنواع Twitter Card الأخرى إلى حقول إضافية لا يشملها هذا العقد. إذا أرسلت نوعًا غير مدعوم، تعيد الإمكانية خطأ إدخال محدد النوع بدل إنشاء ترميز ناقص بصمت. يجعل ذلك الأتمتة أكثر أمانًا، إذ لا يمكن لخطأ إملائي أو اختيار غير متوافق أن يمر بوصفه مجموعة وسوم تبدو معقولة لكنها لا تمثل البطاقة المقصودة.
وبذلك تكتشف مسارات النشر الآلية الخطأ عند التوليد لا بعد ظهور معاينة غير صحيحة.
قدّم محتوى آمنًا للاستخدام داخل HTML
العنوان إلزامي ويجب أن يحتوي نصًا يتجاوز المسافات البيضاء. أما الوصف والصورة فاختياريان؛ وعند عدم تقديم أحدهما يُحذف وسمه من النتيجة، ولا تملأ المخرجات الحقول الغائبة بوسوم فارغة أو قيم null. قد تعمل المسارات النسبية داخل موقعك، لكن برامج زحف الشبكات الاجتماعية تحتاج إلى عنوان تستطيع طلبه بصورة مستقلة، ولهذا يرفضها المولد.
يُرمّز النص ليصبح آمنًا داخل سمة HTML محاطة بعلامتي اقتباس مزدوجتين. تتحول علامة العطف وعلامات الاقتباس والأقواس الزاوية والفاصلة العليا إلى مراجع محارف، فيبقى النص المرئي كما هو من دون أن يستطيع كسر حدود السمة. تحتفظ سجلات الوسوم المنظمة بالقيم المطبّعة المقروءة، بينما تحتوي كتلة HTML على الصيغة المرمّزة المعدة للترميز.
يفيد هذا الفصل عندما يحتاج تطبيق إلى فحص بيانات الميتا أو حفظها بمعزل عن المقطع الذي يضعه داخل رأس المستند.
ثبّت الوسوم الناتجة وتحقق منها
انسخ أسطر HTML المعادة إلى عنصر head في الصفحة المراد مشاركتها. بعد النشر، افحص مصدر الصفحة من خلال رابط عام للتأكد من أن الخادم يرسل الوسوم فعلًا ضمن HTML الأولي. قد تعجز برامج الزحف عن رؤية كود العميل الذي يضيف بيانات الميتا بعد التحميل، كما لا يمكن جلب صورة خاصة أو محمية حتى لو كان رابطها صحيح البنية.
يتحقق المولد من بيانات الميتا التي تقدمها، لكنه لا يتصل بموقعك ولا ينزّل الصورة أو يقيس أبعادها أو يتنبأ بكيفية قص منصة اجتماعية للمعاينة. كذلك تتحكم المنصة التي تجلب الصفحة في التخزين المؤقت، ولذلك قد تبقى معاينة قديمة ظاهرة بعد تحديث الوسوم.
حالات الاستخدام
إضافة وسوم المشاركة إلى بناء موقع ثابت
أنشئ سجلات منظمة وHTML يمكن توقعهما لكل صفحة من دون خدمة شبكية أو قالب وسوم يحتاج إلى صيانة.
اكتشاف أنواع البطاقات غير المدعومة
ارفض الأنواع غير المتوافقة أو المكتوبة خطأ قبل وصول بيانات ميتا ناقصة إلى بيئة الإنتاج.
الأسئلة الشائعة
هل الصورة إلزامية؟
لا. عند حذف image لا يظهر twitter:image في النتيجة.
ماذا يحدث عند حذف الوصف؟
يُحذف وسم twitter:description بالكامل. ولا تنشئ النتيجة وسمًا فارغًا أو حقلًا بقيمة null.
هل تُرمّز علامات الاقتباس والعطف؟
نعم. تُرمّز المحارف القادرة على كسر سمة HTML في مخرجات HTML، بينما تحتفظ السجلات المنظمة بقيم مقروءة.
هل تتحقق الأداة من شكل البطاقة المنشورة؟
لا. فهي تنشئ بيانات الميتا المقدمة وتتحقق منها محليًا من دون جلب الصفحة أو فحص الصورة أو الاتصال بخدمة اجتماعية.
أي نوع بطاقة أختار؟
اختر البطاقة الملخصة حين يكون العنوان والوصف هما الأساس والصورة مجرد صورة مصغرة، كما في المقالات والوثائق وصفحات المنتجات. واختر الملخص بصورة كبيرة حين تحمل الصورة المعنى، كما في التقارير والإطلاقات ومعارض الأعمال والوصفات.
أين ألصق الوسوم التي أنشأتها؟
في قسم head من الصفحة التي ستُشارك. بعد النشر افتح مصدر الصفحة من عنوانها العام للتأكد، لأن الوسوم التي يضيفها سكربت بعد التحميل قد لا تراها برامج الزحف، والصورة المحمية لا يمكن جلبها.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/web/twitter-card-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}'const res = await fetch("https://api.kit.forhosting.com/web/twitter-card-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/twitter-card-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/twitter-card-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/twitter-card-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.twitter_card_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
timeout_sec | 30 |
max_crawl_pages | 25 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
اختر التنسيق الملائم لشكل المعاينة
أما summary_large_image فتمنح الصورة مساحة ووضوحًا أكبر، ولذلك تلائم التقارير التحريرية والإطلاقات ومعارض الأعمال والوصفات والصفحات التي يضيف تصميمها البصري سياقًا مهمًا.
قدّم محتوى آمنًا للاستخدام داخل HTML
عند تقديم صورة، يجب أن يكون عنوانها رابط HTTP أو HTTPS مطلقًا.
ثبّت الوسوم الناتجة وتحقق منها
احتفظ بوسم واحد لكل من twitter:card وtwitter:title، ثم أضف twitter:description وtwitter:image عند وجود القيم الاختيارية المقابلة. عند أتمتة النشر، تبلغ كلفة طلب API الواحد $0.002؛ أما نسخة المتصفح فتستخدم المنطق الحتمي نفسه محليًا.
حالات التكامل
إعداد بيانات الميتا لمقال جديد
حوّل عنوان المقال وملخصه ورابط صورته الرئيسية إلى كتلة summary_large_image جاهزة للصق.
أسئلة تقنية
ما أنواع Twitter Card المدعومة؟
يدعم المولد summary وsummary_large_image. ويعيد خطأ invalid_input لأي نوع آخر.
ما كلفة التوليد عبر API؟
يكلف كل طلب API مقدار $0.002. وتعمل نسخة المتصفح محليًا بالخوارزمية الحتمية نفسها.