وسوم Meta المتقدمة لتحسين مشاركة الصفحة على منصات التواصل الاجتماعي:
Open Graph (OG): • بروتوكول طوّرته Facebook • يتحكم في كيفية ظهور الصفحة عند مشاركتها على Facebook، LinkedIn، WhatsApp، Discord... • بدونه المنصات تختار صورة ونصاً عشوائياً
Twitter Cards: • تتحكم في ظهور الصفحة على Twitter/X • أنواع: summary، summary_large_image، app، player
معيار الصورة الأمثل: • og:image: 1200x630 بيكسل، JPG أو PNG • حجم الملف: أقل من 5 MB • تجنب النصوص الكثيرة في الصورة',
| 1 | <head> |
| 2 | <!-- Open Graph الأساسي --> |
| 3 | <meta property="og:type" content="article"> |
| 4 | <meta property="og:title" content="تعلم HTML5 بالعربي من الصفر — نوفيل"> |
| 5 | <meta property="og:description" content="دليل شامل لتعلم HTML5 بالعربي مع أمثلة عملية"> |
| 6 | <meta property="og:url" content="https://nouvil.com/learn/html"> |
| 7 | <meta property="og:image" content="https://nouvil.com/og/html-course.jpg"> |
| 8 | <meta property="og:image:width" content="1200"> |
| 9 | <meta property="og:image:height" content="630"> |
| 10 | <meta property="og:image:alt" content="كورس HTML بالعربي — نوفيل"> |
| 11 | <meta property="og:locale" content="ar_EG"> |
| 12 | <meta property="og:site_name" content="نوفيل"> |
| 13 | |
| 14 | <!-- Twitter Card --> |
| 15 | <meta name="twitter:card" content="summary_large_image"> |
| 16 | <meta name="twitter:site" content="@nouvil"> |
| 17 | <meta name="twitter:creator" content="@nouvil"> |
| 18 | <meta name="twitter:title" content="تعلم HTML5 بالعربي — نوفيل"> |
| 19 | <meta name="twitter:description" content="دليل شامل لتعلم HTML5"> |
| 20 | <meta name="twitter:image" content="https://nouvil.com/og/html-course.jpg"> |
| 21 | <meta name="twitter:image:alt" content="كورس HTML بالعربي"> |
| 22 | </head> |
مثال 1: head كامل لمقالة بلوج
| 1 | <head> |
| 2 | <meta charset="UTF-8"> |
| 3 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 4 | |
| 5 | <title>HTML5 - الدليل الشامل بالعربي | نوفيل</title> |
| 6 | <meta name="description" content="تعلم كل وسوم HTML5 بالتفصيل بالعربي مع أمثلة عملية. مناسب للمبتدئين والمحترفين."> |
| 7 | |
| 8 | <!-- Open Graph --> |
| 9 | <meta property="og:type" content="article"> |
| 10 | <meta property="og:title" content="HTML5 — الدليل الشامل بالعربي"> |
| 11 | <meta property="og:description" content="كل ما تحتاج معرفته عن HTML5 في مكان واحد"> |
| 12 | <meta property="og:url" content="https://nouvil.com/learn/html"> |
| 13 | <meta property="og:image" content="https://nouvil.com/images/og-html-guide.jpg"> |
| 14 | <meta property="og:image:width" content="1200"> |
| 15 | <meta property="og:image:height" content="630"> |
| 16 | <meta property="og:locale" content="ar_EG"> |
| 17 | <meta property="og:site_name" content="نوفيل"> |
| 18 | <meta property="article:published_time" content="2024-06-15T10:00:00+02:00"> |
| 19 | <meta property="article:author" content="https://nouvil.com/team/ahmed"> |
| 20 | |
| 21 | <!-- Twitter --> |
| 22 | <meta name="twitter:card" content="summary_large_image"> |
| 23 | <meta name="twitter:site" content="@nouvil_ar"> |
| 24 | <meta name="twitter:title" content="HTML5 — الدليل الشامل بالعربي"> |
| 25 | <meta name="twitter:image" content="https://nouvil.com/images/og-html-guide.jpg"> |
| 26 | |
| 27 | <!-- Canonical --> |
| 28 | <link rel="canonical" href="https://nouvil.com/learn/html"> |
| 29 | </head> |