العربية
أنشئ علامات Open Graph وTwitter Card مع معاينة اجتماعية مباشرة.
آخر تحديث
موصى به 1200×630، أقل من 8 ميجابايت، رابط مطلق (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<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" />
عندما تشارك رابطًا في أي تطبيق حديث — منشور أو رسالة مباشرة أو قناة Slack — تجلب المنصّة الرابط وتستخرج جزءًا صغيرًا من البيانات الوصفية لرسم *بطاقة مشاركة*: العنوان، الوصف، الصورة، واسم الموقع. هذه البيانات الوصفية لا تُستخرج من الصفحة المرئية، بل تأتي من مجموعة محدّدة من وسوم <meta> داخل عنصر <head>. بروتوكول Open Graph الذي ابتكره Facebook في 2010 يُعرّف معظمها. وX (تويتر سابقًا) تضيف بعض الإضافات ببادئة twitter:. وLinkedIn وDiscord وSlack وiMessage وWhatsApp وPinterest كلها تقرأ الوسوم نفسها مع اختلافات بسيطة.
ضبط هذه الوسوم بشكل صحيح عمل لمرّة واحدة لكل صفحة، لكن أثره كبير. صفحة بلا صورة Open Graph تبدو مكسورة عند مشاركتها. العنوان الطويل يُقطع في منتصف الكلمة. نسبة og:image الخاطئة تُحاط بشريطين أسودين في كل منصّة. هذه الأداة تتيح لك ضبط هذه القيم بمعاينات حيّة، فترى مشاكل الاقتطاع والقصّ *قبل* إطلاق الصفحة.
كل شيء يعمل محليًا. حالة النموذج والمعاينات وكود HTML المُولّد لا تغادر متصفحك — ألصق روابط ما قبل الإطلاق ونصوصًا غير منشورة دون قلق من تسرّب.
property (<meta property="og:title">)، بينما وسوم SEO القياسية ووسوم Twitter Card تستخدم name (<meta name="description">، <meta name="twitter:card">).title، meta description)، وOpen Graph (og:title، og:description)، وTwitter (twitter:title، twitter:description).og:image بحجم 1200×630 ومُقدَّمًا عبر HTTPS ومُعطى رابطًا مطلقًا — المسارات النسبية تفشل عندما تجلب خوادم أخرى الصفحة.استهدف 50 إلى 60 حرفًا. Facebook يقطع عند نحو 95 حرفًا، وX عند نحو 70. ابدأ بالقيمة لا بالعلامة التجارية — "كيف تنشر على Cloudflare Workers" أفضل من "مدوّنة Coddy · دليل النشر".
استهدف 120 إلى 155 حرفًا. معظم المنصّات تقطع عند نحو 200. استخدم جملًا كاملة — يظهر الوصف تحت العنوان في كل بطاقة، والشظايا المقطوعة تبدو غير مكتملة.
استخدم الرابط المطلق https:// للصفحة نفسها، لا رابط تتبّع أو إعادة توجيه. زوّار Open Graph يتبعون og:url عند إزالة التكرار للمشاركات — والرابط الأساسي يبقي عدّاد المشاركات والمعاينات متّسقة.
حجم 1200×630 هو الأمثل لبطاقات summary_large_image على X وللبطاقات القياسية على Facebook وLinkedIn. صيغة PNG أو JPEG، أقل من ~5 ميجابايت. استخدم دائمًا رابطًا مطلقًا — المسارات النسبية تفشل لأن زاحف الشبكة الاجتماعية يصل إلى الرابط من خادمه الخاص.
ألصق الكتلة من لوحة **وسوم <head> المُولّدة** داخل عنصر <head> في صفحتك. بعد النشر، تحقّق عبر مصحّح كل منصّة (Facebook Sharing Debugger وX Card Validator وLinkedIn Post Inspector) وأجبر إعادة الزحف إن غيّرت الصورة لاحقًا.
الوسوم أدناه تغطّي كل ما تقرؤه المنصّات الاجتماعية اليوم. الوسوم المعلّمة بـ property= تنتمي إلى بروتوكول Open Graph، والمعلّمة بـ name= هي صيغ SEO القياسية / Twitter Card. مراجع المواصفات: Open Graph و بطاقات X.
| الوسم | يستخدمه | الموصى به | ملاحظات |
|---|---|---|---|
og:title | FB، LinkedIn، Slack، Discord | 50-60 حرفًا | يلجأ إلى <title> إن غاب — اضبطه على أيّ حال. |
og:description | FB، LinkedIn، Slack، Discord | 120-155 حرفًا | يلجأ إلى meta description إن غاب. |
og:image | كل المنصّات | 1200×630، أقل من 5 ميجابايت، HTTPS، رابط مطلق | يجب أن يكون رابطًا مطلقًا — المسارات النسبية تفشل. |
og:image:alt | إمكانية الوصول | وصف الصورة | يُستخدم بقارئات الشاشة وبعض المنصّات. |
og:url | FB، LinkedIn | رابط https:// الأساسي | يُستخدم لإزالة تكرار المشاركات بين متغيّرات سلسلة الاستعلام. |
og:type | FB، LinkedIn | website أو article | article يفتح الوسوم article:published_time وarticle:author. |
og:site_name | FB، Discord | اسم العلامة التجارية | يظهر كنسب صغير فوق/تحت البطاقة. |
twitter:card | X | summary_large_image | summary لصورة مصغّرة مربّعة صغيرة، وsummary_large_image لتخطيط البانر. |
twitter:title | X | نفس og:title | X يلجأ إلى og:title إن غاب — اضبط الاثنين للأمان. |
twitter:description | X | نفس og:description | يلجأ إلى og:description إن غاب. |
twitter:image | X | نفس og:image | يلجأ إلى og:image إن غاب. |
twitter:site | X | @yourbrand | حساب الناشر على X — يدفع بعض التحليلات. |
اضبط **og:type** على article، وأضِف **المؤلف** و**وقت النشر** في القسم الخاص بالمقالات، واستخدم صورة غلاف 1200×630. المعاينات تتحدّث لتُظهر شكل البطاقة على كل منصّة.
og:type=article يفتح وسوم المقالات (article:published_time وarticle:author) التي تستخدمها بعض المنصّات (Discord وLinkedIn) لإظهار النسب. Twitter يتجاهلها لكن لا يشتكي منها.
أبقِ **og:type** على website. استخدم اسم المنتج كعنوان، وعبارة قيمة من جملة واحدة كوصف، وصورة hero أو لقطة شاشة مقصوصة كصورة.
صفحات الهبوط لا تحتاج بيانات وصفية للمقالات. أكثر عنصر يُنقر عليه في بطاقة صفحة هبوط مُشاركة هو عادة الصورة، لذا استثمر في تصميم 1200×630 نظيف.
العنوان: "المفهوم — القسم · التوثيق". الوصف: جملة واحدة تشرح المفهوم. الصورة: غلاف توثيق عام أو لقطة شاشة لواجهة الاستخدام المعنية.
صفحات التوثيق تُشارك في قنوات Slack وسلاسل X. صورة غلاف توثيق ثابتة تجعلها مميّزة في موجز مزدحم قبل قراءة العنوان حتى.
og:image نسبي مثل /images/cover.png. زواحف الشبكات الاجتماعية تصل إلى صفحتك من خوادم *خاصة بها* — والمسارات النسبية تشير إلى نطاق المنصّة الاجتماعية نفسها وتعيد 404. استخدم دائمًا رابطًا مطلقًا https://.twitter:card. بدونه، X يلجأ إلى بطاقة بسيطة بلا صورة. أضف twitter:card=summary_large_image للحصول على تخطيط البانر الذي تريده معظم العلامات التجارية فعليًا.og:image:alt. لا يكلّف شيئًا، ويساعد مستخدمي قارئات الشاشة، وبعض المنصّات تعرضه كنص بديل على البطاقة المعروضة.<meta> — عنوان ووصف وصورة ونوع وغير ذلك. كل منصّة اجتماعية أو تطبيق محادثة كبير اليوم يقرؤه، ولهذا أصبح المعيار الفعلي للبيانات الوصفية لبطاقات المشاركة.twitter: إلى الوسوم المكافئة og: عند غياب وسوم X الخاصة، فيمكنك تقنيًا الاكتفاء بـ Open Graph وحده. لكن إضافة twitter:card وtwitter:site وtwitter:creator يمنحك تحكّمًا أدقّ في كيفية ظهور البطاقة على X.<title> وmeta description. وقد يلتقط Google أحيانًا og:image لبحث الصور وواجهات Discover، لكنه ليس إشارة ترتيب.