صورة معاينة رابطك في واتساب
أداة من KIT تولّد صورة معاينة Open Graph لصفحتك: الصورة التي تظهر عند لصق الرابط في محادثة واتساب أو منشور لينكدإن. انطلاقًا من قالب يحمل عنوانًا وخلفية وشعارًا، تحصل على ملف PNG جاهز بمقاس 1200×630، بدل رابط يظهر بإطار فارغ دون صورة.
شغّلها أونلاين
شغّل هذه المهمة على خوادمنا باستخدام حسابك. الأدوات المجانية تعمل داخل متصفحك، أما هذه فتُخصم من رصيدك في KIT حسب السعر الموضّح أعلاه.
الصورة التي تظهر خلف الرابط
حين تلصق رابط صفحة في واتساب أو لينكدإن أو فيسبوك، يظهر غالبًا مستطيل يحمل صورة وعنوانًا ووصفًا قصيرًا يلخص المحتوى للقارئ قبل فتحه. هذه الصورة هي معاينة Open Graph التي تحددها الصفحة عبر وسم og:image في رأسها البرمجي. إن لم تحددها الصفحة، يظهر الرابط بإطار فارغ أو صورة عشوائية من محتوى الصفحة، بلا سيطرة منك على شكل الرابط عند مشاركته مع أي طرف آخر يستقبله.
المقاس الصحيح: 1200×630
المقاس المعتمد للمعاينة 1200×630 بكسل، وهي النسبة التي تقصّها منصات التواصل بدقة على الجوال والحاسوب معًا دون قطع تفاصيل مهمة أو تشويه معالم الصورة الأساسية. تولّد الأداة هذا المقاس مباشرة دون حاجة لحساب النسبة يدويًا بنفسك، فتتجنب صورًا مقصوصة خطأً أو ممطوطة الشكل حين تظهر في محادثة واتساب أو موجز أخبار منصة تواصل مختلفة تمامًا عن الأخرى في كل مرة.
من قالب واحد إلى معاينات كثيرة
تنطلق من قالب يحمل خلفية وشعارًا ومساحة مخصصة للعنوان، وتغيّر فقط النص لكل صفحة على حدة: عنوان المقال، اسم المنتج، تاريخ الفعالية القادمة على وجه التحديد. هكذا تحمل كل صور المعاينة في موقعك الطابع البصري نفسه بمحتوى مختلف لكل صفحة، دون تصميم كل صورة يدويًا في برنامج منفصل في كل مرة تنشر فيها صفحة جديدة على الموقع بالكامل من الصفر.
التركيب والسعر والقنوات
ترفع ملف PNG الناتج إلى موقعك وتضيف وسم og:image في رأس الصفحة، إلى جانب العنوان والوصف المختصر المصاحب له. تُنشأ الصورة برسم القالب داخل متصفح يعمل على خوادمنا، ولهذا سعرها $0.040 للطلب الواحد إضافة إلى $0.001 لكل صورة تُنشأ فعليًا. متاحة من الموقع لصفحة واحدة أو عبر الـAPI لعدد كبير من الصفحات دفعة واحدة بانتظام مستمر كلما نشرت محتوى جديدًا.
حالات الاستخدام
مدونة بمعاينة لكل مقال
تريد مدونة يكتب فيها محمد الحربي أن يظهر كل مقال بعنوانه الخاص على خلفية موحدة عند مشاركته. تولَّد صورة المعاينة لكل مقال من قالب واحد، فيبدو كل رابط مشارك أنيقًا في واتساب.
صفحات منتج لمتجر إلكتروني
يشارك متجر يديره عبدالله المنصوري روابط منتجاته عبر واتساب باستمرار. بمعاينة خاصة لكل منتج، تُظهر الرسالة اسم المنتج وصورته مباشرة بدل إطار مجهول.
صورة إعلان فعالية
تحتاج فاطمة الزهراني معاينة لصفحة فعالية تتضمن العنوان والتاريخ. بالمقاس الصحيح، يُظهر الرابط المشارك في مجموعات واتساب المحتوى فورًا دون فتح الصفحة.
الأسئلة الشائعة
لماذا لا تظهر صورة عند مشاركة رابط موقعي؟
غالبًا لأن الصفحة لا تحدد صورة معاينة عبر وسم og:image أو تستخدم مقاسًا خاطئًا. أنشئ المعاينة المناسبة وأضف هذا الوسم، فتختفي مشكلة الإطار الفارغ.
ما المقاس الذي يجب أن تكون عليه المعاينة؟
المقاس المعتمد 1200×630 بكسل، وهي النسبة التي تقصّها منصات التواصل بدقة على الجوال والحاسوب. تولّد الأداة هذا المقاس مباشرة.
كم تكلفة إنشاء صورة معاينة واحدة؟
$0.040 للطلب الواحد إضافة إلى $0.001 لكل صورة تُنشأ، لأن الصورة تُرسم من قالب داخل متصفح يعمل على خوادمنا.
هل يبقى القالب أو النصوص التي أرسلها محفوظة لديكم؟
تُعالج لإنشاء الصورة فقط ثم تُحذف من خوادمنا مباشرة، ولا نحتفظ بها لأي استخدام آخر.
غيّرت الصورة لكن منصة التواصل ما زالت تعرض النسخة القديمة، لماذا؟
منصات التواصل تخزّن معاينة الرابط بعد أول مشاهدة لها. بعد أي تغيير، تحتاج غالبًا لمطالبة المنصة بإعادة قراءة الرابط عبر أداة المطورين الخاصة بها حتى تحدّث النسخة المخزَّنة لديها.
هل يمكن إنشاء المعاينة تلقائيًا لكل صفحة جديدة؟
نعم، عبر الـAPI تولّد معاينة كل مقال أو منتج فور نشره، مع تغيير النص فقط والحفاظ على النمط البصري نفسه.
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/image/og \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/og", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/og",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/og", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/og", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"image": "https://ejemplo.com/imagen.jpg"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.og",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_mb | 15 |
max_megapixels | 12 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
422 | task_failed | لم تنجح معالجة المهمة، ولن تُحتسب عليك؛ أعد المحاولة أو راسلنا مباشرة. |