Menu
flag Ar iconالعربيةdown icon

معاينة Open Graph

أنشئ علامات Open Graph وTwitter Card مع معاينة اجتماعية مباشرة.

آخر تحديث

وضع التحرير — املأ النموذج، شاهد المعاينات، انسخ الوسوم.
حقول وسوم meta

موصى به 1200×630، أقل من 8 ميجابايت، رابط مطلق (https).

معاينة حيّة
Coddy — Learn to code by doing
CODDY.TECH

Learn to code by doing — Coddy

Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.

وسوم <head> المُولّدة
<title>Learn to code by doing — Coddy</title>
<meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<link rel="canonical" href="https://coddy.tech" />

<!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="Learn to code by doing — Coddy" />
<meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://coddy.tech" />
<meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta property="og:image:alt" content="Coddy — Learn to code by doing" />
<meta property="og:site_name" content="Coddy" />
<meta property="og:locale" content="en_US" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Learn to code by doing — Coddy" />
<meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta name="twitter:image:alt" content="Coddy — Learn to code by doing" />
<meta name="twitter:site" content="@coddy_tech" />

ما هو مولّد معاينة Open Graph؟

عندما تشارك رابطًا في أي تطبيق حديث — منشور أو رسالة مباشرة أو قناة Slack — تجلب المنصّة الرابط وتستخرج جزءًا صغيرًا من البيانات الوصفية لرسم *بطاقة مشاركة*: العنوان، الوصف، الصورة، واسم الموقع. هذه البيانات الوصفية لا تُستخرج من الصفحة المرئية، بل تأتي من مجموعة محدّدة من وسوم <meta> داخل عنصر <head>. بروتوكول Open Graph الذي ابتكره Facebook في 2010 يُعرّف معظمها. وX (تويتر سابقًا) تضيف بعض الإضافات ببادئة twitter:. وLinkedIn وDiscord وSlack وiMessage وWhatsApp وPinterest كلها تقرأ الوسوم نفسها مع اختلافات بسيطة.

ضبط هذه الوسوم بشكل صحيح عمل لمرّة واحدة لكل صفحة، لكن أثره كبير. صفحة بلا صورة Open Graph تبدو مكسورة عند مشاركتها. العنوان الطويل يُقطع في منتصف الكلمة. نسبة og:image الخاطئة تُحاط بشريطين أسودين في كل منصّة. هذه الأداة تتيح لك ضبط هذه القيم بمعاينات حيّة، فترى مشاكل الاقتطاع والقصّ *قبل* إطلاق الصفحة.

كل شيء يعمل محليًا. حالة النموذج والمعاينات وكود HTML المُولّد لا تغادر متصفحك — ألصق روابط ما قبل الإطلاق ونصوصًا غير منشورة دون قلق من تسرّب.

ما الذي ستتعلّمه أثناء الاستخدام

  • وسوم Open Graph تستخدم الخاصية property (<meta property="og:title">)، بينما وسوم SEO القياسية ووسوم Twitter Card تستخدم name (<meta name="description">، <meta name="twitter:card">).
  • يجب ضبط وسوم العنوان والوصف في *ثلاثة* أماكن إن كان حجم المرور من المشاركة يهمّك: SEO القياسي (title، meta description)، وOpen Graph (og:title، og:description)، وTwitter (twitter:title، twitter:description).
  • ينبغي أن يكون og:image بحجم 1200×630 ومُقدَّمًا عبر HTTPS ومُعطى رابطًا مطلقًا — المسارات النسبية تفشل عندما تجلب خوادم أخرى الصفحة.

كيف تحرّر وسوم Open Graph خطوة بخطوة

  1. اكتب عنوانًا قصيرًا ومحدّدًا

    استهدف 50 إلى 60 حرفًا. Facebook يقطع عند نحو 95 حرفًا، وX عند نحو 70. ابدأ بالقيمة لا بالعلامة التجارية — "كيف تنشر على Cloudflare Workers" أفضل من "مدوّنة Coddy · دليل النشر".

  2. اكتب وصفًا من جملة واحدة

    استهدف 120 إلى 155 حرفًا. معظم المنصّات تقطع عند نحو 200. استخدم جملًا كاملة — يظهر الوصف تحت العنوان في كل بطاقة، والشظايا المقطوعة تبدو غير مكتملة.

  3. اضبط الرابط الأساسي (canonical)

    استخدم الرابط المطلق https:// للصفحة نفسها، لا رابط تتبّع أو إعادة توجيه. زوّار Open Graph يتبعون og:url عند إزالة التكرار للمشاركات — والرابط الأساسي يبقي عدّاد المشاركات والمعاينات متّسقة.

  4. وفّر رابط صورة مطلقًا

    حجم 1200×630 هو الأمثل لبطاقات summary_large_image على X وللبطاقات القياسية على Facebook وLinkedIn. صيغة PNG أو JPEG، أقل من ~5 ميجابايت. استخدم دائمًا رابطًا مطلقًا — المسارات النسبية تفشل لأن زاحف الشبكة الاجتماعية يصل إلى الرابط من خادمه الخاص.

  5. انسخ الوسوم المُولّدة

    ألصق الكتلة من لوحة **وسوم <head> المُولّدة** داخل عنصر <head> في صفحتك. بعد النشر، تحقّق عبر مصحّح كل منصّة (Facebook Sharing Debugger وX Card Validator وLinkedIn Post Inspector) وأجبر إعادة الزحف إن غيّرت الصورة لاحقًا.

مرجع وسوم Open Graph وTwitter Card

الوسوم أدناه تغطّي كل ما تقرؤه المنصّات الاجتماعية اليوم. الوسوم المعلّمة بـ property= تنتمي إلى بروتوكول Open Graph، والمعلّمة بـ name= هي صيغ SEO القياسية / Twitter Card. مراجع المواصفات: Open Graph و بطاقات X.

الوسميستخدمهالموصى بهملاحظات
og:titleFB، LinkedIn، Slack، Discord50-60 حرفًايلجأ إلى <title> إن غاب — اضبطه على أيّ حال.
og:descriptionFB، LinkedIn، Slack، Discord120-155 حرفًايلجأ إلى meta description إن غاب.
og:imageكل المنصّات1200×630، أقل من 5 ميجابايت، HTTPS، رابط مطلقيجب أن يكون رابطًا مطلقًا — المسارات النسبية تفشل.
og:image:altإمكانية الوصولوصف الصورةيُستخدم بقارئات الشاشة وبعض المنصّات.
og:urlFB، LinkedInرابط https:// الأساسييُستخدم لإزالة تكرار المشاركات بين متغيّرات سلسلة الاستعلام.
og:typeFB، LinkedInwebsite أو articlearticle يفتح الوسوم article:published_time وarticle:author.
og:site_nameFB، Discordاسم العلامة التجاريةيظهر كنسب صغير فوق/تحت البطاقة.
twitter:cardXsummary_large_imagesummary لصورة مصغّرة مربّعة صغيرة، وsummary_large_image لتخطيط البانر.
twitter:titleXنفس og:titleX يلجأ إلى og:title إن غاب — اضبط الاثنين للأمان.
twitter:descriptionXنفس og:descriptionيلجأ إلى og:description إن غاب.
twitter:imageXنفس og:imageيلجأ إلى og:image إن غاب.
twitter:siteX@yourbrandحساب الناشر على X — يدفع بعض التحليلات.

أنماط Open Graph للتجربة

مقال (article) على مدوّنة

اضبط **og:type** على article، وأضِف **المؤلف** و**وقت النشر** في القسم الخاص بالمقالات، واستخدم صورة غلاف 1200×630. المعاينات تتحدّث لتُظهر شكل البطاقة على كل منصّة.

og:type=article يفتح وسوم المقالات (article:published_time وarticle:author) التي تستخدمها بعض المنصّات (Discord وLinkedIn) لإظهار النسب. Twitter يتجاهلها لكن لا يشتكي منها.

صفحة منتج أو هبوط

أبقِ **og:type** على website. استخدم اسم المنتج كعنوان، وعبارة قيمة من جملة واحدة كوصف، وصورة hero أو لقطة شاشة مقصوصة كصورة.

صفحات الهبوط لا تحتاج بيانات وصفية للمقالات. أكثر عنصر يُنقر عليه في بطاقة صفحة هبوط مُشاركة هو عادة الصورة، لذا استثمر في تصميم 1200×630 نظيف.

صفحة توثيق

العنوان: "المفهوم — القسم · التوثيق". الوصف: جملة واحدة تشرح المفهوم. الصورة: غلاف توثيق عام أو لقطة شاشة لواجهة الاستخدام المعنية.

صفحات التوثيق تُشارك في قنوات Slack وسلاسل X. صورة غلاف توثيق ثابتة تجعلها مميّزة في موجز مزدحم قبل قراءة العنوان حتى.

أخطاء شائعة في Open Graph

  • استخدام رابط og:image نسبي مثل /images/cover.png. زواحف الشبكات الاجتماعية تصل إلى صفحتك من خوادم *خاصة بها* — والمسارات النسبية تشير إلى نطاق المنصّة الاجتماعية نفسها وتعيد 404. استخدم دائمًا رابطًا مطلقًا https://.
  • نسيان twitter:card. بدونه، X يلجأ إلى بطاقة بسيطة بلا صورة. أضف twitter:card=summary_large_image للحصول على تخطيط البانر الذي تريده معظم العلامات التجارية فعليًا.
  • تجاوز وسم og:image:alt. لا يكلّف شيئًا، ويساعد مستخدمي قارئات الشاشة، وبعض المنصّات تعرضه كنص بديل على البطاقة المعروضة.

أسئلة شائعة حول معاينة Open Graph

ما هو Open Graph؟
Open Graph بروتوكول نشرته Facebook في 2010 يتيح لصفحة ويب أن تصف نفسها بمجموعة صغيرة من وسوم <meta> — عنوان ووصف وصورة ونوع وغير ذلك. كل منصّة اجتماعية أو تطبيق محادثة كبير اليوم يقرؤه، ولهذا أصبح المعيار الفعلي للبيانات الوصفية لبطاقات المشاركة.
Twitter Cards مقابل Open Graph — هل أحتاج الاثنين؟
أرسل الاثنين. X (تويتر) يلجأ من وسوم twitter: إلى الوسوم المكافئة og: عند غياب وسوم X الخاصة، فيمكنك تقنيًا الاكتفاء بـ Open Graph وحده. لكن إضافة twitter:card وtwitter:site وtwitter:creator يمنحك تحكّمًا أدقّ في كيفية ظهور البطاقة على X.
ما الحجم الذي ينبغي أن يكون عليه og:image؟
1200×630 بكسل (بنسبة 1.91:1) هو الحجم الأكثر أمانًا. Facebook وLinkedIn وX كلها تعرض هذه النسبة جيّدًا. أبقِ الملف أقل من نحو 5 ميجابايت وقدّمه عبر HTTPS برابط مطلق — المسارات النسبية تفشل عندما تجلب خوادم أخرى صفحتك.
لماذا لا تتحدّث المعاينة عندي على Facebook؟
Facebook يخزّن بطاقات المشاركة بقوّة. بعد تعديل وسوم meta، ألصق الرابط في مصحّح مشاركة Facebook وانقر على *Scrape Again*. نفس الحيلة تعمل في X مع Card Validator، وفي LinkedIn مع Post Inspector.
هل يستخدم Google وسوم Open Graph؟
للترتيب، لا — زاحف Google الخاص يقرأ محتوى الصفحة و<title> وmeta description. وقد يلتقط Google أحيانًا og:image لبحث الصور وواجهات Discover، لكنه ليس إشارة ترتيب.
هل يمكنني توليد صورة مختلفة لكل صفحة تلقائيًا؟
نعم — معظم أُطر العمل تدعم صور Open Graph الديناميكية. Next.js لديه واجهة OG Image Generation API، وSvelteKit وAstro لديهما أنماط مشابهة. ارسم الصورة وقت الطلب وخزّنها بقوّة — زواحف الشبكات الاجتماعية تنتهي مهلتها بسرعة.

اعرف المزيد

أدوات مطورين أخرى

Coddy programming languages illustration

تعلّم البرمجة مع Coddy

ابدأ الآن