<title>: • العنوان الذي يظهر في تاب المتصفح وفي نتائج جوجل • من أهم عناصر SEO On-Page • معادلة مثالية: "الكلمة المفتاحية | اسم الموقع" • الطول الأمثل: 50-60 حرف • يجب أن يكون فريداً لكل صفحة
<link>: يربط الصفحة بموارد خارجية • rel: طبيعة العلاقة (إلزامي) • href: الرابط
استخدامات link: • stylesheet: CSS خارجي (الأكثر شيوعاً) • icon/shortcut icon: favicon • canonical: الرابط الأصلي لمنع duplicate content • alternate: نسخ بلغات أخرى (hreflang) • preload: تحميل مسبق لموارد مهمة • preconnect: اتصال مسبق بخوادم خارجية • dns-prefetch: حل DNS مسبق',
| 1 | <head> |
| 2 | <!-- العنوان - مهم جداً للـ SEO --> |
| 3 | <title>تعلم HTML بالعربي | نوفيل - منصة البرمجة</title> |
| 4 | |
| 5 | <!-- CSS الرئيسي --> |
| 6 | <link rel="stylesheet" href="/styles/main.css"> |
| 7 | |
| 8 | <!-- Favicon --> |
| 9 | <link rel="icon" href="/favicon.ico" sizes="32x32"> |
| 10 | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> |
| 11 | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
| 12 | |
| 13 | <!-- Canonical: لمنع duplicate content --> |
| 14 | <link rel="canonical" href="https://nouvil.com/learn/html"> |
| 15 | |
| 16 | <!-- hreflang: نسخة إنجليزية --> |
| 17 | <link rel="alternate" href="https://nouvil.com/en/learn/html" hreflang="en"> |
| 18 | |
| 19 | <!-- Preload: تحميل مسبق للخط الأساسي --> |
| 20 | <link rel="preload" href="/fonts/tajawal.woff2" as="font" type="font/woff2" crossorigin> |
| 21 | |
| 22 | <!-- Preconnect: اتصال مسبق بـ Google Fonts --> |
| 23 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 24 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 25 | </head> |
مثال 1: head محسّن كامل لـ SEO
| 1 | <head> |
| 2 | <meta charset="UTF-8"> |
| 3 | |
| 4 | <!-- Title محسّن لـ SEO --> |
| 5 | <title>تعلم HTML5 من الصفر للاحتراف — مجاناً | نوفيل</title> |
| 6 | |
| 7 | <!-- CSS الرئيسي --> |
| 8 | <link rel="stylesheet" href="/css/app.css"> |
| 9 | |
| 10 | <!-- Favicon بصيغ متعددة --> |
| 11 | <link rel="icon" type="image/svg+xml" href="/favicon.svg"> |
| 12 | <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> |
| 13 | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
| 14 | |
| 15 | <!-- Canonical --> |
| 16 | <link rel="canonical" href="https://nouvil.com/learn/html"> |
| 17 | |
| 18 | <!-- Preload للخط العربي --> |
| 19 | <link |
| 20 | rel="preload" |
| 21 | href="/fonts/Tajawal-Regular.woff2" |
| 22 | as="font" |
| 23 | type="font/woff2" |
| 24 | crossorigin="anonymous" |
| 25 | > |
| 26 | |
| 27 | <!-- Preconnect للـ CDN --> |
| 28 | <link rel="preconnect" href="https://cdn.nouvil.com"> |
| 29 | |
| 30 | <!-- RSS Feed --> |
| 31 | <link |
| 32 | rel="alternate" |
| 33 | type="application/rss+xml" |
| 34 | title="نوفيل — RSS" |
| 35 | href="/rss.xml" |
| 36 | > |
| 37 | </head> |