مولّد وسوم Open Graph وميتا
أنشئ وسوم Open Graph وبطاقات Twitter ووسوم SEO مع معاينة حية على Google وFacebook وX. مجانية 100% وداخل المتصفح، بدون تسجيل — انسخ الكود والصقه.
الاستيراد من <head> موجود (يُحلَّل محليًا، لا يُرفع شيء)
ما وسوم ميتا وOpen Graph؟
وسوم ميتا هي مقتطفات HTML في <head> صفحتك تصف الصفحة للمتصفحات ومحركات البحث والمنصّات الاجتماعية. وسوم SEO الكلاسيكية هي <title> ووصف ميتا ورابط canonical. أما وسوم Open Graph (og:title وog:type وog:image وog:url وما شابهها) فهي بروتوكول، أصله من Facebook، يتحكم في العنوان والوصف والصورة الظاهرة عند مشاركة رابطك — وتقرؤها كل منصّة تقريبًا، بما فيها LinkedIn وSlack وDiscord وWhatsApp وPinterest وTelegram.
يستخدم Twitter/X وسوم twitter:card الخاصة به لكنه يرجع إلى وسوم Open Graph عند غيابها، فمجموعة جيدة من وسوم OG إضافةً إلى قيمة twitter:card واحدة تغطّي كل شبكة. يكتب هذا المولّد كل هذه الوسوم، ويضيف بيانات JSON-LD المُهيكلة الاختيارية، ويعاين النتيجة حيًا — فلا تضطر أبدًا إلى كتابتها يدويًا أو تخمين شكل المشاركة.
مواصفات الصور والوسوم حسب المنصّة
Open Graph (Facebook وLinkedIn)
يقرأ كلاهما og:title وog:description وog:image وog:url. الصورة الموصى بها 1200×630 (1.91:1). يخزّن Facebook مؤقتًا نحو 30 يومًا وLinkedIn نحو 7 أيام — أعِد الاستخراج عبر أداتَي التصحيح لديهما بعد النشر.
بطاقة X (Twitter)
twitter:card مطلوب (summary_large_image أو summary). يرجع X إلى og:* في البقية. تعمل صورة 1200×630 واحدة لكلٍّ من OG وX؛ والصور دون 300×157 تُخفّض البطاقة الكبيرة إلى صغيرة.
Slack وDiscord
يقرأ Slack بطاقة Twitter ثم Open Graph ويمكنه عرض حقلين إضافيين عبر twitter:label/data. ويقرأ Discord وسوم Open Graph ويستخدم على نحو فريد theme-color لشريط لون التضمين.
WhatsApp وTelegram
يحتاج WhatsApp إلى og:title وog:image مع وضع البيانات الوصفية قرب أعلى HTML؛ ويقرأ Telegram وسوم Open Graph ويصيّر بموثوقية من صور JPEG أو PNG فقط.
Pinterest Rich Pins
يقرأ Pinterest وسوم Open Graph أو Schema.org. يحتاج Article Rich Pin إلى og:type=article إضافةً إلى article:published_time وarticle:author — وكلها تُولَّد هنا عند اختيار النوع article.
مقتطف بحث Google
تقيس معاينة SERP الحية للحاسوب والجوال عنوانك ووصفك بالبكسل — لا بعدد الأحرف فقط — فترى خطر الاقتطاع قبل Google.
أمثلة على وسوم ميتا
الصفحة الرئيسية لموقع ويب
Title: Acme — Ship faster Description: The all-in-one platform for modern teams. URL: https://acme.com Image: https://acme.com/og/home.png (1200×630)
<title>Acme — Ship faster</title> <meta name="description" content="The all-in-one platform for modern teams."> <link rel="canonical" href="https://acme.com"> <meta property="og:title" content="Acme — Ship faster"> <meta property="og:type" content="website"> <meta property="og:image" content="https://acme.com/og/home.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:url" content="https://acme.com"> <meta name="twitter:card" content="summary_large_image">
لا تحتاج الصفحة الرئيسية سوى وسوم Open Graph الأربعة المطلوبة إضافةً إلى عنوان ووصف ورابط canonical. ولأن أبعاد الصورة 1200×630، يُملأ العرض والارتفاع تلقائيًا، فتظهر أول مشاركة على Facebook فورًا بدل أن تكون فارغة.
مقالة مدوّنة (مع article:* + JSON-LD)
og:type: article Title: The Complete Guide to Open Graph Tags Author: Ada Lovelace Published: 2026-07-15
<meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script> اختيار النوع article يفتح خاصيتَي article:published_time وarticle:author ويولّد بيانات Article JSON-LD مطابقة، فتحصل محركات البحث وPinterest Rich Pins على بيانات مُهيكلة مجانًا.
Twitter/X يرث Open Graph
twitter:card: summary_large_image Inherit title/description/image from OG: on
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@acme">
يقرأ X وسوم Open Graph لديك عند غياب وسم twitter:* المطابق، لذا تحتاج فقط إلى twitter:card. ولا يُصدر المولّد أبدًا وسم twitter:image فارغًا، وهو ما قد يُعطّل ذلك الرجوع الاحتياطي.
كيف تضيف وسوم Open Graph إلى موقعك
- 1
أدخل العنوان والوصف والرابط
اكتب عنوان صفحتك ووصف ميتا ورابط canonical. يُظهر مقياس البكسل ما إذا كانت تتّسع في مقتطف بحث Google.
- 2
أضِف og:image واختر النوع
الصق رابط صورة 1200×630 واختر website أو article أو product أو profile — فتظهر حقول Open Graph المطابقة وJSON-LD تلقائيًا.
- 3
تحقق من المعاينات الحية
بدّل بين تبويبات Google وFacebook وX وLinkedIn وSlack وDiscord لترى بالضبط كيف سيبدو رابطك قبل نشره.
- 4
انسخ داخل
انسخ كتلة الوسوم الكاملة (أو قسمًا واحدًا) والصقها داخل <head> صفحة HTML لديك. تحقّق بعد النشر عبر أداتَي تصحيح Facebook وLinkedIn.
أخطاء Open Graph الشائعة
مسار og:image نسبي
مسار مثل /cover.png يعمل في محررك لكنه فارغ عند المشاركة، لأن الزواحف تحتاج إلى رابط مطلق.
<meta property="og:image" content="/cover.png">
<meta property="og:image" content="https://example.com/cover.png">
غياب og:url
بدون og:url canonical، تنقسم أعداد المشاركات عبر صيَغ URL مختلفة وقد تختار المنصّات العنوان الخطأ.
<!-- no og:url -->
<meta property="og:url" content="https://example.com/page">
صورة صغيرة جدًا أو بنسبة خاطئة
يتجاهل Facebook الصور دون 200×200 ويقصّ أي صورة بعيدة عن 1.91:1.
600×600 og:image
1200×630 og:image (1.91:1)
نسيان twitter:card
حتى مع وسوم Open Graph الكاملة، لا يصيّر X أي بطاقة ما لم يُضبط twitter:card.
<!-- OG only, no twitter:card -->
<meta name="twitter:card" content="summary_large_image">
twitter:image فارغ يُعطّل الرجوع الاحتياطي
twitter:image الفارغ يمنع X من الرجوع إلى og:image — احذف الوسم بدل تركه فارغًا.
<meta name="twitter:image" content="">
<!-- omit it; X uses og:image -->
وضع charset متأخرًا جدًا
يجب أن يظهر إعلان charset ضمن أول 1024 بايت من المستند وإلا جرى تجاهله.
<meta charset> after many tags
<meta charset="utf-8"> first in <head>
حالات استخدام شائعة
- إطلاق صفحة هبوط
- ولّد كتلة head الكاملة لصفحة تسويقية جديدة كي تبدو أنيقة لحظة مشاركة أحدهم الرابطَ على X أو LinkedIn أو Slack.
- معاينات المدوّنات والمقالات
- أضِف article:published_time وarticle:author وArticle JSON-LD كي تتأهّل المنشورات لـPinterest Rich Pins وبطاقات اجتماعية غنية.
- إصلاح مشاركة معطّلة
- استورد وسومك الحالية، والتقط og:image المفقودة أو البُعد الخطأ في لوحة الفحوص، وأصلحها، ثم أعِد الاستخراج عبر روابط أداة التصحيح.
- مقتطفات head لأطر العمل
- انسخ مجموعة وسوم نظيفة وصحيحة لإدراجها في موقع ثابت أو قالب CMS أو جزء head مُصيَّر على الخادم.
كيف يعمل المولّد
- معاينة حية داخل المتصفح
- تُصيَّر كل بطاقة من القيم التي تكتبها، لا بجلب رابطك أبدًا. وهذا يبقي المعاينات فورية وخاصة، وهو الطريقة الصادقة الوحيدة للمعاينة قبل نشر الصفحة.
- مقياس SERP دقيق بالبكسل
- يقتطع Google العناوين والأوصاف حسب عرض البكسل، لا عدد الأحرف. يقيس canvas نصك بالخط نفسه، فيتحوّل المقياس إلى الكهرماني تمامًا حين يُقتطع المقتطف.
- فحص الصور على جانب العميل
- يُحمَّل رابط og:image في كائن Image داخل متصفحك لقراءة عرضه وارتفاعه الحقيقيين، ثم يُقارَن بـ1200×630 ونسبة عرض البطاقة إلى ارتفاعها. وما زالت الصور عبر أصل مختلف (cross-origin) تُبلّغ عن حجمها، فيعمل الفحص دون أي رفع.
- مجموعة وسوم كاملة وحديثة
- SEO أساسي وOpen Graph وTwitter Card وJSON-LD في كتلة واحدة، مع إصدار charset أولًا كي يقع ضمن أول 1024 بايت. والوسوم القديمة مثل meta keywords معطّلة افتراضيًا.
أفضل ممارسات وسوم ميتا
- استخدم روابط HTTPS مطلقة
- يجب أن يكون og:image وog:url روابط https://… كاملة. المسارات النسبية تعمل محليًا لكنها تظهر فارغة حين يجلب الزاحف الصفحةَ الحية.
- اضبط دائمًا og:image:width وheight
- يتيح إعلان الأبعاد للمنصّات ترتيب البطاقة فورًا، فلا تكون أول مشاركة فارغة أثناء جلبها الصورة على نحو غير متزامن.
- أبقِ canonical وog:url متطابقين
- وجِّه كليهما إلى الرابط canonical الواحد كي لا تنقسم أعداد المشاركات وإشارات البحث عبر صيَغ مختلفة من URL.
- اكتب ضمن ميزانية البكسل
- استهدف عنوانًا نحو 50–60 حرفًا ووصفًا نحو 155 — لكن ثِق بمقياس البكسل، لأن Google يقيس العرض لا عدد الأحرف.
- صيّر الوسوم على الخادم
- زواحف Facebook وLinkedIn وWhatsApp وTelegram وDiscord لا تُشغّل JavaScript، لذا يجب أن تكون وسوم Open Graph في HTML الثابت أو المُصيَّر على الخادم.
الأسئلة الشائعة
ما هو مولّد وسوم ميتا؟
كيف أضيف وسوم Open Graph إلى موقعي؟
ما الحجم المناسب لصورة Open Graph؟
هل وسم twitter:card مطلوب؟
هل تساعد وسوم ميتا في تحسين محركات البحث؟
هل ترفع هذه الأداة محتواي أو صوري؟
هل يمكنني استيراد وسوم ميتا موجودة لديّ؟
لماذا لا تزال المعاينة المحدَّثة تُظهر الصورة القديمة على Facebook أو LinkedIn؟
أدوات ذات صلة
عرض جميع الأدوات →منشئ أوامر cURL وبنّاؤها
الويب وAPI
ابنِ أوامر curl في متصفحك — حدد الطريقة والترويسات والمصادقة والجسم، واحصل على أمر جاهز للنسخ فوراً. إعدادات مسبقة لـ Bearer وPOST JSON ورفع الملفات. مجاني وخاص وبلا تسجيل.
مولّد htpasswd — bcrypt وحماية الويب
الويب وAPI
أنشئ مدخلات htpasswd بـ bcrypt وApache MD5 (apr1) وSHA-1 والمزيد. احصل على إعداد Apache وnginx وDocker جاهز للصق. 100% في متصفحك — بدون رفع.
محوّل الأنظمة العددية — ثنائي وست عشري وعشري وثماني
أدوات التحويل
حوّل بين الأنظمة الثنائية والست عشرية والعشرية والثمانية وأي أساس من 2 إلى 36 فوراً — أداة مجانية أونلاين تعمل في متصفّحك. جرّبها الآن.
محوّل Base64 — ترميز وفك ترميز أونلاين
الترميز والتنسيق
رمّز وفك ترميز Base64 مجاناً أونلاين — محوّل فوري مع دعم UTF-8 والرموز التعبيرية. خصوصية 100% — يعمل في متصفّحك. جرّبه الآن.
محوّل Base64 إلى صورة أونلاين
الترميز والتنسيق
فك ترميز سلسلة Base64 أو عنوان URI للبيانات إلى صورة داخل متصفّحك. عاين واقرأ الأبعاد ونوع MIME ثم نزّل كـ PNG أو JPG أو GIF أو SVG. بلا رفع.
مولّد تجزئة bcrypt والتحقق منها
أدوات الأمن
ولّد تجزئات كلمات المرور بـ bcrypt وتحقق منها أونلاين — تكلفة قابلة للضبط، بادئات $2b$/$2a$/$2y$. 100% في متصفحك؛ كلمة مرورك لا تُرفع أبداً.